重置结构对象中的偏斜值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重置结构对象中的偏斜值相关的知识，希望对你有一定的参考价值。
我有一个织物椭圆物体，它被缩放和倾斜。我想重新创建相同的椭圆，没有缩放和倾斜。我假设这可以通过计算缩放和偏斜值来计算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>答案
我假设你正在寻找像这样的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>以上是关于重置结构对象中的偏斜值的主要内容，如果未能解决你的问题，请参考以下文章