Javascript Paper.js子光栅选择错误的区域

我在一个Paper.js项目中工作，我们主要做图像编辑。有一个大光栅。我试图使用

getsubgraster

方法复制图像（光栅）的一部分，然后用户可以移动该部分

加载要编辑的光栅后，将调用

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;
        };        
      }
    });
  }
};

var selectArea=function（）{
如果（paper.project！=null）{
var startDragPoint；
paper.project.layers[0]。在（'mousedown'）上，函数（事件）{//从长远来看，TODO应该是第0层？//捕获拖动选择的开始
if（event.event.ctrlKey&&event.event.altKey）{
startDragPoint=新纸张.Point（event.Point.x+imageWidth/2，（event.Point.y+imageHeight/2））；
//topLeftPointOfSelectionRectangleCanvasCoordinates=新纸点（event.Point.x，event.Point.y）；
}
});
paper.project.layers[0]。在（'mouseup'上，函数（事件）{//TODO从长远来看应该是第0层？//捕获拖动选择的结束
if（event.event.ctrlKey&&event.event.altKey）{
var endDragPoint=new paper.Point（event.Point.x+imageWidth/2，event.Point.y+imageHeight/2）；
//不知道用户从哪个角开始拖动，将数据聚合到最左边和最上面的点，以构建矩形
var-leftmostX；
if（startDragPoint.x

这些方法在正确的时间触发，选择框似乎大小合适。它确实为我呈现了一个新的光栅，我可以四处移动，但光栅的内容不是我所选择的。它们接近于我选择的，但不是我选择的。选择不同的区域似乎不会产生不同的结果。生成的子光栅的内容似乎总是位于实际选择的右下方

请注意，在为边界选择矩形构建点时，我会进行一些转换。这是因为坐标系的不同。我绘制矩形选择的坐标系在图像的中心有（0,0），x向右增加，y向下增加。但是对于

getSubRaster

，我们需要根据文档提供像素坐标，该坐标从图像左上角的（0,0）开始，然后向右和向下增加。因此，在构建点时，我通过添加

imageWidth/2

和imageHeight/2`，将点转换为光栅/像素坐标

那么为什么这个代码选择了错误的区域呢？提前谢谢

编辑：

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

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

我的画布大小因浏览器窗口的大小而异，但这些是我一直在测试的参数。我不认为画布尺寸是特别相关的，因为我所做的一切都是在图像像素方面。当我捕获

事件.point.x

和

事件.point.y

时，据我所知，这些都是图像缩放坐标，但来自不同的原点-中心而不是左上角。不幸的是，我找不到关于这个的任何文档观察坐标在此区域的工作方式。

---

我也一直在做一个例子来说明这个问题。要使用它，请按住Ctrl+Alt并在图像上拖动一个框。这将触发一些日志数据并尝试获取子光栅，但我得到了一个操作不安全错误，我认为这是由于映像请求标头中的安全设置造成的。使用base64字符串而不是URL不会给出安全错误，但不会执行任何操作。在草图中使用该字符串会生成一个超长URL，我无法粘贴到这里。但要得到它，您可以下载（或任何图像）并将其转换为

img.src

，问题是鼠标事件的所有返回点都与画布的

0，0

相关。而

getsubgraster

期望坐标相对于从中提取的光栅项的

0，0

调整需要是

eventpoint-graster.bounds.topLeft

。它实际上与图像的宽度或高度无关。您希望调整事件点，使其相对于光栅的

0，0

，并且

0，0

是

graster.bounds.topLeft

将事件点调整为图像大小的1/2时，会导致事件点偏移不正确。对于蒙娜丽莎的例子，光栅大小（图像大小）是

w:320，h:491

；除以二，它们是

w:160
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Rasters</title>
<script src="./vendor/jquery-2.1.3.js"></script>
<script src="./vendor/paper-0.9.25.js"></script>
</head>
<body>
<main>
    <h3>Raster Bug</h3>
    <div>
        <canvas id="canvas"></canvas>
    </div>
    <div id="position">

    </div>
</main>

<script>
 // initialization code
 $(function() {
     // setup paper
     $("#canvas").attr({width: 600, height: 600});
     var canvas = document.getElementById("canvas");
     paper.setup(canvas);

     // show a border to make range of canvas clear
     var border = new paper.Path.Rectangle({
         rectangle: {point: [0, 0], size: paper.view.size},
         strokeColor: 'black',
         strokeWidth: 2
     });

     var tool = new paper.Tool();

     // setup mouse position tracking
     tool.on('mousemove', function(e) {
         $("#position").text("mouse: " + e.point);
     });

     // load the image from a dataURL to avoid CORS issues
     var raster = new paper.Raster(dataURL);
     raster.position = paper.view.center;

     var lt = raster.bounds.topLeft;
     var startDrag, endDrag;

     console.log('rb', raster.bounds);
     console.log('lt', lt);

     // setup mouse handling
     tool.on('mousedown', function(e) {
         startDrag = new paper.Point(e.point);
         console.log('sd', startDrag);
     });
     tool.on('mousedrag', function(e) {
         var show = new paper.Path.Rectangle({
             from: startDrag,
             to: e.point,
             strokeColor: 'red',
             strokeWidth: 1
         });
         show.removeOn({
             drag: true,
             up: true
         });
     });
     tool.on('mouseup', function(e) {
         endDrag = new paper.Point(e.point);
         console.log('ed', endDrag);

         var bounds = new paper.Rectangle({
             from: startDrag.subtract(lt),
             to: endDrag.subtract(lt)
         });
         console.log('bounds', bounds);

         var sub = raster.getSubRaster(bounds);
         sub.bringToFront();

         var subData = sub.toDataURL();
         sub.remove();

         var subRaster = new paper.Raster(subData);
         subRaster.position = paper.view.center;

     });

 });

 var dataURL = ; // insert data or real URL here

 </script>
</body>
</html>