使用 Fabricjs 将文本反转为 360 度

Question

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

Answer 1

为了避免织物对象水平或垂直翻转，属性 lockScalingFlip 可以设置为 true。

使用 Fabricjs 将文本反转为 360 度

Text getting reversed to 360 degrees using Fabricjs

javascript

html5-canvas

fabricjs