如何对使用 onMouseDrag
绘制的圆应用拖放操作。 Look at the fiddle
最佳答案
Here is a fiddle带有拖放的粗略演示。通常,鼠标工具有两种模式;绘图和拖动。 fiddle 中的状态管理很薄弱,编写合适的鼠标工具需要对 paper.js 有更深入的了解。
<script type="text/paperscript" canvas="canvas">
var path = null;
var circles = [];
// Mouse tool state
var isDrawing = false;
var draggingIndex = -1;
function onMouseDrag(event) {
// Maybe hit test to see if we are on top of a circle
if (!isDrawing && circles.length > 0) {
for (var ix = 0; ix < circles.length; ix++) {
if (circles[ix].contains(event.point)) {
draggingIndex = ix;
break;
}
}
}
// Should we be dragging something?
if (draggingIndex > -1) {
circles[draggingIndex].position = event.point;
} else {
// We are drawing
path = new Path.Circle({
center: event.downPoint,
radius: (event.downPoint - event.point).length,
fillColor: null,
strokeColor: 'black',
strokeWidth: 10
});
path.removeOnDrag();
isDrawing = true;
}
};
function onMouseUp(event) {
if (isDrawing) {
circles.push(path);
}
// Reset the tool state
isDrawing = false;
draggingIndex = -1;
};
</script>
<canvas id="canvas"></canvas>
关于javascript - PaperJS 拖放圆形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16876253/