KineticJS的继承模型如何工作？ [英] How does the inheritance model of KineticJS work?

问题描述

我对JavaScript有点新，我知道可以使用不同的继承模型。我有一个项目，我使用KineticJS，我注意到他们的 changelog 他们使用项目的v3.10.3版本更改了继承模型，这样我们就可以'更轻松地扩展或向Kinetic类添加自定义方法

I am a little new to JavaScript, and I know that there are different inheritance models that can be used. I have a project I used KineticJS for and I noticed in their changelog that they changed the inheritance model with the release of v3.10.3 of the project, so that we can 'more easily extend or add custom methods to Kinetic classes'

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

I have done some searching for this, but I cannot seem to find a clear example of this anywhere. I was wondering if anyone could tell me what would be the proper way to add both properties and methods to Kinetic classes, and how I may extend them t create my own custom classes? Is the inheritance model used in KineticJS a common one in javascript?

推荐答案

我建议遵循在 KineticJS 来源。 这篇博客文章解释了如何但有点过时了所以我将包含一个最新的示例，该示例还说明如何向自定义形状添加属性。

I would recommend following the method that is done inside the KineticJS source. This blog post explains how but is a little outdated so I'll include an up to date example that also shows how to add properties to your custom shapes.

下面的代码显示了创建新<$的示例c $ c> Shape.Arc 对象。此示例显示如何添加新功能和属性。

The code below shows gives an example of creating a new Shape.Arc object. This sample shows how to add both new functions and properties.

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

重要的是它包装在匿名函数中，因此可以创建多个实例。

It is important that it is wrapped in an anonymous function so more than one instance can be created.

创建弧：

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

这篇关于KineticJS的继承模型如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！