PaperJS drag and drop circle
PaperJS drag and drop circle
如何对使用onMouseDrag
绘制的圆圈应用拖放功能?看小提琴
下面是一个粗略的拖放演示。一般来说,鼠标工具有两种模式;绘图和拖动。小提琴中的状态管理很弱,编写一个合适的鼠标工具需要对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>
相关文章:
- 将 Drag&Drop 与 jsTree 和 DataTables 一起使用
- Javascript Drop Down Box
- 我如何获得“”的原始位置;ui“可拖动”;在“;drop”;事件
- Javascript:如何在jQuery中编写这个drop事件
- 处理“;drop”;与Raphael在javascript中的事件
- HTML/JavaScript拖动&Drop-是否可以使重影图像*NOT*看起来'冲洗掉'
- 拖动'n带网格的Drop
- HTML5拖放;Drop-使用jQuery处理事件
- jQuery circle菜单导航在切换关闭后创建小圆圈
- SVG circle starting point
- SVG: a circle of Circles
- jquery on drop 获取完整路径名
- 无法在HTML5 Drag&drop,请不要jquery
- html5拖动&drop-TypeError:Node.appendChild的参数1不是对象
- 当draggable使嵌套可排序时调用Drop
- HTML5拖拽&drop正在抛出undefined不是函数错误
- Javascript Circle滑块随时间变化
- Circle-Canvas获取lineWidth的像素颜色
- 使用输入类型=“0”改变Circle谷歌地图的半径;“范围”;
- PaperJS drag and drop circle