Question

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

如果我的术语不正确，请原谅，但我非常谨慎地询问有关论文that is being asked about three here

的相同问题

Answer 1

根据您对我的答案的初始版本的评论，您正在寻找子类化的'扩展'功能（oops，这正是您的意思）。在email to the paper.js mailing list，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 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的原型，将您的函数添加到该原型对象（并使{strong> 原型来自paper.Path.__proto__）（{ {3}}）：

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

最初的错误答案如下：

我不认为你的意思是“扩展课程”。在Javascript中，您可以扩展对象以便它们具有更多功能，因此扩展Path“类”将意味着所有Path对象具有相同的新功能。 Javascript对象扩展名进一步描述为jsbin here。

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

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

但是，我认为您实际上是在讨论创建新对象，这些对象的行为大多类似于Path对象，但彼此具有不同的功能。如果是这种情况，那么您可能希望查看有关here的答案。例如，在这里我创建了两个Rectangle对象，当我向他们doSomething 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(); {{1}}询问时，它们的行为有所不同：

{{1}}

Answer 2

有几件事。

1）你可以包装原始的paperjs对象，但这非常黑客 paperjs playground

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）我可以克隆＆amp;创建一个使用es6操作的论文2017，以便您可以使用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来打我。

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

2 个答案: