如何使用fabric.js禁用canvas元素的缩放点？

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

   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

Answer 4

用它：

object.hasControls = object.hasBorders = false;

请参阅http://fabricjs.com/customization

Answer 5

默认情况下，您无法成功。 但是你可以创建一些函数，如：如果width = x然后是height = y，并且某些事件上的x和y之间有某种关系（比如“on：scaling”），你总是可以使宽度和高度保持一定的比例。