默认情况下,fabric.js 元素带有 8 个点来缩放任何对象。但是我正在使用的应用程序特别要求不允许在单个轴(水平或垂直)上进行拉伸。我只想要角点,而不是边上的点。
使用fabric.js 有可能吗?
默认情况下,fabric.js 元素带有 8 个点来缩放任何对象。但是我正在使用的应用程序特别要求不允许在单个轴(水平或垂直)上进行拉伸。我只想要角点,而不是边上的点。
使用fabric.js 有可能吗?
是的,
你可以使用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
属性。
您可以使用object.lockUniScaling = true
.
此外,您可以自定义角落: http: //fabricjs.com/customization
imgInstance.setControlsVisibility({
mt: false,
mb: false,
ml: false,
mr: false,
bl: false,
br: false,
tl: false,
tr: false,
mtr: false,
});
将“imgInstance”更改为您的对象。
默认情况下你无法做到。但是您可以创建一些函数,例如:如果 width = x then height = y 在某些事件中 x 和 y 之间存在某种关系(例如“on:scaling”),您始终可以使宽度和高度保持一定的比例。