【发布时间】：2015-10-29 21:38:58
【问题描述】：
我在一个 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 时，这些是图像缩放坐标，但来自不同的原点——中心而不是左上角。不幸的是，我找不到任何关于此的文档。 观察sketch 中的坐标是如何工作的。
我也一直在研究sketch 来说明这个问题的问题。要使用它，请按住 Ctrl + Alt 并在图像上拖动一个框。这应该会触发一些日志记录数据并尝试获取子栅格，但我得到一个操作不安全错误，我认为这是因为图像请求标头中的安全设置。使用 base 64 字符串而不是 URL 不会产生安全错误，但不会执行任何操作。在草图中使用该字符串会产生一个超长的 URL，我无法在此处粘贴。但是要获得它，您可以下载image（或任何图像）并将其转换为here，并将其作为img.src。
【问题讨论】：
-
您能否提供图像、画布大小以及如何转换坐标？这里没有足够的信息来说明问题所在。我唯一能想到的是图像比画布大，所以它的 bounds.x 和 bounds.y 是负数，但这取决于更多信息。
-
@bmacnaughton 谢谢，查看编辑。我希望这会有所帮助。让我知道我还能做些什么来让事情更清楚。
标签： javascript image raster coordinate-systems paperjs