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

Question

我正在开发一个将raster（图片）放在view中的Paper.js应用程序。然后它缩放以适合图像，以便一次可见所有图像。它主要是工作，但图像最终偏移，如下所示：

当看起来应该更像这样：

以下是制作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

     

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

     

参数：

     

来源：HTMLImageElement / HTMLCanvasElement / String - 栅格的来源 - 可选

     

位置：点 - 放置栅格项目的中心位置 - 可选

我的理解是图像粘贴在画布上，其中心位于0,0位置，也称为左上角。然后调整画布的内容大小，但基于其自己的中心位置。这会使图像更接近画布的中心，但仍然存在差异。

将中心设置为0,0只需同步图像和画布的中心点。

还有一种替代方法，即将图像粘贴到画布的当前中心，这看起来更合适：

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

以下是要进行实验的基本JSFiddle。