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

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

1 голос
/ 29 сентября 2011

Я создаю изображение таким образом: 

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)

Ответы [ 4 ]

3 голосов
/ 29 сентября 2011

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

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

0 голосов
/ 01 ноября 2011 
function Item(img, x, y){
    this.image = img;
    this.x = x;
    this.y = y;
    this.canv = document.createElement("canvas");
    this.canv.width = this.image.width;
    this.canv.height = this.image.height;
    this.ctx = this.canv.getContext('2d');
    this.ctx.drawImage(this.image, 0, 0, CELL_SIZE, CELL_SIZE);     
    this.hit = function  (mx, my) {
        var clr;
        clr = this.ctx.getImageData(mx - this.x, my - this.y, 1, 1).data;
        if (clr[3] > 250) {
            //On object
            this.image = gold_glow;
        } else {
            //Leave object
            this.image = gold;
        }  
    };
}
0 голосов
/ 29 сентября 2011

Вы не можете.Холст не имеет никакого сходства с тем, что является вашим 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
0 голосов
/ 29 сентября 2011

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

Здесь , как это можно сделать

...