2016-08-08 34 views
0

Ich experimentiere mit benutzerdefinierten Objekten in fabricJS. Ich beginne mit einer von mir gezeichneten Linie. Ich weiß, dass es schon ein Objekt dafür gibt, aber ich möchte verstehen, was dahinter passiert und in welchem ​​Maße ich Dinge modifizieren kann. Also, ich benutze eine einfache Zeile für den Anfang, aber aus irgendeinem Grund ist es nicht auf der Leinwand gezeichnet.fabricJS - Benutzerdefiniertes Objekt wird nicht auf Leinwand gezeichnet

Es sieht aus wie die _render Funktion wird nicht aufgerufen, während initialize funktioniert gut. Können Sie mir bitte sagen, was mit meinem Code nicht stimmt?

JSFiddle

fabric.CustomLine = fabric.util.createClass(fabric.Object, { 

    type: 'customline', 

    pos : { 
     x1 : 0, 
     y1 : 0, 
     x2 : 0, 
     y2 : 0 
    }, 

    initialize: function (options) { 
     options = options || {}; 

     this.callSuper('initialize', options); 

     this.pos.x1 = options.x1 || 0; 
     this.pos.y1 = options.y1 || 0; 
     this.pos.x2 = options.x2 || 0; 
     this.pos.y2 = options.y2 || 0; 
    }, 

    _render : function (ctx) { 
     ctx.beginPath(); 
     ctx.moveTo(this.pos.x1, this.pos.y1); 
     ctx.lineTo(this.pos.x2, this.pos.y2); 
     ctx.closePath(); 

     this._renderFill(ctx); 
     this._renderStroke(ctx); 
    } 
}); 

EDIT:

In this question gibt es das gleiche Problem. Es scheint, als ob man width und height Eigenschaften auf > 0 setzen muss, aber ich verstehe nicht warum. Ich kann diese Problemumgehung in der FabricJS-Quelle auch nicht finden.

Antwort

2

So wird die _render Funktion von der Object.render Funktion aufgerufen.

Object.render beginnt wie folgt aus:

render: function(ctx, noTransform) { 
     // do not render if width/height are zeros or object is not visible 
     if ((this.width === 0 && this.height === 0) || !this.visible) { 
     return; 
     } 
    ... 
    } 

Ihr Objekt erhalten keine Breite und Höhe in der Funktion initialize initialisiert und so die render Methode liefert sofort und Ihre _render Funktion nicht aufgerufen wird.