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

Question

デフォルトでは、fabric.js 要素には、オブジェクトをスケーリングするための 8 つのポイントが付属しています。しかし、私が取り組んでいるアプリでは、単一の軸 (水平または垂直) でストレッチを許可しないことが特に必要です。側面のポイントではなく、コーナーポイントのみが必要です。

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

Answer 1

はい、

使用できます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プロパティを使用します。

Answer 2

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

Answer 3

これを使って：

object.hasControls = object.hasBorders = false;

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

Answer 4

デフォルトでは、作成できません。ただし、次のような関数を作成できます。if width = x then height = y 何らかのイベントで x と y の間に何らかの関係がある場合 (「on:scaling」など)、常に幅と高さを特定の比率にすることができます。