Передайте информацию элементу canvas, который будет возвращен при нажатии

Question

Есть ли способ передать некоторый идентификатор или информацию элементу canvas, чтобы при нажатии на него вы могли получить его обратно?

Answer 1

Я предлагаю вам взглянуть на Kinetic.js объектно-ориентированную библиотеку холстов.Есть и другие варианты, но из тех, которые я пробовал до сих пор, этот особенно легко интегрировать в проект HTML5 / Canvas (IMO) и имеет отличную поддержку событий (click, mouseOver, mouseOut ... и т. Д.)а также для Drag & Drop.Отлично подходит для холстов, ориентированных на взаимодействие с пользователем.

Надеюсь, это поможет вам.

Answer 2

Боюсь, что вы не можете выбрать элемент canvas, как при выборе элемента HTML DOM по идентификатору или классу. Но вы все равно можете добавить прослушиватели событий мыши для определения координат. И я все еще думаю, что использование HTML-тега кнопки намного лучше.

Вот учебник об этом http://simonsarris.com/blog/140-canvas-moving-selectable-shapes.

Надеюсь, это поможет вам.

Answer 3

Я предпочитаю использовать mousedown listner и затем указывать область кнопки, например, здесь кнопка будет от (30,30) до (60,60)

window.addEventListener("mousedown", doMouseDown, false);
function doMouseDown(event) {
  x = event.pageX - canvas.offsetLeft;
  y = event.pageY - canvas.offsetTop;
  if (x>=30 && x<=60 && y>=30 && y<=60) {
     alert("BUTTON PRESSED")
  }
}

Это, вероятно, самый простой способ без импорта каких-либо библиотек

Answer 4

Я делал пуговицы на холсте много раз. С помощью этого обработчика событий мыши для canvas

function getPosition(event) {
    var x,
        y;
    if (event.x != undefined && event.y != undefined) {
        x = event.x;
        y = event.y;
    } else {
        x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= canvasElement.offsetLeft;
    y -= canvasElement.offsetTop;
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    mouseX = x;
    mouseY = y;
}

getPosition должен использоваться / вызываться холстом так:

<canvas onclick='getPosition(event);'></canvas>

Также работает при наведении курсора и перемещении мыши.

Таким образом, используя mouseX и Y, вы можете проверить, находится ли мышь на кнопке. Кнопка должна быть прямоугольной.

if (mouseX > buttonX && 
    mouseX < buttonX + buttonWidth && 
    mouseY > buttonY && 
    mouseY < buttonY + buttonHeight) {
    //The mouse is on the button!  
}

buttonX и Y относятся к верхнему левому углу кнопки / области. Аналогично ctx.fillRect ()