0

背景に魚が動くウェブページを作っています。魚の種類ごとに、Fish という親クラスと子クラスがあります。Fish クラスには、種クラスの各インスタンスで共通に使用される変数を参照する print メソッドがあります。その場で画像のサイズを変更する必要があるため、種の変数を単純に変更し、種の各オブジェクトを調整したいと思います。私の質問は次のとおりです:親クラスメソッド内のそのクラスの各インスタンスで使用できる各クラスの単一の変数を作成するにはどうすればよいですか?

ここに私が試したものの簡略版があります。もちろん、うまくいきません。どんな助けでも大歓迎です。

<!DOCTYPE html>
<html>
     <body>
          <canvas id="myCanvas"></canvas>
     </body>
     <script>

          function Fish(fi){
               this.myPic = fi;
          }
          Fish.prototype.print = function(cnv, x, y){
               cnv.drawImage(this.myPic,x,y);
          };

          function clownF(){Fish.call(this, clownF.pic);}
          clownF.prototype = Object.create(Fish.prototype);
          clownF.prototype.constructor = clownF;
          clownF.pic = new Image();
          clownF.pic.src = "clownF.png";

          clownF.pic.onload = function(){
               var c=document.getElementById("myCanvas");
               c.width = 500;
               c.height = 300;
               var ctx=c.getContext("2d");

               var f = new clownF();
               f.print(ctx,10,10);

               var temp = document.createElement('canvas');
               temp.width = clownF.pic.width / 2;
               temp.height = clownF.pic.height / 2;
               var tctx = temp.getContext('2d');
               tctx.drawImage(clownF.pic,0,0,temp.width,temp.height)
               clownF.pic = temp;

               f.print(ctx,100,100);
          }
     </script>
</html>
4

1 に答える 1

0

これを試して：

var fish = {
    print: function (cnv, x, y) {
        cnv.drawImage(this.pic, x, y);
    }
}

var clownF = Object.create(fish, {
    pic: { value: new Image() }
});

// define onload here before you set src.

clownF.pic.src = "clownF.png";

さらに clownF を作成したい場合 (onload メソッド中など)、clownF をプロトタイプ (最初の引数) として Object.create を使用できます。

編集：

魚を異なるサイズにしたい場合は、幅と高さのパラメーターを print() に追加できます。

var fish = {
    print: function (cnv, x, y, width, height) {
        cnv.drawImage(this.pic, x, y, width, height);
    }
};

または、各魚の x、y、幅、高さのプロパティを作成し、これでそれらを参照することもできます。:

var fish = {
    print: function (cnv) {
        cnv.drawImage(this.pic, this.x, this.y, this.width, this.height);
    }
};

var fish1 = Object.create(clownF, {
    pic: new Image(),
    x: 0,
    y: 0,
    width: 100,
    height: 50
});

上記のコメントに関して、魚ごとに2つの画像を使用して構成できるようにしたい場合は、次のようにします。

var fish = {
    print: function (cnv, x, y) {
        if(this.forward) {
            cnv.drawImage(this.forwardPic, x, y);
        } else {
            cnv.drawImage(this.backwardPic, x, y);
        }
    }
}

var clownF = Object.create(fish, {
    forwardPic: { value: new Image() },
    backwardPic: { value: new Image() }
});

clownF.forwardPic.src = "forwardClownF.png";
clownF.backwardPic.src = "backwardClownF.png";

var fish1 = Object.create(clownF, {
    forward: true
});
var fish2 = Object.create(clownF, {
    forward: false
});

すべてのカクレクマノミの方向を一度に変えたい場合は、「forward」変数を clownF オブジェクトに移動できます。

var clownF = Object.create(fish, {
    forwardPic: { value: new Image() },
    backwardPic: { value: new Image() },
    forward: true
});

すべての魚を一度に変更したい場合は、Fish オブジェクトに追加できます。

var fish = {
    print: function (cnv, x, y) {
        if(this.forward) {
            cnv.drawImage(this.forwardPic, x, y);
        } else {
            cnv.drawImage(this.backwardPic, x, y);
        }
    },
    forward: true
}

前方画像と後方画像の両方が同じ場合は、1 つの画像を使用して反転させることができます。

var fish = {
    print: function (cnv, x, y) {
        if(this.forward) {
            cnv.drawImage(this.pic, x, y);
        } else {
            cnv.save();
            cnv.scale(-1, 1);
            cnv.drawImage(this.pic, x, y);
            cnv.restore();
        }
    }
}
于 2013-04-27T02:03:40.367 に答える