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 pm
      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
    • Mar 19 2014 | 9:36 pm
      thank you Ben
    • Jun 11 2019 | 10:09 am
      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);
      	}		
      }
    • Jun 13 2019 | 4:26 am
      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.
    • Jun 13 2019 | 3:27 pm
      hi audiomatt, can you zip up a complete patch + js file + image and attach or send to me privately?
    • Nov 01 2021 | 8:29 pm
      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",
    • Nov 02 2021 | 12:17 am
      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();
          }
      }
    • Nov 02 2021 | 12:25 am
      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).
    • Nov 02 2021 | 1:34 am
      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?
    • May 02 2022 | 3:16 pm
      hey 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 pm
      Thank you very much rob!!!!
      I appreciate cycling very much