推荐的方法来扩展Paper.js中的类

Question

是否有推荐的方法来扩展Paper.js中的类？特别是,我有兴趣扩展Path

对不起,如果我的术语是不正确的,但我essentailly询问纸同样的问题正在被询问大约三在这里

Answer 1

根据您对我的答案的初始版本的评论,您正在寻找子类化的"扩展"功能(oops,这正是您的意思).在给paper.js邮件列表的电子邮件中,JürgLehni(其中一位创作者)说:

至于子类化,这不是目前支持的东西.它可能会起作用,也可能不起作用,它可能在大多数情况下都有效,但在非常罕见的情况下难以确定,它可能只需要进行一些更改就可以使其运行良好,但这些可能在许多不同的地方.

例如,每个Item子类都有一个_type属性,该属性是表示其类型的字符串.有时我们检查而不是使用instanceof,因为它更快,而且到目前为止,例如对于Path我们假设没有子类化.

复杂的是没有paper.Path.Rectangle对象.有路径,有矩形,但是当你调用new paper.Path.Rectangle()它时会创建一个新的Path使用初始化代码(createRectangle)来创建一个矩形形状.

所以我们需要扩展paper.Path.不幸的是,当你打电话给new paper.Path.Rectangle它时createPath,它总是返回一个Path(不是你的扩展名).有可能做类似的事情:

var SuperRectangle = paper.Path.extend({
    otherFunc: function() {
        console.log('dat');
    }
});

...并正确替换/覆盖createRectangle或createPath获取子类工作.不幸的是,我无法管理它.

我的第一个工作建议是创建一个工厂并将您的函数添加到该工厂中的对象(这里是jsbin):

  var createSuperRectangle = function(arguments){
    var superRect = new paper.Path.Rectangle(arguments);
    superRect.otherFunc = function(){
      console.log('dat');
    }
    return superRect;
  }
  var aRect = new Rectangle(20, 30, 10, 15);
  var aPath = createSuperRectangle({
    rectangle: aRect,
    strokeColor: 'black'
  });
  aPath.otherFunc();

类似地,您可以使用工厂只更改SuperRectangles的原型,将您的函数添加到该原型对象(并将其原型作为原型paper.Path.__proto__)(jsbin here):

  var superRectProto = function(){};
  var tempRect = new paper.Path.Rectangle();
  tempRect.remove();
  superRectProto.__proto__ = tempRect.__proto__;
  superRectProto.otherFunc = function(){
    console.log('dat');
  }
  delete tempRect;
  var createSuperRectangle = function(arguments){
    var superRect = new paper.Path.Rectangle(arguments);
    superRect.__proto__ = superRectProto;
    return superRect;
  }
  var aRect = new Rectangle(20, 30, 10, 15);
  var aPath = createSuperRectangle({
    rectangle: aRect,
    strokeColor: 'black'
  });
  aPath.otherFunc();

或者,您可以创建一个封装Path的对象(此处为jsbin):

  var SuperRectangle = function(arguments){
    this.theRect = new paper.Path.Rectangle(arguments);
    this.otherFunc = function(){
      console.log('dat');
    }
  }
  var aRect = new Rectangle(20, 30, 10, 15);
  var aPath = new SuperRectangle({
    rectangle: aRect,
    strokeColor: 'black'
  });
  aPath.otherFunc();
  aPath.theRect.strokeWidth = 5;

不幸的是,然后要访问路径,你必须使用theRect变量.

最初的错误答案如下:

我不认为你的意思是"扩展课程".在Javascript中,您可以扩展对象以便它们具有更多功能,因此扩展Path"类"将意味着所有Path对象具有相同的新功能.这里进一步描述Javascript对象扩展.

如果我错了,你想扩展Path,那么你可以使用:

paper.Path.inject({
    yourFunctionName: function(anyArgumentsHere) {
        // your function here
    }
});

但是,我认为您实际上是在讨论创建新对象,这些对象主要表现为Path对象,但彼此具有不同的功能.如果是这种情况,那么您可能希望使用原型继承查看有关Javascript的答案.例如,在这里我创建两个Rectangle对象,当我要求它们时,它们的行为会有所不同doSomething(这里是jsbin):

var rect1 = new Path.Rectangle({
    point: [0, 10],
    size: [100, 100],
    strokeColor: 'black'
    });
rect1.doSomething = function() {
    this.fillColor = new Color('red');
};
var rect2 = new Path.Rectangle({
    point: [150, 10],
    size: [100, 100],
    strokeColor: 'black'
    });
rect2.doSomething = function() {
    this.strokeWidth *= 10;
};
rect1.doSomething();
rect2.doSomething();