2017-10-22 9 views
0

fabricjs rectのサイズを変更するのではなく、resizeハンドルをドラッグして奇妙な動作が見られます。境界線が消えたり複製されたりします。私はfabricjsの安定版1.7.19とベータ2.0.0の両方を試しました。ここfabricjs rectのサイズを変更して境界線のサイズを維持する

canvas.on('object:scaling', function(){ 
    var obj = canvas.getActiveObject(), 
     width = obj.width, 
     height = obj.height, 
     scaleX = obj.scaleX, 
     scaleY = obj.scaleY; 

    obj.set({ 
     width : width * scaleX, 
     height : height * scaleY, 
     scaleX: 1, 
     scaleY: 1 
    }); 
}); 

の作業例:https://codepen.io/bramchi/pen/GMLYEV/

それをスケールアップしてみてサイズ変更ハンドルをドラッグすることで、ビットダウンここ

は、私が使用しているコードの本質です。私が起こることを期待する何

Screenshot of scaling up and down issues

同じ滞在する四角形のハンドルをドラッグしながら成長し、縮小、および境界線のサイズです。しかし何らかの形でレンダリングが始まるのは、あなたが270pxかそれを越える場合です。マウスボタンが離されると、再び正しくレンダリングされます。

私は間違っていますか?誰が修正を知っていますか?それとも、これは私が報告できる図書館のバグでしょうか? dragrotateskewscale操作中にパフォーマンス上の理由から

fabric.Object.prototype.objectCaching = false; 

Fabric.js caches objectsデフォルトで:

答えて

0

無効にオブジェクトキャッシングは、このレンダリング動作を回避します。 fabric.jsレポのモデレーターの一人が正しい方向に私を指差してくれました。ここで説明するよう

+0

完全にキャッシングを無効にすることは、プロジェクトによっては多分残念です – AndreaBogazzi

0

:noScaleCacheを無効

http://fabricjs.com/fabric-object-caching(本当に最後の行)

で十分です。 これはとにかくキャッシングを行います。オブジェクトを拡大/縮小するたびにキャッシュが無効になります。

rectをキャッシュするのは便利ですが、複雑なパスでも同じ動作をしていれば、それでも良いことです。

new fabric.Rect({ 
    left: 50, 
    top: 50, 
    width: 250, 
    height: 250, 
    stroke: 'gray', 
    fill: 'lightgray', 
    strokeWidth: 10, 
    noScaleCache: false, 
    }) 
関連する問題