Search code examples
javascriptrasterpaperjs

Paper.js Subraster Added Behind Rectangle Instead of in Front


In this Paper.js Sketch, selecting an area of the Mona Lisa raster makes a whiteout Rectangle of the area in place, as well as a generating a subraster of the area. The whiteout rectangle is added first, and the subraster second. However, as you witness in the sketch, the whiteout rectangle remains on top. Test this by commenting out the whiteout rectangle chunk and uncommenting the last line to see that the subraster does indeed get generated.

This can be remedied in this scenario with a call to bringToFront(), but that still doesn't explain why the subraster ends up behind the white rectangle, despite the fact that it was added last. What is the cause of this behavior? What is the logic going on here? Thanks in advance.


Solution

  • If you look at the getSubRaster() function, you can see that it inserts the returned raster directly above the raster object it was created from.

    function() {
      var rect = Rectangle.read(arguments),
        raster = new Raster(Item.NO_INSERT);
      raster.setImage(this.getSubCanvas(rect));
      raster.translate(rect.getCenter().subtract(this.getSize().divide(2)));
      raster._matrix.preConcatenate(this._matrix);
      raster.insertAbove(this);
      return raster;
    }