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

时间:2013-02-20 02:34:00

标签: javascript canvas fabricjs

默认情况下,fabric.js元素带有8个点来缩放任何对象。但我正在工作的应用程序要求不允许在单个轴(水平或垂直)上进行拉伸。 我只想要角点,而不是边角点。

是否可以使用fabric.js?

5 个答案:

答案 0 :(得分:30)

是,

您可以使用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

注意:这只会隐藏控件并避免拖动它们。但要避免任何比例:使用lockScalingXlockScalingY属性。

答案 1 :(得分:20)

您可以使用object.lockUniScaling = true
此外,您还可以自定义角落:http://fabricjs.com/customization

答案 2 :(得分:9)

   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

答案 3 :(得分:1)

使用它:

object.hasControls = object.hasBorders = false;

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

答案 4 :(得分:-3)

默认情况下,您无法成功。但是你可以创建一些函数,如:如果width = x则height = y,在某些事件上有一些x和y之间的关系(比如“on:scaling”),你总是可以使宽度和高度保持一定的比例。 / p>