empfohlene Verfahren Klassen in Paper.js zu verlängern

Question

Gibt es eine empfohlene Weg Klassen in Paper.js zu verlängern? Insbesondere Ich interessiere mich für Verlängerung Path

Pardon, wenn meine Terminologie falsch ist, aber ich bin essentailly die gleiche Frage zu Papier zu fragen that is being asked about three here

Answer 1

Basierend auf Ihren Kommentar auf die ursprüngliche Version meiner Antwort, die Sie suchen für die "extend" -Funktion (oops, das war genau das, was du meintest), Subclassing zu machen. In einem email to the paper.js mailing list, sagte Jürg Lehni (einer der Schöpfer):

Was Subklassifizieren, das ist nicht etwas, das am Moment unterstützt wird. Es könnte funktionieren, könnte es nicht, könnte es in den meisten Fällen funktionieren, aber nicht in sehr seltenen Fällen, die genau feststellen schwer zu, es könnte nur ein paar Änderungen müssen es gut funktioniert, aber die in vielen sein könnte verschiedene Orte.

Zum Beispiel hat jede Item-Unterklasse eine _type-Eigenschaft, die eine Zeichenkette darstellt, die ihren Typ darstellt. Manchmal überprüfen wir, dass anstelle Instanceof zu verwenden, weil es schneller ist, und so weit, zum Beispiel für Pfad wir davon ausgegangen, nur gäbe es keine Subklassifizieren sein.

Eine Komplikation ist, dass es keine paper.Path.Rectangle Objekte gibt. Es gibt Wege, und es gibt Rechtecke, aber wenn man new paper.Path.Rectangle() nennen erstellt es eine neue Path Initialisierung Code (createRectangle), die eine rechteckige Form erzeugt.

So müssten wir paper.Path verlängern. Leider, wenn Sie new paper.Path.Rectangle nennen nennt es createPath, die immer wieder eine Path (nicht Ihre Erweiterung). Es kann möglich sein, etwas zu tun:

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

... und mit korrekt ersetzen/überschreiben für createRectangle oder createPath eine Unterklasse zu arbeiten. Leider habe ich es nicht geschafft.

Meine erste Arbeits Empfehlung ist es, eine Fabrik zu machen und Ihre Funktionen auf die Objekte in dieser Fabrik hinzufügen (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(); 

Ähnlich Sie die Fabrik verwenden können, um gerade den Prototyp für Ihre SuperRectangles zu ändern, mit hinzugefügt Ihre Funktionen zu diesem Prototyp-Objekt (und seine Prototyp derjenige von paper.Path.__proto__ machen) (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 tiv, können Sie ein Objekt machen, dass der Pfad (jsbin here) kapselt:

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; 

Leider dann den Pfad für den Zugriff auf Sie die theRect Variable verwenden.

---

Erste falsche Antwort folgt:

Ich glaube nicht, du meinst "extending Klassen". In Javascript können Sie Objekte erweitern, so dass sie mehr Funktionen haben. Eine Erweiterung der Path- "Klasse" würde also bedeuten, dass alle Path-Objekte dieselben neuen Funktionen haben. Die Javascript-Objekt-Erweiterung wird weiter beschrieben here.

Wenn ich falsch, und Sie wollen Weg verlängern, dann können Sie verwenden:

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

Aber ich denke, Sie sprechen tatsächlich über neue Objekte zu schaffen, die meist wie Pfadobjekte verhalten, aber haben unterschiedliche Funktionalität voneinander. Wenn das der Fall ist, dann möchten Sie vielleicht diese Antwort über Javascript using prototypical inheritance betrachten. Zum Beispiel, hier erstelle ich zwei Rechteck-Objekte, die sich anders verhalten, wenn ich sie zu doSomething (jsbin here) fragen:

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

Ein paar Dinge.

1) Sie können das Original paperjs Objekt wickeln, aber das ist sehr viel ein Hack 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) I & erstellen Papier 2017 klonen kann, die aus der es6 arbeitet so, dass Sie die verwenden können extend Schlüsselwort.

3) Ich schrieb eine Anwendung namens Flavas aber es gewann nie ein folgendes so dass ich nur Art es von links. Davon abgesehen habe ich in letzter Zeit damit gespielt; Upgrade auf es6. Damit kannst du tun, wovon du sprichst.

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); 
    } 
); 

Ich schrieb alle diese Art von schnell, so fühlen Sie sich frei, mich mit Qs zu treffen.