繪制橢圓與圓形：利用Paper.js進行交互式圖形設計

在Web應用中實現交互式圖形繪制功能，對于提高用戶體驗至關重要，尤其是在設計和藝術相關的應用中。Paper.js是一款強大的JavaScript庫，專門用于處理矢量圖形，它提供了一套簡潔的API來操作HTML5的Canvas元素。本文通過一個實際例子，探討如何使用Paper.js來實現橢圓和圓形的繪制。

在我們的示例中，用戶可以使用鼠標在畫布上繪制橢圓或圓形。首先，我們設置了Paper.js的工作環境并初始化了tool對象，這個對象將用來處理鼠標的相關事件。

演示效果

初始化工具和事件處理

在onMouseDown事件處理函數中，我們記錄鼠標按下時的位置作為橢圓的起始點，并初始化一個很小的橢圓。這個初始橢圓僅僅是為了在開始拖拽時有一個圖形的基礎，其大小幾乎為零。

tool.onMouseDown = function (event) {startPoint = event.point; // 記錄起始點toolShape = new paper.Path.Ellipse({point: [event.point.x - 1, event.point.y - 1],size: [1, 1],strokeColor,strokeScaling: false});
};

處理鼠標拖拽事件

在onMouseDrag中，我們根據鼠標當前的位置與起始點計算出橢圓的最小外接矩形。通過計算鼠標按下點和當前點的最小和最大坐標值，我們能確定橢圓的邊界。

const currentPoint = event.point;
const topLeft = new paper.Point(Math.min(startPoint.x, currentPoint.x), Math.min(startPoint.y, currentPoint.y));
const bottomRight = new paper.Point(Math.max(startPoint.x, currentPoint.x), Math.max(startPoint.y, currentPoint.y));
const rect = new paper.Rectangle(topLeft, bottomRight);

如果用戶在拖拽時按下了Shift鍵，我們通過調整矩形的寬度和高度為相同的值，確保橢圓變為一個完美的圓形。

更新圖形

每次拖拽時，我們首先移除之前的橢圓，然后基于新計算出的矩形繪制一個新的橢圓。

toolShape.remove();
toolShape = new paper.Path.Ellipse({from: rect.topLeft,to: rect.bottomRight,strokeColor,strokeScaling: false
});

部分代碼

paper.setup('myCanvas');
const tool = new paper.Tool();
let toolShape = null;
let startPoint = null; // 記錄鼠標按下的起始點
let strokeColor = "red"tool.onMouseDown = function (event) {startPoint = event.point; // 記錄起始點// 初始化時創建一個很小的圓作為基礎形狀toolShape = new paper.Path.Ellipse({name: "fizzEllipse",point: [event.point.x - 1, event.point.y - 1], // 使其非常小size: [1, 1], // 很小的尺寸strokeColor,strokeScaling: false,data: {isLaserItem: true,},});
};tool.onMouseDrag = function (event) {// 根據鼠標按下的位置和當前位置計算橢圓的boundsconst currentPoint = event.point;const { x: startPx, y: startPy } = startPointconst topLeft = new paper.Point(Math.min(startPx, currentPoint.x),Math.min(startPy, currentPoint.y));const bottomRight = new paper.Point(Math.max(startPx, currentPoint.x),Math.max(startPy, currentPoint.y));const rect = new paper.Rectangle(topLeft, bottomRight);// 如果按下Shift鍵，保持寬高比為1:1，即繪制圓形if (event.modifiers.shift) {const maxSize = Math.max(rect.width, rect.height);rect.width = maxSize;rect.height = maxSize;// 重新定位以保持中心不變const center = rect.center;rect.center = center;}// 更新toolShape的形狀為新的矩形區域toolShape.remove(); // 移除舊的形狀toolShape = new paper.Path.Ellipse({from: rect.topLeft,to: rect.bottomRight,strokeColor,strokeScaling: false,data: {isLaserItem: true,},});
};

總結

通過這個簡單的示例，我們展示了如何使用Paper.js來處理復雜的圖形繪制需求。這種方式不僅允許用戶靈活地繪制橢圓，還能通過簡單的修改（如按下Shift鍵）快速地切換到圓形繪制模式。這種靈活性和易用性使得Paper.js成為處理在線圖形設計的理想選擇，無論是用于藝術創作、游戲設計還是任何需要圖形繪制的應用。通過優化這些基本操作，開發者可以創建出更加豐富和互動的Web應用。