Paper.js Subraster选择错误的区域

我正在一个Paper.js项目中工作，我们实际上是在进行图像编辑。有一个大栅格。我正在尝试使用该getSubRaster方法来复制图像的一部分（光栅），然后用户可以在其中移动。

加载要编辑的栅格后，selectArea将调用以注册以下侦听器：

var selectArea = function() {
  if(paper.project != null) {
    var startDragPoint;

    paper.project.layers[0].on('mousedown', function(event) { // TODO should be layer 0 in long run? // Capture start of drag selection
      if(event.event.ctrlKey && event.event.altKey) {
        startDragPoint = new paper.Point(event.point.x + imageWidth/2, (event.point.y + imageHeight/2));
        //topLeftPointOfSelectionRectangleCanvasCoordinates = new paper.Point(event.point.x, event.point.y);
      }
    });
    paper.project.layers[0].on('mouseup', function(event) { // TODO should be layer 0 in long run? // Capture end of drag selection
      if(event.event.ctrlKey && event.event.altKey) {
        var endDragPoint = new paper.Point(event.point.x + imageWidth/2, event.point.y + imageHeight/2);

        // Don't know which corner user started dragging from, aggregate the data we have into the leftmost and topmost points for constructing a rectangle
        var leftmostX;
        if(startDragPoint.x < endDragPoint.x) {
          leftmostX = startDragPoint.x;
        } else {
          leftmostX = endDragPoint.x;
        }
        var width = Math.abs(startDragPoint.x - endDragPoint.x);

        var topmostY;
        if(startDragPoint.y < endDragPoint.y) {
          topmostY = startDragPoint.y;
        } else {
          topmostY = endDragPoint.y;
        }
        var height = Math.abs(startDragPoint.y - endDragPoint.y);

        var boundingRectangle = new paper.Rectangle(leftmostX, topmostY, width, height);
        console.log(boundingRectangle);
        console.log(paper.view.center);
        var selectedArea = raster.getSubRaster(boundingRectangle);

        var selectedAreaAsDataUrl = selectedArea.toDataURL();
        var subImage = new Image(width, height);
        subImage.src = selectedAreaAsDataUrl;

        subImage.onload = function(event) {
          var subRaster = new paper.Raster(subImage);

          // Make movable
          subRaster.onMouseEnter = movableEvents.showSelected;
          subRaster.onMouseDrag = movableEvents.dragItem;
          subRaster.onMouseLeave = movableEvents.hideSelected;
        };        
      }
    });
  }
};

方法在正确的时间触发，选择框的大小似乎正确。它确实为我提供了一个可以移动的新栅格，但是栅格的内容不是我选择的内容。它们接近我选择的内容，但不接近我选择的内容。选择不同的区域似乎不会产生不同的结果。生成的子栅格的内容似乎总是在实际选择的右边。

请注意，在构建边界选择矩形的点时，我会进行一些翻译。这是因为坐标系不同。我绘制矩形选择的坐标系在图像的中心有（0,0），x向右增加，y向下方增加。但是对于getSubRaster，我们需要根据文档提供像素坐标，该像素坐标从图像左上方的（0,0）开始，向右和向下逐渐增加。因此，在构建点时，我通过添加imageWidth/2和imageHeight / 2`将点转换为栅格/像素坐标。

那么，为什么此代码选择了错误的区域？提前致谢。

编辑：

不幸的是，我无法共享正在使用的图像，因为它是公司的敏感数据。但是这是一些元数据：

• 图像宽度：4250像素
• 图像高度：5500像素
• 画布宽度：591像素
• 画布高度：766像素

我的画布大小随浏览器窗口的大小而变化，但是这些是我一直在测试的参数。我认为画布的尺寸不是特别重要，因为我所做的一切都是基于图像像素。当我捕获event.point.x并据event.point.y我所知时，它们是图像缩放的坐标，但是来自不同的原点-中心而不是左上方。不幸的是我找不到任何文档。观察此草图中的坐标如何工作。

我也一直在研究草图以说明这个问题的问题。要使用它，请按住Ctrl + Alt并在图像上拖动一个框。这应该触发一些日志记录数据并尝试获取子栅格，但是出现操作不安全错误，我认为这是由于图像请求标头中的安全设置所致。使用基数64的字符串而不是URL不会产生安全错误，但不会执行任何操作。在草图中使用该字符串会产生一个超长URL，我无法在此处粘贴。但是，您可以下载图像（或任何图像）并在此处进行转换，并将其作为img.src。