Search code examples
paperjs

Resize Raster according to screen size in PaperJS

I would like resize a Raster (image) when I resize the canvas via PaperJS. I'm using the following codes:

var last_point = view.center;
var img = new Raster('images/test.png', view.center);
img.onLoad = function() {
    resizeImg();
}
function onResize(event) {
    view.scrollBy(last_point.subtract(view.center));
    last_point = view.center;
    resizeImg();
}
function resizeImg() {
    var width = paper.view.size.width; 
    var scale = (width / img.width) * 0.75;
    img.scale(scale);
}

However, once going through resizeImg() function, the image is gone (commented the function out will make the image re-appear).

What did I miss in the function? I guess it's just a simple mistake in calculation

Solution

  • An object's width is referenced by its bounds.width property, not width alone.

    function resizeImg() {
    var width = paper.view.size.width; 
    var scale = (width / img.bounds.width) * 0.75;
    img.scale(scale);
}