使用Fabricjs将文本反转到360度

Text getting reversed to 360 degrees using Fabricjs

本文关键字：360度 文本 Fabricjs 使用      更新时间：2023-09-26

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

相关文章：