Search code examples
javascriptpaperjs

Paper js - Raster onClick event attached only to position Point

I am using PaperJS and I need to use an existing set of icons that I can receive as a base64 string (that's a given I can't change). I have no problem rendering the rasters. However when I set them a position like so:

    const myRaster = new Raster(<someBase64>);
    myRaster.position = new Point(receivedX, recievdY);
    myRaster.onClick = () => console.log('raster click');

The onClick event would only work if I click exactly on [x,y] point assigned to the position property. The X and Y are received form a data base and are in accordance to other visible elements.

I played around in the PaeprJS website, and without using a new Point position the onClick works all around the image.

My solution for now is creating an invisible polygon (new Path.RegularPolygon) and to attach to onClick event to it and it works. However, there's must be a simpler solution and would love to understand what I am missing here.

Thanks!

Solution

  • Apparently, the SVG was partially created programmaticly and had a lot of whitespace around it. Testing with base64 encoded SVGs from various different sources worked as expected