2

私はこの方法で画像を作成します：

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

4 に答える 4

3

組み込みの方法はありません。ただし、この種のことを始めるのに役立つように、Canvas 上で移動可能で選択可能な形状を作成するためのチュートリアルをいくつか書きました。

要するに、何をどこに描いたかを覚えておき、マウスをクリックするたびに、何かをクリックしたかどうかを確認する必要があります。

于 2011-09-29T17:32:28.580 に答える
0 
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;
        }  
    };
}
于 2011-11-01T08:11:05.667 に答える
0

HitTesting は、キャンバス上の現在の場所に何が存在するかを確認することで実行できます。これは、マウス クリックまたはキャンバス上の移動イベント (ヒット テストの基礎) で呼び出すことができます。これは、画像の境界を保存できるように、どこに何が配置されているかを知ることで実行できます。ユーザーがどこかをクリックしたり、キャンバス上でマウスを動かしたりすると、画像の境界の内側にあるか外側にあるかを確認できます。これには配列またはリストを使用できます。

これを行う方法は次のとおりです

于 2011-09-29T16:15:45.470 に答える
0

You cannot. The canvas has no semblance of what your unit245 or Character object is. You will have to actually manually check the coordinates and see if they fall within the bounds that you have for the character.

For example (assuming your Canvas is a var named 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!");
  }
}

In your case:

unit245.x = 15
unit245.y = 55
unit245.width = 100
unit245.height = 100
于 2011-09-29T16:16:48.053 に答える