如何在 paper.js 中调整栅格（图像）的大小？答案

【问题标题】：How to resize a raster(image) in paper.js?如何在 paper.js 中调整栅格（图像）的大小？
【发布时间】：2017-11-06 12:07:57
【问题描述】：

我使用 Paper.js 文档中的代码加载了一张图片。但我想改变图像大小。我不想缩放图像，而是为图像设置尺寸。有没有办法在 Paper.js 中设置图像的width 和height？

var raster = new Raster({
    source: 'http://assets.paperjs.org/images/marilyn.jpg',
    position: view.center
});

【问题讨论】：

你试过scale的方法吗？

标签： javascript html canvas paperjs

【解决方案1】：

Paper.js Raster 文档中默认没有这种方法。不过，这不会阻止您添加自己的。您可以执行以下操作：

/**
 * Re-scales the Raster object to the new dimensions.
 * Method added to the Raster's prototype to easily
 * call it from the raster object itself.
 */
Raster.prototype.rescale = function(width, height) {
    this.scale(width / this.width, height / this.height);
};

var raster = new Raster({
    source: 'http://assets.paperjs.org/images/marilyn.jpg',
    position: view.center
});

raster.rescale(200, 100);

这是一个codepen 的工作示例。

【讨论】：

实际上，这可能是我所要求的替代方案。谢谢，最后一件事是有办法逐渐降低不透明度。
如何逐渐？如果您愿意，可以提出新问题或编辑此问题，并通过评论告诉我。

【解决方案2】：

您可以通过以下方式缩放图像以适合画布：

const image = new paper.Raster('http://assets.paperjs.org/images/marilyn.jpg');
const widthRatioOfCanvasToImage =
  paper.view.bounds.width / image.bounds.width;
const heightRatioOfCanvasToImage =
  paper.view.bounds.height / image.bounds.height;
const scale = Math.min(
  widthRatioOfCanvasToImage,
  heightRatioOfCanvasToImage
);
image.scale(scale, scale);

【讨论】：