Как я могу пройти тест с изображением на холсте?

Образ я создаю таким образом:

var orc = new Image();
        orc.src = "./orc.png";

Я использую изображение в таких объектах:

function Character(hp, image){
    this.hp = hp;
    this.image = image;
};

Я вызываю его несколько раз, например:

unit245 = new Character(100, orc);

И рисую вот так, например:

ctx.drawImage(unit245.image, 15, 55, 100, 100);

Как я могу щелкнуть мышью или переместиться над своим unit245 на холсте?

Мне нужно что-то вроде этого http://easeljs.com/examples/dragAndDrop.html, но без каких-либо фреймворки (кроме jquery)


javascript canvas hittest mouseevent
person asci    schedule 29.09.2011    source источник
comment
Координаты мыши на холсте уже были даны ответы: http://stackoverflow.com/questions/1114465/getting-mouse-location-in-canvas   -  person James    schedule 29.09.2011

Ответы (3)


arrow_upward
3
arrow_downward

Нет встроенного способа. Я написал несколько руководств по созданию подвижных и выбираемых фигур на холсте хотя бы помочь людям начать заниматься такими вещами.

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

person Simon Sarris    schedule 29.09.2011

arrow_upward
0
arrow_downward

HitTesting может быть выполнен путем проверки того, что присутствует в текущем местоположении на холсте, что может быть вызвано щелчком мыши или событием перемещения по холсту (что является основой тестирования попадания). Это можно сделать, зная, что было размещено, например, границы изображения могут быть сохранены, и когда пользователь щелкает где-нибудь или перемещает мышь по холсту, вы можете проверить, находится ли он внутри границ изображения или за их пределами. Для этого можно использовать массив или список.

Вот как это можно сделать.

person SpeedBirdNine    schedule 29.09.2011

arrow_upward
0
arrow_downward

Тебе нельзя. Холст не похож на ваш unit245 или Character объект. На самом деле вам придется вручную проверить координаты и посмотреть, попадают ли они в те границы, которые у вас есть для персонажа.

Например (при условии, что ваш Canvas - это переменная с именем canvas):

canvas.onclick = function(e) {
  if (e.x >= unit245.x && e.x <= unit245.x + unit245.width && e.y >= unit245.y && e.y <= unit245.y + unit245.height) {
    alert("You clicked unit245!");
  }
}

В твоем случае:

unit245.x = 15
unit245.y = 55
unit245.width = 100
unit245.height = 100
person Jon Newmuis    schedule 29.09.2011