[英]How does the inheritance model of KineticJS work?
我是JavaScript的新手,我知道可以使用不同的继承模型。 我有一个项目,我使用了KineticJS,我在他们的更新日志中注意到他们使用项目的v3.10.3版本更改了继承模型,这样我们就可以'more easily extend or add custom methods to Kinetic classes'
我已经做了一些搜索,但我似乎无法在任何地方找到一个明确的例子。 我想知道是否有人能告诉我将属性和方法添加到Kinetic类的正确方法是什么,以及我如何扩展它们来创建我自己的自定义类? 在KavascriptJS中使用的继承模型是javascript中的常见模型吗?
您可以使用不同的方式。
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);
我建议遵循在KineticJS源中完成的方法。 这篇博客文章解释了如何但有点过时,所以我将包含一个最新的示例,该示例还说明了如何向自定义形状添加属性。
下面的代码显示了创建一个新的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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.