javascript - 在 Paper.js 中扩展类的推荐方法

Question

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

请原谅我的术语不正确，但我本质上是在问关于论文的同样问题 that is being asked about three here

Answer 1

根据您对我回答的初始版本的评论，您正在寻找“扩展”功能(哎呀，这正是您的意思)来进行子类化。在 email to the paper.js mailing list , Jürg Lehni(创作者之一)说:

As for subclassing, that's not something that is supported at the moment. It might work, it might not, it might work in most cases, but not in very rare cases that are hard to pinpoint, it might need only a couple of changes to make it work well, but those might be in many different places.

For example, each Item subclass has a _type property which is a string representing its type. Sometimes we check that instead of using instanceof, because it's faster, and so far, for example for Path we just assumed there would be no subclassing.

复杂的是没有 paper.Path.Rectangle 对象。有路径，也有矩形，但是当您调用 new paper.Path.Rectangle() 时，它会使用初始化代码 (createRectangle 创建一个新的 Path code>) 创建一个矩形。

所以我们需要扩展paper.Path。不幸的是，当您调用 new paper.Path.Rectangle 时，它会调用 createPath，它总是返回一个 Path(不是您的扩展)。可以做类似的事情:

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

...并正确替换/覆盖 createRectangle 或 createPath 得到一个子类来工作。不幸的是，我无法管理它。

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

  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 的原型(prototype)，将您的函数添加到该原型(prototype)对象(并使 its 原型(prototype)成为来自 paper.Path.__proto__ 的原型(prototype)) ( 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();

或者，您可以制作一个封装路径的对象 (jsbin here):

  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 变量。

---

最初的错误答案如下:

我不认为你的意思是“扩展类(class)”。在 Javascript 中，您可以扩展对象，使它们具有更多功能，因此扩展 Path“类”意味着所有 Path 对象都具有相同的新功能。进一步描述了 Javascript 对象扩展 here .

如果我错了，而你确实想扩展 Path，那么你可以使用:

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

但是，我认为您实际上是在谈论创建新对象，这些对象大多表现得像 Path 对象，但彼此具有不同的功能。如果是这种情况，那么您可能需要查看有关 Javascript using prototypical inheritance 的答案。 .例如，这里我创建了两个 Rectangle 对象，当我要求它们执行 doSomething ( jsbin here ) 时，它们的行为不同:

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