在Paper.js

Question

擴展類推薦方式有沒有在Paper.js擴展類推薦的方法是什麼？特別是，我很感興趣，延長Path

對不起，如果我的術語是不正確的，但我essentailly問同樣的問題有關紙張that is being asked about three here

Answer 1

基於對我的回答的初始版本的評論，你正在尋找對於'擴展'函數（oops，這正是你的意思）進行子類化。在email to the paper.js mailing list於爾格Lehni（創始人之一）說：

至於子類，這不是東西，在 時刻支持。它可能工作，它可能不工作，它可能在大多數情況下工作，但不是在極少數情況下很難查明，它可能只需要一對 更改以使其工作正常，但那些可能在很多 不同的地方。

例如，每個Item子類具有_type屬性它是一個字符串 表示其類型。有時候，我們檢查，而不是使用 的instanceof，因爲它的速度更快，到目前爲止，例如用於道路，我們 剛剛就任就沒有子類。

複雜性在於有沒有paper.Path.Rectangle對象。有路徑，有長方形，但是當你調用new paper.Path.Rectangle()它使用創建一個長方形的初始化代碼（createRectangle）創建一個新的Path。

所以，我們需要擴展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，具有添加了自己的功能到該原型對象（及其製備其原型所述一個從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(); 

Altern atively，可以使封裝的路徑（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「class」將意味着所有Path對象都具有相同的新功能。 JavaScript對象擴展進一步描述here。

如果我錯了，你想擴展路徑，那麼你可以使用：

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

不過，我想你實際上是在談論創造大多表現得像路徑對象，但有新對象彼此不同的功能。如果是這樣的話，那麼你可能想看看關於Javascript using prototypical inheritance的這個答案。例如，我在這裏創建不同的表現，當我問他們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(); 

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）我可以克隆&創建一個文件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打我。