2016-08-08 18 views
0

私はfabricJSでカスタムオブジェクトを試しています。私は自分で描いた線から始めている。私は既にそれのための目的があることを知っていますが、私は物事を修正することができ、後ろに起こることをどの程度理解したいと思います。だから、最初は単純な線を使っていますが、何らかの理由でキャンバスに描かれていません。fabricJS - カスタムオブジェクトがキャンバスに描画されない

initializeは正常に機能していますが、_render関数が呼び出されていないようです。私のコードに何が間違っているのか教えてください。

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

JSFiddle


EDIT:

In this question同じ問題があります。 1つはwidthheightのプロパティを> 0に設定しなければならないようですが、なぜそれはわかりません。私はfabricSSソースでもこの回避策を見つけることができません。

答えて

2

したがって、_render関数はObject.render関数によって呼び出されます。このような

Object.render開始:

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

あなたのオブジェクトは、initialize機能で初期化任意の幅と高さを取得していませんので、render方法はすぐに戻って、あなたの_render関数が呼び出されません。

関連する問題