如何在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()只是簿記功能來更新角圓和水長方形。