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

Question

我想在paperjs中拖动和调整矩形的大小，我也应该能够旋转矩形，然后通过拖动它的一个角（锚点）来调整它与我的鼠标一致的大小。什么数学或功能有助于在paperjs中做到这一点？

我已经尝试过使用缩放或修改角落，但它不起作用，因为我想。有人能指点我一个解决方案吗？

在此先感谢。

Answer 1

下面是一个简单的解决方案，应该让你开始。它不处理旋转，因为我不知道你如何设想UI的工作，但通过修改边界框来调整矩形的大小，你应该可以旋转它而不会出现问题。

paperjs sketch

我决定把我自己的用户界面，并继续前进，使这个例子更复杂，解决尽可能多的你的问题，我可以没有更多的信息。这里是新的草图：

new sketch

的UI是

1. 单击矩形通过在一个角落里，拖拽
2. 点击以调整其大小，以将其移动
3. 控制点击一个角落来旋转它

点击角落有点棘手，但这是一个留给读者的练习。它们是彩色圆圈，只是为了强调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);
rect.bounds = newBounds;
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()方法 - 我发现链这种计算方式。

• 旋转使用非常好的纸张概念，一个点也定义了一个矢量，一个矢量有一个角度。它只是注意到事件lastPoint和point相对于矩形中心之间的角度差异，并通过该差异旋转矩形。

• moveCircles()和adjustRect()只是簿记功能来更新角圆和水长方形。