Добавить событие Click в массиве элемента на холсте

Question

У меня есть массив элементов, который имеет некоторые координаты.На основе этих координат я рисую элемент на одном холсте.Теперь я хочу, чтобы когда пользователь нажимал на любой элемент, он должен вызывать функцию.

Может у кого-нибудь есть представление о том, как мы можем это сделать

       //js part
      drawLayout() {
        const canvas = this.refs.canvas;
        const ctx = canvas.getContext("2d");

        data.forEach(item => {
            ctx.beginPath();
            ctx.lineWidth = "1";
            ctx.strokeStyle = "red";
            let X = (maxValueOfX - item.row) * width;
            let Y = item.column * height;

            ctx.fillText(item.name, X + 5, Y + 10);

            ctx.rect(X, Y ,width, height)
            ctx.stroke();
       });
       componentDidMount() { 
          this.drawLayout()
       }

    //html part
          <div className="layoutContainer">
                        <canvas
                            ref="canvas"
                            width={width}
                            height={height}
                            style={{ backgroundColor: "#e1d4d4" }}
                        />
             </div>

Спасибо

Answer 1

Я вижу, что уже есть ответ.Мой использует простой Javascript, но я надеюсь, что вы найдете его полезным.Во-первых, вам нужна функция для определения положения мыши на холсте.

Сразу после рисования прямоугольника я добавляю прослушиватель событий, чтобы определить, был ли нажат прямоугольник.

 function drawLayout() {
        //const canvas = this.refs.canvas;
        const ctx = canvas.getContext("2d");
        canvas.width = 400;
        canvas.height = 400;
       
            ctx.beginPath();
            ctx.lineWidth = "1";
            ctx.strokeStyle = "red";
            let X = 130;
            let Y = 45;
            let text = "test qwerty"

            ctx.fillText(text, X + 5, Y + 12);

            ctx.rect(X, Y , ctx.measureText(text).width + 10	, 16);
            // immediately after drawing the rect add an event listener
            canvas.addEventListener("click",(evt)=>{
              let m = oMousePos(canvas, evt);// the mouse
              // check if the mouse is in path
              if (ctx.isPointInPath(m.x, m.y)) {
              // do something
              console.log(text);
              }
            })
            // stroke the rect
            ctx.stroke();
 }
       
  this.drawLayout();

// a function to get the position of the mouse
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
	return { //objeto
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
}
}
      

 <div className="seatLayoutContainer">
                        <canvas
                            id="canvas"
                            width="400"
                            height="400"
                            style="background-color: #e1d4d4"
                        />
             </div>

Answer 2

Это, похоже, тесно связано с этим ответом о добавлении onClick к элементу canvas, за исключением того, что вам нужно будет рассчитать положение для нескольких элементов на основе координат, по которым щелкнули.

I слегка изменил jsfiddle из , который отвечает, чтобы показать один способ узнать, по какому элементу щелкнули.Это должно дать вам некоторые идеи, но, безусловно, может быть исправлено.

    var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;
    console.log(x, y);
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) {
            switch (element.left) {
                case 20:
                    alert('clicked the first element');
                    break;
                case 40:
                    alert('clicked the second element');
                    break;
                case 60:
                    alert('clicked the third element');
                    break;
                default:
                    alert('No idea what you clicked')
            }
        }
    });

}, false);

// Add element.
elements.push({
    colour: '#05EFFF',
    width: 20,
    height: 20,
    top: 20,
    left: 20
});

// Add element.
elements.push({
    colour: 'red',
    width: 20,
    height: 20,
    top: 20,
    left: 40
});

// Add element.
elements.push({
    colour: 'blue',
    width: 20,
    height: 20,
    top: 20,
    left: 60
});
// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});

Единственное отличие здесь состоит в том, что мы используем координаты, по которым щелкнули, чтобы решить, какой отдельный элемент холста был нажат.