我正在使用Fabricjs渲染椭圆和文本组。但是当我拖动到左上方和左上方时,文字就像您在镜子上观看文字一样。
这是Fiddle。
代码:
var gCanvas = new fabric.Canvas('canvDraw');
gCanvas.setWidth(500);
gCanvas.setHeight(500);
var myEllipse = new fabric.Ellipse({
top: 250,
left: 100,
rx: 75,
ry: 50,
fill: '#999999',
stroke: '#000000',
strokeWidth: 2
});
//gCanvas.add(myEllipse);
var myText = new fabric.Text("Some text", {
top: 250,
left: 250,
});
//gCanvas.add(myText);
// set up a listener for the event where the object has been modified
gCanvas.observe('object:modified', function (e) {
console.log(e);
var myObject = e.target;
if (!myObject._objects) {
return;
}
for (i in myObject._objects) {
myObject._objects[i].strokeWidth = 2 / Math.sqrt(myObject.scaleX * myObject.scaleY);
}
});
var group = new fabric.Group([ myEllipse, myText ], {
borderColor: 'black',
cornerColor: 'green'
});
gCanvas.add(group);
最佳答案
为避免结构对象水平或垂直翻转,可以将属性lockScalingFlip
设置为true
。