切换角度以将文本移动到 fabricjs 中的原始位置答案

【问题标题】：Toggle angle to move text to original position in fabricjs切换角度以将文本移动到 fabricjs 中的原始位置
【发布时间】：2013-09-06 06:22:00
【问题描述】：

在按钮的fabricjs、onclick 中，我设置了一些角度来翻转文本。我想让它在下一次点击时切换文本应该回到原来的状态。在下面的代码中，如果部分运行良好，我应该如何将其切换回来？

fiddle

JQuery 代码：

 $('#font_flipx').click(function() {

    if(flipx==0)
    {
        console.log('flipx=0');
    canvas.getActiveObject().set("angle", "180").set('flipX', true);
    flipx=1;
    }
    else
    {

    console.log('flipx=1');
    canvas.getActiveObject().set("angle", "180").set('flipX', true);
    flipx=0;
    }

    canvas.renderAll();


});

【问题讨论】：

@koala_dev 设置 0 不起作用...文本仍然显示为镜像
预期的行为是什么？您想在第一次单击时旋转和翻转并在下一次返回默认值吗？像这样jsfiddle.net/koala_dev/vnzhq/4 ?
@koala_dev 你帮了我:) .. 正如你所说，将角度更改为 0 这不适用于我的日志 if-else jsfiddle.net/vnzhq/5 代码，不知道为什么？ bt 你真的给了我简短而甜蜜的代码
很高兴为您提供帮助。我已经发布了答案，如果您的问题已经解决，请接受它

标签： jquery html css canvas fabricjs

【解决方案1】：

你需要使用你的flag变量来调整角度和flipx参数，你可以将你的代码缩短为：

var flipx = false;
document.getElementById("button").onclick = function () {
    flipx = !flipx;
    canvas.getActiveObject().set("angle", flipx ? "180" : "0").set('flipX', flipx);
    canvas.renderAll();
};

【讨论】：