在父方法中使用子類的變量，以便可以動態更改變量（javascript）

Question

我正在制作一個網頁，其中有魚在后台移動。 對於每種魚類，我都有一個稱為魚類的父母班和一個兒童班。 Fish類有一個打印方法，我想引用一個物種類的每個實例常用的變量。 我需要即時調整圖像的大小，因此我想簡單地修改物種的變量並調整物種的每個對象。 我的問題是：如何為每個類創建單個變量，該變量可以由父類方法中的該類的每個實例使用？

這是我嘗試過的簡化版本。 當然不行了。 任何幫助將非常感激。

<!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>

Answer 1

嘗試這個：

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方法中），則可以將Object.create與clownF作為原型（第一個參數）一起使用。

編輯：

如果您希望魚的大小不同，則可以在print（）中添加width和height參數：

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

關於上述評論，如果您希望能夠為每條魚使用兩個圖像並對其進行配置，則可以執行以下操作：

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
}

如果向前和向后的圖像都相同，則可以只使用一張圖像並將其翻轉：

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

在父方法中使用子類的變量，以便可以動態更改變量（javascript）

問題描述

1 個解決方案

解決方案1
0 已采納 2013-04-27 02:03:40

在父方法中使用子類的變量，以便可以動態更改變量（javascript）

問題描述

1 個解決方案

解決方案1 0 已采納 2013-04-27 02:03:40

解決方案1
0 已采納 2013-04-27 02:03:40