4

私はそのように呼び出すことができるキャンバスオブジェクトを持っています

var canvas = new Canvas();

キャンバス オブジェクトのプロトタイプにも多くの機能があります。setWidthこのオブジェクトは基本的に、getContextなどのいくつかの関数を使用して canvas 要素を作成します。

Layer基本的に機能が追加されたキャンバスであるオブジェクトもあります。Layerのプロトタイプをに設定するのは良い考えだと思いましたCanvas。これはうまく機能し、すべてが良好でした。

各レイヤーには独自のキャンバスが必要なため、複数のレイヤーを使用するときに問題が発生します。ただし、キャンバスは Layers プロトタイプであるため、プロトタイプは 1 つのキャンバス要素のみを指します。そのため、複数のレイヤーの使用を開始すると、レイヤー プロトタイプのキャンバス要素が同じキャンバス オブジェクトを指しているため、キャンバスは常に上書きされます。

これまでのところ、私は理にかなっていると思います！

キャンバスをレイヤーにプロパティとして追加できることはわかっていますが、そうする代わりに、

layer.setWidth(900);

私はしなければならないだろう

layer.canvas.setWidth(900);

私の質問は、どうすればCanvasオブジェクト関数を継承できますが、新しいレイヤーをインスタンス化すると、それを使用して新しいキャンバス要素を作成できるのでしょうか?

要求されたコード (簡略化)

var carl = {};

carl.Canvas = (function() {

     "use strict";

     function Canvas(config) {

          this._init(config);
     };

     Canvas.prototype._init = function(config) {

         this.element = document.createElement("canvas");
         this.context = this.element.getContext("2d");
     };

     Canvas.prototype.setWidth = function(width) {

         this.element.width = width;
     };

     Canvas.prototype.getWidth = function() {

         return this.element.width;
     };

     Canvas.prototype.setHeight = function(height) {

         this.element.width = height;
     };

     Canvas.prototype.getHeight = function() {

         return this.element.height;
     };

     Canvas.prototype.getContext = function() {

         return this.context;
     };

     return Canvas;
}}();

 carl.Layer = (function() {

     "use strict";

      function Layer() {

      };

      Layer.prototype = new carl.Canvas();

      return Layer;

 })();
4

1 に答える 1

1

あなたに必要なのは：

carl.Layer = function() {
     carl.Canvas.call(this);
};
carl.Layer.prototype = Object.create(carl.Canvas.prototype);

すぐに呼び出される関数やクロージャーなどで大量のオーバーヘッドが発生するのをやめます。それらはまったく役に立たない。コードをきれいに保ちます。したくないObject.create場合は、ポリフィルを使用できます。

function inherits(child, parent) {
    function temp() {};
    temp.prototype = parent.prototype;
    child.prototype = new temp();
    child.prototype.constructor = child;
};
carl.Layer = function() {
     carl.Canvas.call(this);
};
inherits(carl.Layer, carl.Canvas);
于 2013-05-14T11:26:05.270 に答える