Question

我以这种方式创建图像：

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）

Answer 1

没有内置方式。我已经在making movable and selectable shapes on a Canvas上写了一些教程，以帮助人们开始这类事情。

简而言之，您需要记住您绘制的内容和位置，然后检查每次鼠标单击以查看您是否点击了某些内容。

Answer 2

HitTesting可以通过检查画布上当前位置的内容来完成，可以在鼠标单击或在画布上移动事件时调用（这是命中测试的基础）。这可以通过知道放置的位置来完成，比如可以保存图像的边界，当用户点击某处或将鼠标移到画布上时，可以检查它是在图像边界内还是在图像边界内。可以使用数组或列表。

Here是如何做到的

Answer 3

你做不到。画布与unit245或Character对象没有任何相似之处。您必须实际手动检查坐标并查看它们是否属于您对角色的界限。

例如（假设您的Canvas是一个名为canvas的var）：

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

Answer 4

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;
        }  
    };
}

我怎样才能在画布上用图像进行测试？

4 个答案: