【发布时间】：2018-01-16 11:32:52
【问题描述】：
我在画布上有一个雷达图形，上面有圆弧作为气泡。气泡是静态的。我需要使气泡可拖动。 html、css 和 javascripts 在以下链接中：
【问题讨论】：
-
这里是 jsfiddle 链接：jsfiddle.net/2yRnV/1
-
不知道是谁放了负分。而且我不知道他/她有什么问题。
【发布时间】：2018-01-16 11:32:52
【问题描述】：
您可以使用此 Code Pattern 让用户拖动您的气泡（圆圈）。
这是一个演示：http://jsfiddle.net/m1erickson/WqR9F/
首先，将所有圆定义保存在对象数组中：
var circles=[];
circles.push({cx:10,cy:10,radius:20});
然后响应鼠标事件：
鼠标按下：
- 保存当前鼠标位置 (lastX/lastY)。
- 确定用户鼠标下方的圆圈（见下文）。
- 设置一个标志 (isDown) 指示用户正在按住鼠标（开始拖动）
鼠标移动：
- 确定当前鼠标位置 (mouseX/mouseY)。
- 为每个拖动的圆圈设置新位置：cx=mouseX-lastX 和 cy=mouseY-lastY。
- 设置 lastX=mouseX & lastY=mouseY。
- 重绘画布。
mouseup 和 mouseout：
- 清除 isDown 标志（拖动结束）。
如何判断鼠标是否在圆圈内：
var dx=mouseX-circles[2].cx;
var dy=mouseY-circles[2].cy;
var rr=circles[2].radius*circles[2].radius;
var isInside= (dx*dx+dy*dy <= rr);
【讨论】：
我用过的一个类似的技巧是让用户用鼠标拖动不可见的气泡。
可见的不是真正的交互，而是跟随不可见的位置，除非它们在弧之外。
释放鼠标后，您可以将不可见气泡重置为位于可见气泡上方。
【讨论】：