JSUI / MGraphics : instance to image - alpha channel bug ?
Hello !
im trying to draw separate "mgraphics" context into the Image , to reuse later within main context . Everything is working fine unless my drawings use alpha .
when alpha is provided im getting differences within colors .
mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;
autowatch = 1;
var image ;
function offline(){
var mg = new MGraphics(100,100);
with(mg){
set_source_rgba(0, 1, 0, .5);
rectangle(0, 0, 100, 100);
fill();
}
image = new Image(mg);
};
function paint(){
with(mgraphics){
save();
set_source_rgba(0, 1, 0, .5);
rectangle(0, 0, 100, 100);
fill();
restore();
translate(100, 0);
// set_source_rgba(0, 0, 0, 1);
image_surface_draw(image);
}
};
offline();
mgraphics.redraw();
I can confirm a bit of an issue here with the alpha calculation. Looks like its been this way since the beginning. We will take a closer look, thanks!
-Ben
thank you Ben
is this still a bug? following code looks FUGLY AS F
mgraphics.init();
mgraphics.relative_coords = 0;
mgraphics.autofill = 0;
var width = 0;
var height = 0;
var outImage;
mgraphics.redraw();
function paint()
{
var mg = new MGraphics(100,100);
with(mg){
init();
relative_coords=0;
autofill=0;
set_source_rgba(.5,.5,.5,.5);
move_to(0,0);
line_to(100,97);
stroke();
move_to(50,50);
select_font_face("Arial");
set_font_size(20);
show_text("mytext");
}
outImage=new Image(mg);
// calculate the current width and height
width = (box.rect[2] - box.rect[0]);
height = (box.rect[3] - box.rect[1]);
mgraphics.set_line_width(10);
// special case for drawing inside the box!
with (mgraphics) {
// draw the image
image_surface_draw(outImage);
}
}For anyone searching this, I received confirmation that this is still an outstanding bug in 8.0.6. C74 seems to have made attempts at addressing bugs with image_surface_draw over the years but this one remains.
hi audiomatt, can you zip up a complete patch + js file + image and attach or send to me privately?
Seems as if this is still an issue in 8.2, an example attached. The same image doesn't render horribly with jit.mgraphics, so it seems something specific to the JS image_surface_draw.
I'd been hoping that I could separately cache the layers of a reasonably intensive UI as images and only re-render elements as needed, but doesn't look like that'll fly :-(
I guess I could cache paths instead with copy_path? Or admit defeat and do it in C.
Trimmed version spiel:
"version" : "Version 8.2.0 (42e5454dc76) (x64 mac)",
"platform" : "mac",
"arch" : "x64",
"osversion" : "Mac OS X Version 10.15.7 (Build 19H1217) x86_64",
looks to me like you simply need to provide a background color to the image cache for proper background blending. simply moving the lines rectangle, set_source_rgb and fill to the render function fixes things:
function render(mg) {
with (mg) {
rectangle(0, 0, width, height);
set_source_rgb(0.3, 0.3, 0.3);
fill();
set_source_rgb(1, 0, 0);
set_line_width(4);
move_to(0, height - data[0]);
for (var i = 0; i < width; i++)
line_to(i, height - data[i])
stroke();
}
}Thanks Rob,
That's indeed what I've ended up doing for now. For the project in question, the UI is made up of a bunch of layers of different plots (waveforms, feature curves), and I'd been hoping to cache them separately so that individual layers would only need to be re-rendered as and when they change, and then draw them on top of each other (hence the fixed background).
aha, I see how this won't work for that use-case. not sure if there's a better workaround unfortunately. maybe with Sketch instead of Mgraphics?
hey all, just a quick note to say that the issues reported in this thread should be fixed up with the 8.3 update.
Thank you very much rob!!!!
I appreciate cycling very much