JSUI / MGraphics : instance to image - alpha channel bug ?
Mar 16 2014 | 7:29 pm
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();
- Mar 19 2014 | 8:44 pmI 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
- Mar 19 2014 | 9:36 pmthank you Ben
- Jun 11 2019 | 10:09 amis 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); } } - Jun 13 2019 | 4:26 amFor 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.
- Jun 13 2019 | 3:27 pmhi audiomatt, can you zip up a complete patch + js file + image and attach or send to me privately?
- Nov 01 2021 | 8:29 pmSeems 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",
- Nov 02 2021 | 12:17 amlooks 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(); } } - Nov 02 2021 | 12:25 amThanks 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).
- Nov 02 2021 | 1:34 amaha, 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?
- May 02 2022 | 3:16 pmhey all, just a quick note to say that the issues reported in this thread should be fixed up with the 8.3 update.
- May 02 2022 | 3:33 pmThank you very much rob!!!!I appreciate cycling very much
