旋转后出现FlipX或FlipY

时间:2018-08-23 13:26:41

标签: fabricjs

我正在尝试使“翻转”选项的功能类似于任何可视化编辑器(即Photoshop,MS Word),在这种情况下,翻转命令会考虑用户可能进行的任何旋转。

我一直在尝试获取当前旋转值,然后在旋转时应用负值,但这仍然存在问题。

group.toggle('flipY');
var angle = group.get('angle')
var negangle = 0 - angle;
group.set("angle", negangle);
canvas.renderAll();

这是我的JSFiddle:http://jsfiddle.net/hellohudson/2gkjb5za/ (感谢Tim Hardy's initial fiddle我进行了调整。)

1 个答案:

答案 0 :(得分:0)

您快到了!由于组对象的默认原点在左上角,因此位置在更改。通过将组对象的originXoriginY都设置为center,组的中心将被用于定位,在翻转过程中该位置不会改变。在此处查看有关起源的更多信息:Origins Documentation

此外,不要忘记在更改setCoords()flipX之类的属性时随时调用flipY,以便重新计算控件位置。

http://jsfiddle.net/melchiar/wok0n3yc/