可拖动的弧HTML5

Question

我在画布上有一个雷达图形，上面有弧形作为气泡。气泡是静止的。我需要让气泡可以拖动。 html，css和javascripts位于以下链接中：

Answer 1

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

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

在鼠标释放时，您可以将不可见的气泡重置为可见光。

Answer 2

您可以使用此代码模式让用户拖动气泡（圆圈）。

以下是演示：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＆amp; 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);