Jquery 的 jcanvas 插件 - 旋转后对象的 x 和 y 不改变答案

【问题标题】：Jquery's jcanvas plugin - after rotation x and y of the object doesn't changeJquery 的 jcanvas 插件 - 旋转后对象的 x 和 y 不改变
【发布时间】：2012-12-14 16:12:19
【问题描述】：

我正在使用最新版本的 jquery 的 jcanvas 插件。当我旋转对象时，它的 x 和 y 应该改变，但它们没有。我应该调用一些方法来重置这些属性吗？我省略了参考 jquery 和 jcanvas 的脚本标签，因为很明显它们就在那里；）。

    <head>
        <style type="text/css">
            canvas { border: 1px solid black; width: 400px; height: 400px; margin: 0 auto; }
        </style>

        <script type="text/javascript">

            $(function() {
                var cfg = {
                    strokeStyle : "#000",
                    strokeWidth : 1,
                    fillStyle : "#FF7400",
                    group : "objects",
                    cursor : "pointer",
                    x : 100, 
                    y : 100,
                    width : 40,
                    height : 200,
                    fromCenter : false,
                    cornerRadius : 5,
                    layer : true,
                    draggable : true,
                    bringToFront : true,
                };

                $("#mine").drawRect(cfg);

                console.log($("#mine").getLayer(0).x);
                console.log($("#mine").getLayer(0).y);

                $("#mine").animateLayer(0, {
                    rotate : "+=90",
                }, "fast");

                console.log($("#mine").getLayer(0).x);
                console.log($("#mine").getLayer(0).y);
            });

        </script>
    </head>
    <body>
        <div id="wrap">
            <canvas width="400" height="400" id="mine">

            </canvas>
        </div>
    </body>

【问题讨论】：

你旋转它的原点是什么？
中间。我认为这是这个插件的默认行为。
您有一个未闭合的括号。能否请您演示一下问题here？
我贴错了。在我的代码中它是关闭的。这就是演示：在旋转之前，“myLayer”x 和 y 分别为 80 和 120。旋转后它们保持不变。
我知道你贴错了，你能编辑问题更正它并给我一个演示链接吗？

标签： jquery html5-canvas jcanvas

【解决方案1】：

@Asad，在您 2012 年 12 月 29 日 21:50 的回复中，您试图通过“.restoreCanvas()”调用实现什么目标？在我使用您的代码进行的测试中（在 Linux 上的 Chromium 23.0.1271.97 和 FF 17.0.1 上），这就是导致您描述的鼠标悬停行为的行。这是@Caleb531 关于该方法的文档：http://calebevans.me/projects/jcanvas/docs.php?p=restoreCanvas

【讨论】：