1

2 つの円と 1 つの線があります。円には移動オプションがあります (円を押して移動できます)。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();

</p>

4

1 に答える 1

2

mousedownイベントで押されたポイントを保存してみてください。

そのように：http：//jsfiddle.net/cs5Sg/9/

さらに、マウスが移動するたびに各ポイントまでの距離が計算されないため、高速になります。

于 2012-12-10T22:02:11.137 に答える