Question

我有一个缩放和倾斜的织物椭圆对象。我想重新创建相同的椭圆，没有缩放和倾斜。我认为这可以通过计算rx，ry和angle的新值来实现，方法是取消缩放和偏移值。我设法抵消了缩放值，但我无法计算出偏移偏移值的计算。

提前感谢您的帮助。

Jsfiddle - https://jsfiddle.net/jwp2yysh/

请参阅示例代码。我希望蓝色椭圆与红色椭圆内联。

var canvas = new fabric.Canvas('c');

var redEllipse = new fabric.Ellipse({
  rx: 80,
  ry: 50,
  originX: 'center',
  originY: 'center',
  fill: '',
  stroke: 'red',
  strokeWidth: 1,
  top: 180,
  left: 240,
  angle: 30,
  scaleX: 1.23,
  scaleY: 1.4,
  skewX: 25,
  skewY: 0
});

canvas.add(redEllipse);

var blueEllipse = new fabric.Ellipse({
  rx: redEllipse.rx * redEllipse.scaleX,
  ry: redEllipse.ry * redEllipse.scaleY,
  originX: 'center',
  originY: 'center',
  fill: '',
  stroke: 'blue',
  strokeWidth: 1,
  top: redEllipse.top,
  left: redEllipse.left,
  angle: redEllipse.angle * redEllipse.scaleY / redEllipse.scaleX,
  scaleX: 1,
  scaleY: 1,
  skewX: 0,
  skewY: 0
});

canvas.add(blueEllipse);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>

Answer 1

我假设您正在寻找类似JSFiddle的内容。

var canvas = new fabric.Canvas('c');

var redEllipse = new fabric.Ellipse({
  rx: 80,
  ry: 50,
  originX: 'center',
  originY: 'center',
  fill: '',
  stroke: 'red',
  strokeWidth: 1,
  top: 180,
  left: 240,
  angle: 30,
  scaleX: 1.23,
  scaleY: 1.4,
  skewX: 0,
  skewY: 0
});

canvas.add(redEllipse);

var blueEllipse = new fabric.Ellipse({
  rx: redEllipse.rx * redEllipse.scaleX - 10,
  ry: redEllipse.ry * redEllipse.scaleY - 10,
  // rx:80*1.23,
  //ry:50*1.4,
  originX: 'center',
  originY: 'center',
  fill: '',
  stroke: 'blue',
  strokeWidth: 1,
  top: redEllipse.top,
  left: redEllipse.left,
  angle: redEllipse.angle,
  //angle:30,
  scaleX: 1,
  scaleY: 1,
  skewX: 0,
  skewY: 0
});

canvas.add(blueEllipse);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>

根据我的理解，您对rx和ry的计算是正确的。使用您在代码中提到的公式计算angle的问题可能没有考虑到原始椭圆的偏斜。

更简单的方法是复制角度redEllipse.angle以使新椭圆内联。

要将其设置为原始值，您只需要通过一些公共因子（我使用rx）来减少ry和10值。

重置结构对象中的偏斜值

1 个答案: