web-dev-qa-db-ja.com

fabric.jsを使用してキャンバス要素のスケーリングポイントを無効にするにはどうすればよいですか？

デフォルトでは、fabric.js要素には、オブジェクトをスケーリングするための8ポイントが付属しています。しかし、私が特に作業しているアプリでは、単一軸（水平または垂直）でのストレッチを許可しないようにする必要があります。角のポイントだけが必要です。側面のポイントは必要ありません。

それはfabric.jsで可能ですか？

javascriptcanvasfabricjs
20
Rohan210

object.lockUniScaling = trueを使用できます。
また、コーナーをカスタマイズできます： http://fabricjs.com/customization

20
rodrigopandini

はい、

object.setControlsVisibility()を使用できます： http://fabricjs.com/docs/fabric.Object.html#setControlsVisibility

_this.setControlsVisibility({
    mt: false, // middle top disable
    mb: false, // midle bottom
    ml: false, // middle left
    mr: false, // I think you get it
});
_

JsFiddleの例： http://jsfiddle.net/Colmea/GjjJ8/1/ （1.4.0バージョンで「mr」コントロールにマイナーバグがあり、1.4.1で修正されていることに注意してください）。

またはobject.setControlVisible()を使用できます：

object. setControlVisible('mt', false); // disable middle top control

注：これはコントロールを非表示にするだけで、ドラッグを回避します。ただし、スケールを回避するには、lockScalingXおよびlockScalingYプロパティを使用します。

31
Colmea
   imgInstance.setControlsVisibility({
         mt: false, 
         mb: false, 
         ml: false, 
         mr: false, 
         bl: false,
         br: false, 
         tl: false, 
         tr: false,
         mtr: false, 
    });

「imgInstance」をオブジェクトに変更します。

@ http://fabricjs.com/docs/fabric.Image.html

10
Combine

これを使って：

object.hasControls = object.hasBorders = false;

http://fabricjs.com/customization を参照してください

1
Mamy Tiana Rakotomalala