ユーザーが同じ領域をクリックしたときにキャンバスからサークルを非表示または消去する

こんにちは、私は現在のアプリに何かを実装しようとしています。私は新しいサークルが古いサークルの上に来るポイントでユーザがクリックすると、重なり合うサークルを隠したいと思う。だから私は以前に描画された円を消したり隠したりしてキャンバスに新しいサークルを作る必要があります。現在のコードはうまく動作していますが、重複する円を隠すことはありません。私はそれに固執しています。私は描画された円の位置を格納するためのjson配列を作成し、ユーザーが同じ円の近くをクリックまたは描画するとそれらを削除する方法を知らない。円の半径は30のままです。ここに私の現在のコードがあります。ユーザーが同じ領域をクリックしたときにキャンバスからサークルを非表示または消去する

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Canvas Sample -- Arc Shapes</title> 
    <meta charset="utf-8"> 
    <script src="circle2.js"></script> 
    <style type="text/css"> 

#testCanvas { 
border: 1px solid #999 
} 


    </style> 

</head> 
<body> 

    <canvas id="testCanvas" width="400" height="400"> </canvas> 

</body> 
</html>

// javascriptのコード

window.onload = init; 

// access the canvas element and its context 
function init() { 

var canvas = document.getElementById("testCanvas"); 
var context = canvas.getContext("2d"); 
// add click handler 
canvas.onclick = function(e) { 
    var pos = getMousePos(canvas, e);  // get position as before 
    context.fillStyle = randomColor(); // get the fill color 
    var path=[]; //array to store the positions. 

    // fill a circle 
    context.beginPath();     
    context.arc(pos.x, pos.y, 30, 0, 2 * Math.PI); 
    context.fill(); 

    } 

} 

    function randomColor() { 
    var color = []; 
    for (var i = 0; i < 3; i++) { 
    color.push(Math.floor(Math.random() * 256)); 
    } 
    return 'rgb(' + color.join(',') + ')'; 
    } 

    function getMousePos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 
     return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
     }; 
    }

出典

2017-09-29 Rahila

はフィドルをしてください – Eric

https://jsfiddle.net/5yto4e3r/ – Rahila

あなたは、単にマウスがクリックされたときに、それぞれの円の座標を格納する必要があります。そのために配列を使うことができます。次に、マウスのクリック、円の交差を処理し、最後にそれらを描画するためのメソッドが必要です。

次のように私はあなたのスクリプトを変更した：

// access the canvas element and its context 
 
var canvas = document.getElementById("testCanvas"); 
 
var context = canvas.getContext("2d"); 
 
var circles = []; // An empty array to hold our circles 
 

 
// add click handler 
 
canvas.onclick = function(e) { 
 
    var pos = getMousePos(canvas, e); 
 
    addCircle(pos.x, pos.y); 
 
} 
 

 
function addCircle(mouse_x, mouse_y) { 
 
    // First, we check if there is any intersection with existing circles 
 
    for (var i = circles.length - 1; i > 0; i--) { 
 
    var circle = circles[i], 
 
     distance = getDistance(circle.x, circle.y, mouse_x, mouse_y); 
 

 
    // If distance is less than radius times two, then we know its a collision 
 
    if (distance < 60) { 
 
     circles.splice(i, 1); // Remove the element from array 
 
    } 
 
    } 
 

 
    // Second, we push the new circle in the array 
 
    circles.push({ 
 
    x: mouse_x, 
 
    y: mouse_y, 
 
    color: randomColor() 
 
    }); 
 

 
    // Third, we draw based on what circles we have in the array 
 
    drawCircles(); 
 
} 
 

 
function drawCircles() { 
 
    // We'll have to clear the canvas as it has deleted circles as well 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    for (var i = circles.length - 1; i > 0; i--) { 
 
    var circle = circles[i]; 
 

 
    context.fillStyle = circle.color; 
 
    context.beginPath(); 
 
    context.arc(circle.x, circle.y, 30, 0, 2 * Math.PI); 
 
    context.fill(); 
 
    } 
 
} 
 

 
// Function to get distance between two points 
 
function getDistance(x1, y1, x2, y2) { 
 
    // Distance formula 
 
    return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); 
 
} 
 

 
function randomColor() { 
 
    var color = []; 
 
    for (var i = 0; i < 3; i++) { 
 
    color.push(Math.floor(Math.random() * 256)); 
 
    } 
 
    return 'rgb(' + color.join(',') + ')'; 
 
} 
 

 
function getMousePos(canvas, evt) { 
 
    var rect = canvas.getBoundingClientRect(); 
 
    return { 
 
    x: evt.clientX - rect.left, 
 
    y: evt.clientY - rect.top 
 
    }; 
 
}

canvas { 
 
    border: 1px solid #999 
 
}

<canvas id="testCanvas" width="400" height="400"> </canvas>

出典

2017-09-29 20:11:00 Aditya

私はwindow.onloadを追加する必要がありますメソッドを使用してclickイベントを実行します。それとも、それがなければそれができますか？ – Rahila

質問と同様に、 'init（）'関数の中にコードを置く必要があります。それで 'window.onload = init'は正常に動作します。 – Aditya

なぜ私はすべてのコードを置く必要がありますか？ init（）メソッドに入れたり、すべてのメソッドをカプセル化する必要がある場合は、マウスクリックのイベントハンドラを置くだけで動作します。 – Rahila

ユーザーが同じ領域をクリックしたときにキャンバスからサークルを非表示または消去する

答えて

関連する問題