适合页面放大后光栅图像偏离中心 Paper.js

Question

我正在开发一个 Paper.js 应用程序，它将 raster（图像）放入 view。然后它会缩放以适合图像，以便一次可以看到所有图像。它大部分工作正常，但图像最终会发生偏移，如下所示：

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

下面是制作 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];
};

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

Answer 1

TL;DR

使用其中一个，但不能同时使用：

缩放后：
```
  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

我的理解是贴在canvas上，中心在0,0位置，也就是左上角。然后 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实验。

适合页面放大后光栅图像偏离中心 Paper.js

Raster image is off-center after fit-to-page zooming in Paper.js

javascript

image

raster

zooming

paperjs

TL;DR

长答案