2016-05-01 9 views
0

私はFabricJSにとって非常に新しく、私は何かを実行しました。私はそれを何時間も働いていたので、うまくいけば目の新鮮なセットがすぐに問題を見つけることができます。FabricJSのスケーリング/ズームキャンバス?

私はキャンバス要素を拡大しようとしています(イメージをロードした後に - 1920x1080と言うことができます)、スライダでズームできます。以下は

この方法の私の実装です:

function zoomCanvas(scale) { 
    canvas.setZoom(scale); 
    canvas.setWidth(editor.backgroundImage.getWidth() * canvas.getZoom()); 
    canvas.setHeight(editor.backgroundImage.getHeight() * canvas.getZoom()); 
} 

と私は同じように私canvas.setBackgroundImage機能でそれを呼び出す:

var canvasParent = canvas.getElement().parentElement.parentElement; 
zoomCanvas((canvasParent.offsetWidth/canvas.backgroundImage.getWidth()) - 0.05); 

これは実際に私はそれをしたい正確にどのように動作します。それは、親画像の幅に合わせて大きな画像を拡大します(そして、これは良い方法であるかどうかは分かりません)。しかし、私はキャンバス/画像の底部 - そして場合によっては右側面 - に若干の問題が生じています。どうやら、彼らはお互いに完全にスケール取得されていないと私はこのような何かを得る:

enter image description here

を私は小数点以下を四捨五入試してみましたが、それは使用ですありませんし、私はそれについて何をすべきかわかりません。

更新:ここにはJSFIDDLEの問題があります。下に赤い線が現れるまでウィンドウを上下に拡大します(私の場合、右または下に表示されます)。

更新2:私は問題を理解したと思います。私はブラウザを110%にズームアップし、Chromeはファブリックによって生成されたCanvas要素でいくつかの奇妙なレンダリングエフェクトを持っていました。しかし、私はブラウザがズームされたときにこれが起こるのは嫌です。これはCSSのバグですか、Chromeのバグですか?私はまだ問題を抱えていますが、あまり頻繁ではありません。場合によっては、下キャンバスの高さが上の高さよりも高くなることがあります。

+0

ここにjs-fiddleがあると便利です。 –

+0

@AntonHaraldあなたは正しいです。一緒に捨てるために私に少しの時間を与えてください。 –

+0

@AntonHarald Update:私のセカンダリアップデートを確認してください。申し訳ありませんが、私は今夜は長い道のりをとっています。しかし、これはChromeやCSSでのバグですか?しかし、私はまだ問題を少しだけ見ていますが、頻繁ではありません。 –

答えて

0

私のコードをすべて見直し、広範なテストを行ったところ、これは特にFlexBoxとではなく fabricjsの問題であることが判明しました。

私のコードでは、私はdivの中にCanvasを垂直に中心に置いていましたが、flexboxはこれらの奇妙な問題を引き起こしていました。詳細については、JSFIDDLEを参照し、CSSからflexboxを削除してください。