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
How can I disable scaling points of canvas elements using fabric.js?
提问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.
注意:这只会隐藏控件并避免拖动它们。但要避免任何规模:用途lockScalingX和lockScalingY属性。
回答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”更改为您的对象。
回答by Mamy Tiana Rakotomalala
Use it:
用它:
object.hasControls = object.hasBorders = false;
object.hasControls = object.hasBorders = false;
回答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”),则您始终可以使宽度和高度保持一定比例。

