我正在开发一个 Paper.js 应用程序，它在 view 中放置一个 raster(图像)。然后它会缩放以适合图像，以便一次可以看到所有图像。它主要工作，但图像最终偏移，如下所示:

什么时候应该看起来更像这样:

下面是创建 View 、添加图像并调用缩放以适合的代码:

// Set up HTMLImage
var image = new Image(this.props.image.width, this.props.image.height);
image.src = 'data:image/png;base64,' + this.props.image.imageData;

//var canvas = React.findDOMNode(this.refs.canvas); // React 0.13 +
var canvas = this.refs.canvas.getDOMNode();

// Scale width based on scaled height; canvas height has been set to the height of the document (this.props.height)
var scalingFactor = canvas.height/image.height;
canvas.width = image.width * scalingFactor;

// Initialize Paper.js on the canvas
paper.setup(canvas);

// Add image to Paper.js canvas
var raster = new paper.Raster(image, new paper.Point(0,0));

// Fit image to page so whole thing is displayed
var delta = scalingFactor < 1 ? -1 : 1; // Arbitrary delta (for determining zoom in/out) based on scaling factor
var returnedValues = panAndZoom.changeZoom(paper.view.zoom, delta, paper.view.center, paper.view.center, scalingFactor);
paper.view.zoom = returnedValues[0];

这里是 panAndZoom.changeZoom 方法:

SimplePanAndZoom.prototype.changeZoom = function(oldZoom, delta, centerPoint, offsetPoint, zoomFactor) {
    var newZoom = oldZoom;
    if (delta < 0) {
        newZoom = oldZoom * zoomFactor;
    }
    if (delta > 0) {
        newZoom = oldZoom / zoomFactor;
    }

    var a = null;
    if(!centerPoint.equals(offsetPoint)) {
        var scalingFactor = oldZoom / newZoom;
        var difference = offsetPoint.subtract(centerPoint);
        a = offsetPoint.subtract(difference.multiply(scalingFactor)).subtract(centerPoint);
    }

    return [newZoom, a];
};

知道为什么它缩放以适应但失去居中吗？

最佳答案

长话短说

使用其中之一，但不能同时使用:

• 缩放后:

    paper.view.setCenter(0,0);
  

• 粘贴图片时:

    var raster = new paper.Raster(image, new paper.Point(canvas.width/2, canvas.height/2));
  

长答案

作为免责声明，我必须指出我对 paper.js 一无所知，而且他们的文档看起来很糟糕。这个答案是从摆弄中诞生的。

我或多或少地复制了您的代码，经过一些修改后，我设法通过使用此代码解决了这个问题:

paper.view.zoom = returnedValues[0];
paper.view.setCenter(0,0);

如果您想知道为什么我没有指向 setCenter 的文档，那是因为我找不到任何文档。我通过检查 paper.view.center 发现了这个方法。

虽然我不满意，因为我不明白为什么会这样。因此，我一直在查看您的代码并注意到这一点:

// Add image to Paper.js canvas
var raster = new paper.Raster(image, new paper.Point(0,0));

raster 的文档告诉我们以下内容:

Raster

Creates a new raster item from the passed argument, and places it in the active layer. object can either be a DOM Image, a Canvas, or a string describing the URL to load the image from, or the ID of a DOM element to get the image from (either a DOM Image or a Canvas).

Parameters:

source: HTMLImageElement / HTMLCanvasElement / String — the source of the raster — optional

position: Point — the center position at which the raster item is placed — optional

我的理解是图像以中心位置 0,0 粘贴在 Canvas 上，也称为左上角。然后调整 Canvas 内容的大小，但基于它自己的中心位置。这将图像拉近了 Canvas 的中心，但仍然存在差异。

将中心设置为 0,0 可以简单地同步图像和 Canvas 的中心点。

还有一种替代方法，就是将图像粘贴到 Canvas 的当前中心，这似乎更合适:

// Add image to Paper.js canvas
var raster = new paper.Raster(image, new paper.Point(canvas.width/2, canvas.height/2));

这是基本的 JSFiddle进行实验。

关于javascript - 在 Paper.js 中适合页面缩放后，光栅图像偏离中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33003119/