Paper.jsでクラスを拡張するための推奨方法

Question

Paper.jsでクラスを拡張するための推奨される方法はありますか？私の専門用語が間違っているが、私はessentailly私の答えの最初のバージョンへのあなたのコメントに基づいて紙that is being asked about three here

Answer 1

について同じ質問をしています、あなたが探している場合は特に、私が恩赦Path

の延長に興味を持っていますサブクラス化を行うために 'extend'関数（oops、それはまさにあなたが意図したものでした）のために。 email to the paper.js mailing listでは、ユルク・Lehni（クリエイターの1）は言った：

サブクラス化のために、それは 現時点ではサポートされているものではありませんと。それはうまくいくかもしれませんが、それはほとんどの場合うまくいくかもしれませんが、 非常にまれなケースではありませんが、正確に動作させるためには カップルの変更が必要なだけかもしれませんが、多くは 別の場所。

たとえば、各Itemサブクラスには_typeプロパティがあり、タイプを表す文字列は です。時々我々は instanceofの代わりにそれがより高速であること、そしてこれまでのところ例えばPathの場合 がサブクラス化されていないと仮定していることを確認します。

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__から1にする）（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をあなたがtheRect変数を使用する必要がパスにアクセスするには、その後、残念ながら

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; 

：atively、あなたはパス（jsbin here）をカプセル化するオブジェクトを作ることができます。

---

初期間違った答えは次のとおりです。

私はあなたが「拡張クラス」を意味しないと思います。 Javascriptでは、オブジェクトがより多くの機能を持つようにオブジェクトを拡張することができるので、Pathクラスを拡張すると、すべてのPathオブジェクトが同じ新しい関数を持つことになります。 Javascriptオブジェクトの拡張については、さらにhereと記載されています。

私が間違っている、とあなたは、あなたが使用することができ、パスを拡張したい場合：

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

しかし、私はあなたが実際にほとんどパスオブジェクトのように動作し、新しいオブジェクトを作成する方法について話していると思いますが、持っています互いに異なる機能性を有する。その場合、Javascript using prototypical inheritanceについてのこの回答を見てください。

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

物事のカップル：たとえば、ここに私がdoSomething（jsbin here）にそれらを求める際に異なる動作を2つのRectangleオブジェクトを作成します。

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である）私はあなたが使用できるように&が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さんで私を打つ気軽に迅速にすべてのこの種を書きました。