Wie kann ich Skalierungspunkte von Canvas-Elementen mit fabric.js deaktivieren?

Question

Standardmäßig enthalten die Elemente von fabric.js 8 Punkte, um Objekte zu skalieren. Aber die App, die ich gerade arbeite, verlangt, dass Stretching nicht auf einer Achse (horizontal oder vertikal) erlaubt ist. Ich möchte nur die Eckpunkte, nicht die auf den Seiten.

Ist das mit fabric.js möglich?

Answer 1

Sie können object.lockUniScaling = true verwenden.
Auch können Sie Ihre Ecken anpassen: http://fabricjs.com/customization

Answer 2

Standardmäßig können Sie es nicht machen. Aber Sie können einige Funktionen erstellen: Wenn width = x dann height = y mit einer Beziehung zwischen x und y bei einem Ereignis (wie "on: scaling"), können Sie immer die Breite und Höhe in einem bestimmten Verhältnis einstellen.

Answer 3

Ja,

Sie object.setControlsVisibility() verwenden können: 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 Beispiel: http://jsfiddle.net/Colmea/GjjJ8/1/ (beachten Sie, dass ein kleiner Fehler mit 'mr' control in Version 1.4.0, behoben in 1.4.1).

Oder können Sie object.setControlVisible() verwenden:

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

Hinweis: Diese Kontrollen nur versteckt und verhindern, dass sie ziehen. Um jedoch jegliche Skalierung zu vermeiden, verwenden Sie die Eigenschaften lockScalingX und lockScalingY.

Answer 4

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

ändern Sie "imgInstance", um Ihr Objekt zu sein.

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