8

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

如果我的术语不正确，请原谅，但我本质上是在问关于这里被问到三个的论文的相同问题

4

2 回答 2

5

根据您对我回答的初始版本的评论，您正在寻找“扩展”功能（哎呀，这正是您的意思）来进行子类化。在发给 paper.js 邮件列表的电子邮件中，Jürg Lehni（其中一位创建者）说：

至于子类化，目前不支持。它可能有效，也可能无效，它可能在大多数情况下有效，但在很难确定的极少数情况下并非如此，它可能只需要进行一些更改即可使其正常工作，但这些更改可能在许多不同的地方。

例如，每个 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 的原型，将您的函数添加到该原型对象（并将其原型设为 from paper.Path.__proto__）（此处为 jsbin）：

  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）：

  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 using prototypical inheritance的答案。例如，在这里我创建了两个 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();
于 2013-08-02T19:16:47.173 回答
0

有几件事。

1）您可以包装原始的 paperjs 对象，但这更像是一个 hack paperjs 游乐场

function SuperSquare() {
    this.square = new Path.Rectangle({
        size:50,
        fillColor:'red',
        onFrame:function(base) {
            var w2 = paper.view.element.width / 2;
            this.position.x = Math.sin(base.time) * w2 + w2;
        }
    });
}
SuperSquare.prototype.setFillColor = function(str) {
    this.square.fillColor = str;
}

var ss = new SuperSquare();
ss.setFillColor('blue');

2）我可能会克隆并创建一份 2017 年的论文，该论文在 es6 之外运行，以便您可以使用extend关键字。

3）我写了一个名为Flavas的应用程序，但它从未获得过追随者，所以我只是放弃了它。话虽如此，我最近一直在玩它；升级到es6。有了它，你可以做你正在谈论的事情。

class Square extends com.flanvas.display.DisplayObject {
    constructor(size) {
        this.graphics.moveTo(this.x, this.y);
        this.graphics.lineTo(this.x + size, this.y);
        this.graphics.lineTo(this.x + size, this.y + size);
        this.graphics.lineTo(this.x, this.y + size);
    }

    someMethod(param) {
        trace("do something else", param);
    }
);

我写了这么快的东西，所以请随时用 Q 来打我。

于 2017-05-31T22:15:18.587 回答