Question

我在Paper.js项目中工作，我们基本上在做图像编辑。有一个大型Raster。我尝试使用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时，这些是图像缩放的坐标，但来自不同的原点 - 中心而不是左上角。很遗憾，我无法找到相关文档。 观察坐标在此sketch中的工作方式。

我也在研究sketch来说明这个问题的问题。要使用它，请按住Ctrl + Alt并在图像上拖动一个框。这应该触发一些日志记录数据并尝试获取一个子目录，但是我得到一个操作不安全的错误，我认为这是因为图像请求标头中的安全设置。使用base 64字符串而不是URL不会给出安全性错误，但不会做任何事情。在草图中使用该字符串会产生一个超长URL，我无法在此处粘贴。但要实现这一点，您可以下载image（或任何图片）并将其转换为here，并将其作为img.src。

Answer 1

问题是鼠标事件都返回相对于画布0, 0的点。并且getSubRaster期望坐标相对于它从中提取的栅格项的0, 0。

调整需要eventpoint - raster.bounds.topLeft。它与图像宽度或高度没有任何关系。您希望调整事件点，使其相对于栅格的0, 0，0, 0为raster.bounds.topLeft。

当您将事件点调整1/2时，图像大小会导致事件点偏移不正确。对于蒙娜丽莎示例，栅格大小（图像大小）为w: 320, h: 491;除以2，它们是w: 160, h: 245.5。但是图片的bounds.topLeft（当我运行草图时）是x: 252.5, y: 155.5。

这是一张草图，显示它正常工作。我添加了一个红色方块，突出显示所选区域，以便在完成时更容易比较。我也没有包含toDataURL逻辑，因为这会产生你提到的安全问题。

在这里：Sketch

这是我在HTML文件中输入的代码;我注意到我把草图放在一起链接到以前版本的代码并没有完全发挥作用。

<!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>

Paper.js Subraster选择错误的区域

1 个答案: