根据 PaperJS 中的屏幕大小调整光栅大小

Question

我想在通过 PaperJS 调整 canvas 大小时调整光栅（图像）的大小。我正在使用以下代码：

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);
}

但是，一旦通过resizeImg()函数，图像就没有了（将函数注释掉会使图像重新出现）。

我在函数中遗漏了什么？ 估计只是简单的计算错误

Answer 1

对象的宽度由其 bounds.width 属性引用，而不是 width 单独引用。

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

Answer 2

以下保留了图像的宽高比，让您免去做数学题的麻烦。 fitBounds (doc) and view.onFrame (doc) 让它全部自动工作。

…

function resizeImg () {
  img.fitBounds(view.bounds)
}

view.onFrame = function (event) {
  resizeImg()
}

根据 PaperJS 中的屏幕大小调整光栅大小

Resize Raster according to screen size in PaperJS

paperjs