metodo consigliato per estendere le classi in Paper.js

Question

Esiste un modo consigliato per estendere le classi in Paper.js? In particolare, sono interessati ad estendere Path

perdono se la mia terminologia è corretto, ma sto essentailly chiedendo la stessa domanda su carta that is being asked about three here

Answer 1

Basato sul tuo commento alla versione iniziale della mia risposta, si sta cercando per la funzione 'estendi' (oops, era esattamente quello che intendevi) fare sottoclassi. In un email to the paper.js mailing list, Jürg Lehni (uno dei creatori) ha detto:

Per quanto riguarda la creazione di sottoclassi, che non è qualcosa che è supportato al momento . Potrebbe funzionare, potrebbe non funzionare, potrebbe funzionare nella maggior parte dei casi, ma in casi molto rari che sono difficili da individuare, potrebbe essere necessario solo un paio di modifiche per far sì che funzioni bene, ma potrebbero essere in molti luoghi differenti.

Ad esempio, ciascuna sottoclasse Articolo ha una proprietà _type che è una stringa che rappresenta il suo tipo. A volte controlliamo che invece di usare l'istanza di , perché è più veloce, e finora, ad esempio per Path abbiamo appena supposto non ci sarebbe stata una sottoclasse.

Una complicazione è che non ci sono oggetti paper.Path.Rectangle. Esistono percorsi e rettangoli, ma quando si chiama new paper.Path.Rectangle() viene creato un nuovo Path utilizzando il codice di inizializzazione (createRectangle) che crea una forma rettangolare.

Quindi avremmo bisogno di estendere paper.Path. Sfortunatamente, quando chiami new paper.Path.Rectangle chiama createPath, che restituisce sempre un Path (non la tua estensione). Potrebbe essere possibile fare qualcosa di simile:

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

... e con correttamente sostituendo/override per createRectangle o createPath ottenere una sottoclasse di lavorare. Sfortunatamente, non sono stato in grado di gestirlo.

La mia prima raccomandazione di lavoro è quello di fare una fabbrica e aggiungi le funzioni per gli oggetti in quella fabbrica (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(); 

Allo stesso modo, è possibile utilizzare la fabbrica per cambiare solo il prototipo per i tuoi SuperRectangles, avendo aggiunto le funzioni a tale oggetto prototipo (e facendo la sua prototipo di quello da 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, è possibile rendere un oggetto che incapsula il Sentiero (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; 

Purtroppo, poi per accedere al percorso è necessario utilizzare la variabile theRect.

---

risposta sbagliata iniziale segue:

Non credo che vuoi dire "classi estendono". In Javascript è possibile estendere gli oggetti in modo che abbiano più funzioni, quindi estendere la "classe" Path significherebbe che tutti gli oggetti Path hanno le stesse nuove funzioni. L'estensione dell'oggetto Javascript è ulteriormente descritta here.

Se mi sbaglio, e ti voglio estendere il percorso, quindi è possibile utilizzare:

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

Tuttavia, credo che in realtà si sta parlando di creazione di nuovi oggetti che per lo più si comportano come oggetti Path, ma hanno diverse funzionalità l'una dall'altra. Se questo è il caso, allora potresti voler dare un'occhiata a questa risposta su Javascript using prototypical inheritance. Per esempio, ecco creo due oggetti Rectangle che si comportano in modo diverso quando li chiedo di 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

un paio di cose.

1) si può avvolgere l'oggetto paperjs originale, ma questo è molto più di un 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) Posso clonare & creare un documento 2017 che opera al largo di ES6 in modo che è possibile utilizzare il extend parola chiave.

3) Ho scritto un'applicazione denominata Flavas ma non ha mai ottenuto un seguito quindi l'ho semplicemente lasciato. Detto questo, ci ho giocato ultimamente; aggiornandolo a es6. Con esso puoi fare quello di cui stai parlando.

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

Ho scritto tutto questo in modo rapido, quindi sentitevi liberi di darmi da fare con Q's.