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

Question

我正在研究一个将raster(图像)放入的Paper.js应用程序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

长话短说

\n

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

\n

\n

• 缩放后：

  \n

    paper.view.setCenter(0,0);\n

  \n
\n

• 粘贴图片时：

  \n

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

  \n
\n

\n

长答案

\n

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

\n

我或多或少地复制了您的代码，经过一番修补后，我设法使用以下方法解决了该问题：

\n

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

\n

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

\n

尽管我不满意，因为我不明白为什么这会起作用。因此，我一直在查看您的代码并注意到这一点：

\n

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

\n

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

\n

\n

光栅

\n

根据传递的参数创建一个新的栅格项目，并将其放置在活动图层中。object 可以是 DOM Image、Canvas 或描述从中加载图像的 URL 的字符串，也可以是从中获取图像的 DOM 元素的 ID（DOM Image 或 Canvas）。

\n

参数：

\n

source : HTMLImageElement / HTMLCanvasElement / String \xe2\x80\x94 栅格的源 \xe2\x80\x94 可选

\n

position : 点 \xe2\x80\x94 光栅项放置的中心位置 \xe2\x80\x94 可选

\n

\n

我的理解是，图像以中心位置0,0（也称为左上角）粘贴在画布上。然后画布内容的大小会根据其自身的中心位置进行调整。这会将图像拉近画布的中心，但仍然存在差异。

\n

将中心设置为0,0简单地同步图像和画布的中心点。

\n

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

\n

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

\n

这是用于实验的基本JSFiddle。

\n