Zalecany sposób rozszerzania klas w Paper.js

Question

Czy istnieje zalecany sposób rozszerzania klas w Paper.js? W szczególności jestem zainteresowana przedłużeniem Path

Pardon jeśli moja terminologia jest nieprawidłowy, ale jestem essentailly zadaje to samo pytanie o papierze that is being asked about three here

Answer 1

Bazując na swoim komentarzu do pierwotnej wersji moją odpowiedź, której szukasz dla funkcji "rozszerzania" (oops, to było dokładnie to, co miałeś na myśli) do tworzenia podklasy. W email to the paper.js mailing list, Jürg Lehni (jeden z twórców) powiedział:

Jak dla podklasy, to nie jest coś, co jest obsługiwane w tej chwili . To może zadziałać, może nie, może działać w większości przypadków, ale nie w bardzo rzadkich przypadkach, które są trudne do zlokalizowania, może potrzebować tylko kilku zmian, aby działało dobrze, ale mogą one być w wielu różne miejsca.

Na przykład każda podklasa typu ma właściwość _type, która jest ciągiem reprezentującym jej typ. Czasem sprawdzamy to, zamiast używać instancji , ponieważ jest szybsze i jak dotąd, na przykład dla Path my założyliśmy, że nie będzie żadnej podklasy.

Powikłaniem jest brak obiektów paper.Path.Rectangle. Istnieją ścieżki i są prostokąty, ale po wywołaniu new paper.Path.Rectangle() tworzy nowy Path przy użyciu kodu inicjującego (createRectangle), który tworzy prostokątny kształt.

Musimy więc przedłużyć paper.Path. Niestety, po wywołaniu new paper.Path.Rectangle wywołuje createPath, która zawsze zwraca Path (nie rozszerzenie). To może być możliwe, aby zrobić coś takiego:

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

... i prawidłowo zastąpienie/nadrzędne dla createRectangle lub createPath dostać podklasą do pracy. Niestety nie udało mi się nim zarządzać.

Moja pierwsza rekomendacja robocza jest, aby fabrykę i dodaj swoje funkcje do obiektów w tej fabryce (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(); 

Podobnie, można skorzystać z fabryki po prostu zmienić prototyp dla SuperRectangles, Po dodaniu swoje funkcje do tego obiektu prototypu (i co jego prototyp jednej z 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, można utworzyć obiekt, który hermetyzuje ścieżki (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; 

Niestety, to aby uzyskać dostęp do ścieżki trzeba użyć zmiennej theRect.

---

Początkowa błędna odpowiedź następująco:

nie sądzę masz na myśli "rozciągające klas". W JavaScript można rozszerzać obiekty tak, aby miały więcej funkcji, więc rozszerzenie klasy "Path" oznaczałoby, że wszystkie obiekty Path mają te same nowe funkcje. Rozszerzenie obiektu JavaScript jest dalej opisane here.

Jeśli się mylę, a ty chcesz przedłużyć ścieżkę, a następnie można użyć:

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

Myślę jednak, że w rzeczywistości mówimy o tworzeniu nowych obiektów, które w większości zachowują się jak obiekty drogi, ale mają różne funkcje od siebie. W takim przypadku możesz spojrzeć na tę odpowiedź na temat Javascript using prototypical inheritance. Na przykład tutaj utworzyć dwa obiekty prostokątne które zachowują się inaczej, gdy pytam ich 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

kilka rzeczy.

1) Można owinąć oryginalnego obiektu paperjs ale to bardzo dużo 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) mogę sklonować & stworzyć papier 2017, która działa off ES6, dzięki czemu można korzystać z extend słowo kluczowe.

3) Napisałem aplikację o nazwie Flavas, ale nigdy nie uzyskałem następujących informacji, więc po prostu ją opuściłem. Biorąc to pod uwagę, ostatnio bawię się z tym; uaktualnienie do wersji es6. Dzięki niemu możesz zrobić to, o czym mówisz.

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

Napisałem wszystkie tego rodzaju szybkie, więc możesz mnie uderzyć z Q's.