graphics - 如何在paperjs中拖动/调整大小和旋转矩形？

Question

我想在paperjs中拖动一个矩形并调整其大小，我还想在保持其相对尺寸的同时旋转矩形并调整其大小。

理想情况下，我希望通过拖动鼠标的一个角( anchor )来执行此操作。什么数学或特性有助于在 paperjs 中执行此操作？

我已经尝试过使用缩放和修改角，但它没有按我想要的那样工作。有人能给我指出一个解决方案吗？

提前致谢。

Answer 1

这是一个简单的解决方案，可以帮助您入门。它不处理旋转，因为我不确定您设想 UI 是如何工作的，但是通过修改边界框来调整矩形的大小，您应该能够毫无问题地旋转它。

paperjs sketch

我决定制作自己的 UI，然后继续让示例变得更复杂，以便在没有更多信息的情况下尽可能多地解决你们的问题。这是新草图:

new sketch

用户界面是

1. 在矩形中单击以通过拖动来移动它
2. 单击一个角并拖动以调整其大小
3. 按住 Control 键点击一个角来旋转它

点击角落有点棘手，但这是留给读者的练习。它们是彩色圆圈，只是为了强调 Path 的每个分段点的位置。位于。

代码要点:

• 使用矩形的边界进行缩放。 Path.Rectangle就纸张而言，它不是一个矩形。它是连接四个分段点的四条曲线(恰好是直的)。当您需要使用矩形来获得其中心、左上角等时，您需要 Rectangle .使用矩形的边界 ( Path.Rectangle.bounds ) 缩放可见矩形。代码用一个额外的水色矩形说明了边界，因此它是可见的(旋转时最容易看到)。

• onMouseDown()设置 onMouseDrag() 的状态并设置每个状态所需的数据，例如，保存缩放基础以调整大小。

• onMouseDrag()实现移动、调整大小和旋转。


tool.onMouseDrag = function(e) {
if (rect.data.state === 'moving') {
rect.position = rect.position + e.point - e.lastPoint;
adjustRect(rect);
} else if (rect.data.state === 'resizing') {
// scale by distance from down point
var bounds = rect.data.bounds;
var scale = e.point.subtract(bounds.center).length /
rect.data.scaleBase.length;
var tlVec = bounds.topLeft.subtract(bounds.center).multiply(scale);
var brVec = bounds.bottomRight.subtract(bounds.center).multiply(scale);
var newBounds = new Rectangle(tlVec + bounds.center, brVec + bounds.center);<br/>
rect.bounds = newBounds;<br/>
adjustRect(rect);
} else if (rect.data.state === 'rotating') {
// rotate by difference of angles, relative to center, of
// the last two points.
var center = rect.bounds.center;
var baseVec = center - e.lastPoint;
var nowVec = center - e.point;
var angle = nowVec.angle - baseVec.angle;
rect.rotate(angle);
adjustRect(rect);
}
}


• 移动非常简单 - 只需计算事件中当前点和最后点之间的差异，然后将矩形的位置改变这么多。

• 调整大小不那么明显。策略是根据 mousedown 点和矩形中心之间的原始距离 (scaleBase.length) 调整 x 和 y 边界。请注意，虽然 paper-full.js 允许使用带点的运算符(“+”、“-”、“*”、“/”)，但我使用了原始的 subtract()和 multiply()方法几次 - 我发现以这种方式链接计算很自然。

• Rotating 使用了非常好的论文概念，即一个点也定义了一个向量，并且一个向量有一个角度。它只是注意到事件 lastPoint 之间的角度差异。和 point相对于矩形的中心并按该差值旋转矩形。

• moveCircles()和 adjustRect()只是用于更新角圆和水色矩形的簿记功能。