jquery - 可拖动的弧形 HTML5

Question

我在画布上有一个雷达图形，其中有弧形气泡。气泡是静态的。我需要使气泡可拖动。html、css 和 javascripts 在以下链接中：

Answer 1

我用过的一个类似的技巧是让用户用鼠标拖动不可见的气泡。

可见的不是真正的交互，而是跟随不可见的位置，除非它们在弧之外。

在鼠标释放时，您然后将不可见的气泡重置为定位在可见的上方。

Answer 2

您可以使用此 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);