我正在使用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

08-08 09:05