Как выделить один круг среди других на холсте, используя JavaScript - PullRequest
Новая
       33

Как выделить один круг среди других на холсте, используя JavaScript

0 голосов
/ 15 октября 2019

Я хочу щелкнуть каждый круг отдельно от массива кругов. Потому что я хочу делать разные задачи для каждого круга после нажатия. Хотя несколько кругов хранятся внутри массива круги [], когда я нажимаю на круги, предупреждение не отображается без одного круга, и оно показывает предупреждение 5 раз. Я предполагаю, что это последний круг, который был нарисован случайным образом, и только этот круг имеет эффект щелчка! Может кто-нибудь помочь мне разобраться? 

const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
var offsetX = canvas.offsetLeft;
var offsetY = canvas.offsetTop;
var circles = [];

function main(){
    if (typeof document !== 'undefined') {
            var r = 20; 
            for (var j=0; j<5; j++){
                var cx = random()*(canvas.width);
                var cy = random()*(canvas.height);
                var r = 25;
                var color = "rgb(" + Math.floor(random() * 256) + "," + Math.floor(random() * 256)
                            + "," + Math.floor(random() * 256) + ")";
                ctx.beginPath();
                ctx.arc(cx, cy, r, 0, 2 * Math.PI);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.closePath();
                var obj = {}; 
                obj['x'] = cx;
                obj['y'] = cy;
                circles.push(obj);
                
            }
            //console.log(circles); 5 circles are stored in circles[]
            circles.forEach(function(entry){
            canvas.addEventListener('click', function(e) {
                    var clickX = e.clientX - offsetX;
                    var clickY = e.clientY - offsetY;
                    var dx = cx - clickX;
                    var dy = cy - clickY;
                    if (dx * dx + dy * dy <= r * r) {
                        alert("you are inside the circle");
                    }
                });
            });
                                
        }
}



    var seed = 1;
    function random() {
        var x = Math.sin(seed++) * 10000;
        return x - Math.floor(x);
    }

main();
html, body, div {
    width:  100%;
    height: 100%;
    margin: 0;
  }
<body>
    <div id="design">
        <canvas id="flower"></canvas>
    </div>
</body>

1 Ответ

0 голосов
/ 15 октября 2019

Для достижения ожидаемого результата используйте нижеприведенную опцию использования метода isPointInPath для определения щелчка формы холста

  1. Используйте конструктор Path2D для рисования круга

    const circle = new Path2D(); circle.arc(cx, cy, r, 0, 2 * Math.PI); ctx.fillStyle = color; ctx.fill(circle);

  2. Используйте нижеприведенное событие прослушивания событий

canvas.addEventListener("click", function(event) { if (ctx.isPointInPath(circle, event.clientX, event.clientY)) { alert("you are inside the circle"); } });

Для получения более подробной информации о *, пожалуйста, обратитесь по этой ссылке. 1021 *

Пример рабочего кода для справки 

const canvas = document.getElementById("flower");
const ctx = canvas.getContext("2d");
var offsetX = canvas.offsetLeft;
var offsetY = canvas.offsetTop;
var circles = [];

function main() {
  if (typeof document !== "undefined") {
    var r = 20;
    for (var j = 0; j < 5; j++) {
      var cx = random() * canvas.width;
      var cy = random() * canvas.height;
      var r = 25;
      var color =
        "rgb(" +
        Math.floor(random() * 256) +
        "," +
        Math.floor(random() * 256) +
        "," +
        Math.floor(random() * 256) +
        ")";
      const circle = new Path2D();
      circle.arc(cx, cy, r, 0, 2 * Math.PI);
      ctx.fillStyle = color;
      ctx.fill(circle);
      canvas.addEventListener("click", function(event) {
        if (ctx.isPointInPath(circle, event.clientX, event.clientY)) {
          alert("you are inside the circle");
        }
      });
    }
  }
}

var seed = 1;
function random() {
  var x = Math.sin(seed++) * 10000;
  return x - Math.floor(x);
}

main();
html, body, div {
    width:  100%;
    height: 100%;
    margin: 0;
  }
<body>
    <div id="design">
        <canvas id="flower"></canvas>
    </div>
</body>

Codepen - https://codepen.io/nagasai/pen/NWWNmdj

...