推荐的方法来扩展Paper.js中的类 [英] recommended way to extend classes in Paper.js

问题描述

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

Is there a recommended way to extend classes in Paper.js? In particular, I am interested in extending Path

如果我的术语不正确，请原谅，但我特意询问有关纸张的相同问题这里有三个被问到的问题

Pardon if my terminology is incorrect, but I am essentailly asking the same question about paper that is being asked about three here

推荐答案

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

Based on your comment to the initial version of my answer, you are looking for the 'extend' function (oops, that was exactly what you meant) to do subclassing. In an email to the paper.js mailing list, Jürg Lehni (one of the creators) said:

至于子类化，这不是
时刻支持的东西。它可能会起作用，也可能不起作用，它可能在大多数情况下都可以工作，但是b $ b不是非常罕见的难以确定的情况，它可能只需要一个
的几个变化来使其运行良好，但是那些可能在很多
不同的地方。

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.

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

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

A complication is that there are no paper.Path.Rectangle objects. There are paths, and there are rectangles, but when you call new paper.Path.Rectangle() it creates a new Path using initialization code (createRectangle) that creates a rectangular shape.

所以我们需要扩展 paper.Path 。不幸的是，当你调用 new paper.Path.Rectangle 时，它调用 createPath ，它总是返回路径（不是你的扩展名）。可能会执行以下操作：

So we would need to extend paper.Path. Unfortunately, when you call new paper.Path.Rectangle it calls createPath, which always returns a Path (not your extension). It may be possible to do something like:

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

...并正确替换/覆盖 createRectangle 或 createPath 让子类起作用。不幸的是，我无法管理它。

...and with correctly substituting/overriding for createRectangle or createPath get a subclass to work. Unfortunately, I have not been able to manage it.

我的第一个工作建议是建立工厂并将你的功能添加到该工厂的对象中（ jsbin这里）：

My first working recommendation is to make a factory and add your functions to the objects in that factory (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的原型，并将您的功能添加到那个原型对象（并且它的原型来自 paper.Path .__ proto __ ）（ jsbin这里）：

Similarly, you can use the factory to just change the prototype for your SuperRectangles, having added your functions to that prototype object (and making its prototype the one from 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();

或者，您可以创建一个封装路径的对象（ jsbin here ：

Alternatively, you can make an object that encapsulates the 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 变量。

Unfortunately, then to access the path you have to use the theRect variable.

初步错误答案如下：

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

I don't think you mean "extending classes". In Javascript you can extend objects so that they have more functions, so extending the Path "class" would mean all Path objects have the same new functions. Javascript object extension is further described here.

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

If I'm wrong, and you do want to extend Path, then you can use:

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

但是，我认为你实际上是在谈论创建新对象，这些对象的行为大多与Path对象相似但却有所不同彼此的功能。如果是这种情况，那么你可能想看看这个关于使用原型继承的Javascript 。例如，在这里我创建两个Rectangle对象，当我要求它们 doSomething 时，行为会有所不同（ jsbin here ）：

However, I think you are actually talking about creating new objects that mostly behave like Path objects but have different functionality from each other. If that is the case, then you may want to look at this answer about Javascript using prototypical inheritance. For example, here I create two Rectangle objects that behave differently when I ask them to 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();

这篇关于推荐的方法来扩展Paper.js中的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！