个人中心
gpt4 book ai didi

javascript - Paper.js Subraster 选择错误的区域

转载 作者：行者123 更新时间：2023-11-29 14:45:32 25 4
gpt4 key购买 nike

我在一个 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 像素
  • Canvas 宽度:591 像素
  • Canvas 高度:766 像素

我的 Canvas 大小因浏览器窗口的大小而异，但这些是我一直在测试的参数。我不认为 Canvas 尺寸特别相关，因为我所做的一切都是根据图像像素进行的。据我所知，当我捕获 event.point.x 和 event.point.y 时，这些是图像缩放坐标，但来自不同的原点 - 中心而不是比左上角。不幸的是，我找不到任何关于此的文档。 观察坐标在这个 sketch 中是如何工作的.

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

最佳答案

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

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

当您将事件点调整为图像大小的 1/2 时，会导致事件点偏移不正确。对于蒙娜丽莎的例子，光栅尺寸(图像尺寸)是w: 320, h: 491；除以二是 w: 160, h: 245.5。但是图像的 bounds.topLeft(当我运行草图时)是 x: 252.5, y: 155.5。

这是一个显示其工作原理的草图。我添加了一个小的红色方 block 来突出显示所选区域，以便在完成时更容易进行比较。我也没有包括 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>

关于javascript - Paper.js Subraster 选择错误的区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33425083/

25 4 0
文章推荐： Android) 微信开发者的应用签名。我赋予它什么值(value)？
文章推荐： javascript - 谷歌地图上的 d3 图与节点之间的链接
文章推荐： javascript - 使用 RequireJS 加载 plotly 和 D3
文章推荐： php - utf-8的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com