Mar*_*ark 3 graphics transformation paperjs
我想在 paperjs 中拖动矩形并调整其大小，我还想旋转矩形并调整其大小，同时保持其相对尺寸。
理想情况下，我想通过拖动鼠标的一个角（锚点）来这样做。什么数学或功能有助于在 paperjs 中做到这一点？
我已经通过使用缩放和修改角来尝试这个，但它不能像我想要的那样工作。有人可以指出我的解决方案吗？
提前致谢。
这是一个可以帮助您入门的简单解决方案。它不处理旋转，因为我不确定您如何设想 UI 工作，但是通过修改边界框来调整矩形的大小，您应该能够毫无问题地旋转它。
我决定构建我自己的 UI 并继续使示例更加复杂，以便在没有更多信息的情况下尽可能多地解决你们的问题。这是新草图：
用户界面是
单击角落有点棘手，但这是留给读者的练习。它们是彩色圆圈，只是为了强调每个段点所在的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);
}
}
移动非常简单 - 只需计算事件的当前点和最后一个点之间的差异，然后将矩形的位置改变那么多。
调整大小并不那么明显。策略是根据scaleBase.length鼠标按下点和矩形中心之间的原始距离 ( )调整 x 和 y 边界。请注意，虽然 paper-full.js 允许使用带有点的运算符（“+”、“-”、“*”、“/”），但我多次使用原始subtract()和multiply()方法 - 我发现将计算链接起来很自然道路。
旋转使用了非常好的纸上概念，即一个点也定义了一个向量，而一个向量有一个角度。它只是记录事件lastPoint和point相对于矩形中心之间的角度差异，并根据该差异旋转矩形。
moveCircles()并且adjustRect()只是用于更新角圆和浅绿色矩形的簿记功能。