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

Posted 2023-03-25

【中文标题】如何使用 fabric.js 禁用画布元素的缩放点？

【英文标题】：How can I disable scaling points of canvas elements using fabric.js?

【发布时间】：2013-02-04 22:52:39

【问题描述】：

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

fabric.js 有可能吗？

【参考方案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 属性。

【参考方案2】：

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

【参考方案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

【参考方案4】：

使用它：

object.hasControls = object.hasBorders = false;

见http://fabricjs.com/customization

【参考方案5】：

默认情况下你不能成功。但是您可以创建一些函数，例如：如果 width = x then height = y 在某些事件中 x 和 y 之间存在某种关系（例如“on:scaling”），您始终可以使宽度和高度保持一定的比例。