KineticJS 的继承模型是如何工作的？答案

【问题标题】：How does the inheritance model of KineticJS work?KineticJS 的继承模型是如何工作的？
【发布时间】：2012-12-16 07:48:30
【问题描述】：

我对 JavaScript 有点陌生，我知道可以使用不同的继承模型。我有一个使用 KineticJS 的项目，我在他们的 changelog 中注意到他们随着项目 v3.10.3 的发布更改了继承模型，以便我们可以'more easily extend or add custom methods to Kinetic classes'

我已经对此进行了一些搜索，但似乎在任何地方都找不到明确的示例。我想知道是否有人可以告诉我将属性和方法添加到 Kinetic 类的正确方法是什么，以及如何扩展它们以创建自己的自定义类？ KineticJS中使用的继承模型是javascript中常用的吗？

【问题讨论】：

标签： javascript html inheritance kineticjs

【解决方案1】：

我建议遵循 KineticJS 源代码中的方法。 This blog post 解释了如何，但有点过时，所以我将包含一个最新示例，该示例还展示了如何向自定义形状添加属性。

下面的代码给出了一个创建一个新的Shape.Arc 对象的例子。此示例显示如何添加新函数和属性。

var Shape = {};
(function () {
    Shape.Arc = function (config) {
        this.initArc(config);
    };
    Shape.Arc.prototype = {
        initArc: function (config) {
            Kinetic.Shape.call(this, config);
            this._setDrawFuncs();
            this.shapeType = 'Arc;'
            drc.ui.utils.setupShape(this);
        },
        drawFunc: function (context) {
            context.beginPath();
            context.arc(0,0, this.getRadius(), this.getStartAngle(), 
                this.getEndAngle(), true);
            context.fillStrokeShape(this);
        }
    };
    Kinetic.Util.extend(Shape.Arc, Kinetic.Shape);

    //Add properties to shape.
    //The code below adds the getRadius(), getStartAngle() functions above.
    Kinetic.Factory.addGetterSetter(Shape.Arc, 'radius', 0);
    Kinetic.Factory.addGetterSetter(Shape.Arc, 'startAngle', 0);
    Kinetic.Factory.addGetterSetter(Shape.Arc, 'endAngle', 180);
})();

重要的是它被包装在一个匿名函数中，这样可以创建多个实例。

创建弧线：

var arc = new Shape.Arc({
                radius: radius,
                x: centreX,
                y: centreY,
                startAngle: 0,
                endAngle: Math.PI * 2
            });

【讨论】：

【解决方案2】：

您可以使用不同的方式。

1 Kineticjs 方式。来自 kineticjs 来源的示例：

Kinetic.Circle = function(config) {
    this._initCircle(config);
};

Kinetic.Circle.prototype = {
    _initCircle: function(config) {
        this.createAttrs();
        // call super constructor
        Kinetic.Shape.call(this, config);
        this.shapeType = 'Circle';
        this._setDrawFuncs();
    },
    drawFunc: function(canvas) {
      /*some code*/
    }
    /* more methods*/
};
Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);

2 你也可以用 coffeescript 继承它：coffeescript Class 但是在js中看起来不太好：

var Gallery,
 __hasProp = {}.hasOwnProperty,
 __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

Gallery = (function(_super) {

__extends(Gallery, _super);

function Gallery(config) {
  Kinetic.Stage.call(this, config);
}

Gallery.prototype.add = function(item) {
  console.log(item);
  return Gallery.__super__.add.call(this, item);
};

Gallery.prototype.method = function() {
  return console.log('test');
};

return Gallery;

})(Kinetic.Stage);

【讨论】：