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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14971363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 18:31:13  来源:igfitidea点击:

How can I disable scaling points of canvas elements using fabric.js?

javascriptcanvasfabricjs

提问by Rohan210

By default fabric.js elements come with 8 points to scale any objects. But the app I'm working specifically requires that stretching should not be allowed on a single axis (horizontally or vertically). I only want the corner points, not the ones on sides.

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

Is it that possible with fabric.js?

用fabric.js 有可能吗?

回答by Colmea

Yes,

是的,

you can use object.setControlsVisibility(): http://fabricjs.com/docs/fabric.Object.html#setControlsVisibility

你可以使用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 example: http://jsfiddle.net/Colmea/GjjJ8/1/(note there is a minor bug with 'mr' control in 1.4.0 version, fixed in 1.4.1).

JsFiddle 示例:http: //jsfiddle.net/Colmea/GjjJ8/1/(请注意,1.4.0 版本中有一个带有“mr”控件的小错误,已在 1.4.1 中修复)。

Oryou can use object.setControlVisible():

或者你可以使用object.setControlVisible()

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

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

Note:This only hides controls and avoid dragging them. But to avoid any scale: use lockScalingXand lockScalingYproperties.

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

回答by rodrigopandini

You can use object.lockUniScaling = true.
Also, you can customize your corners: http://fabricjs.com/customization

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

回答by Combine

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

change "imgInstance" to be your object.

将“imgInstance”更改为您的对象。

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

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

回答by Mamy Tiana Rakotomalala

Use it:

用它:

object.hasControls = object.hasBorders = false;

object.hasControls = object.hasBorders = false;

See http://fabricjs.com/customization

http://fabricjs.com/customization

回答by Anil

By default you can't make it. But you can create some functions like : if width = x then height = y with some relation between x and y on some event(like "on:scaling"), you can always make the width and height to be in certain ratio.

默认情况下,您无法做到。但是您可以创建一些函数,例如:如果 width = x then height = y 并且在某些事件中 x 和 y 之间存在某种关系(例如“on:scaling”),则您始终可以使宽度和高度保持一定比例。