Paper.js子主机选择错误区域

我在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。