In this jsfiddle我有一个用lockRotation: true
创建的Fabric.js文本,以避免旋转。线条消失了,但要旋转的框控件还在,该如何摆脱它?
HTML
<canvas id="c" width="300" height="300"></canvas>
Javascript
var canvas = new fabric.Canvas('c');
var text = new fabric.IText('This is the text',{
left: 50,
top: 50,
fontFamily: 'Arial',
fontWeight: 'normal',
fontSize: 18,
lockRotation: true,
stroke: 'black',
fill: 'black'
});
发布于 2018-07-07 03:00:37
使用object.hasRotatingPoint = false;隐藏旋转点。
var canvas = new fabric.Canvas('c');
var text = new fabric.IText('This is the text',{
left: 50,
top: 50,
fontFamily: 'Arial',
fontWeight: 'normal',
fontSize: 18,
hasRotatingPoint: false,
stroke: 'black',
fill: 'black'
});
canvas.add(text);
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>
发布于 2021-03-18 21:56:43
接受的答案对于从4.0开始的Fabricjs版本不再有效(请参阅changelog)。hasRotatingPoint
已经被移除,取而代之的是一个更全面的控件应用编程接口,尽管它的documentation仍然非常精简。
若要对特定对象隐藏某个控件,必须重新定义其controls
属性。下面是隐藏mtr
控件(旋转)的方法:
text.controls = {
...fabric.Text.prototype.controls,
mtr: new fabric.Control({ visible: false })
}
var canvas = new fabric.Canvas('c');
var text = new fabric.IText('This is the text',{
left: 50,
top: 50,
fontFamily: 'Arial',
fontWeight: 'normal',
fontSize: 18,
stroke: 'black',
fill: 'black'
});
text.controls = {
...fabric.Text.prototype.controls,
mtr: new fabric.Control({ visible: false })
}
canvas.add(text);
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="300" height="300"></canvas>
在这里,我们使用文本的默认控件创建了一个新的控件对象,但是重新定义了mtr
集。
发布于 2022-02-16 12:22:06
使用setControlsVisibility
,它适用于所有对象类型的fabricjs
fabric.Image.fromURL(src, (img) => {
var oImg = img.set({
left: 0,
top: 0,
})
oImg.setControlsVisibility({ mtr: false })
canvas.add(oImg)
canvas.setActiveObject(oImg)
canvas.renderAll()
}
let newtext = new fabric.Textbox(text, {
left: 0,
top: 0,
originX: 'center',
originY: 'center',
fontFamily: 'Inter',
fill: '#fff',
textAlign: 'center',}
)
newtext.setControlsVisibility({ mtr: false })
canvas.add(newtext)
canvas.setActiveObject(newtext)
canvas.renderAll()
https://stackoverflow.com/questions/51213760
复制相似问题