[英]Canvas mouse event and focus
我有2个圆圈和1行。 圆圈具有移动选项(u可以按它们并移动)。 Mousemove事件具有可变的distance
以计算鼠标和圆之间的距离。
问题是,当您将一个圆圈移到另一个足够近的圆圈时,它们将合并。 如何避免呢? 是否可以选择聚焦或类似的东西? 关于如何解决该问题的任何想法(可能吗?)
我的代码 :
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d'),
radius = 12,
p = null,
start = false;
point = {
p1: { x:100, y:250 },
p2: { x:400, y:100 }
}
function init() {
return setInterval(draw, 10);
}
canvas.addEventListener('mousedown', function(e) {
start = true;
});
canvas.addEventListener('mouseup', function(e) {
start = false;
});
canvas.addEventListener('mousemove', function(e) {
for (p in point) {
if(start) {
var
mouseX = e.clientX -10,
mouseY = e.clientY -10,
distance = Math.sqrt(Math.pow(mouseX - point[p].x, 2) + Math.pow(mouseY - point[p].y, 2));
if (distance -10<= radius) {
point[p].x = e.clientX -10 ;
point[p].y = e.clientY -10 ;
}
}
}
});
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(point.p1.x,point.p1.y);
context.lineTo(point.p2.x,point.p2.y);
context.closePath();
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
for (p in point) {
context.beginPath();
context.arc(point[p].x,point[p].y,radius,0,2*Math.PI);
context.fillStyle = 'red';
context.fill();
context.stroke();
}
context.closePath();
}
init();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.