2016-11-07 4 views
0

私はFabricJSとText Shadowのオフセットを使用していますが、イメージをキャンバス上に表示する際にそのまま適用されます。FabricJSでキャンバスイメージを読み込むときにテキストシャドーオフセットを調整する方法は?

キャンバス上のテキスト表示

enter image description here

を次のようにしかし、次のように表示されるキャンバスの画像を保存した後。オフセット

enter image description here

影が小さくてしまいました。私は、これはセーブ機能で発生薄い

function textShadowOffsetChange() { 
    var val = $('#text-shadow-offset-slider').slider('option','value'); 
    if(document.getElementById("text-shadow-set").checked && isText()) { 
     currentElement.setShadow({ 
      color: '#000', 
      blur: 5, 
      offsetX: val, 
      offsetY: val 
     }); 
     canvas.renderAll(); 
    } 
} 

を次のように

私の影には、機能を相殺しました。なぜなら私は乗算器を使用して画像を保存するときにスケールするからです。私の保存機能は次の通りですか?

var MaskImg = canvas.toDataURL({ 
     format: 'png', 
     multiplier: multi, 
     left: (canvas.width - maskWidth)/2, 
     height: maskOriHeight/multi, 
     width: maskOriWidth/multi 
}); 

シャドウオフセットの影響を受けていないと思います。どのように私はこれを解決する?

Sample Fiddle

+0

あなたは実際にそれを見るためにplunkerまたはjsfiddleを作ってください。 – janusz

+0

@janusz http://codepen.io/isurufit/pen/woKWzw – isuru

答えて

0

それはすでに、バージョン1.6.6で修正されていFabric.JSのバグのように見えます。ただ、v1.6.6にアップデートし、それが正常に動作します、ここを参照してください:

var canvas = new fabric.Canvas(document.getElementById('c')); 
http://codepen.io/anon/pen/aBvpaK

は、彼らは今、それがこのようなDOM要素への参照を取得するように、v1.6.6でキャンバスのコンストラクタを変更しているように見えます

関連する問題