0

I'm using newest version of jquery's jcanvas plugin. When I rotate the object, it's x and y should change, but they don't. Should I call some method for those properties to be reset? I ommited script tags with reference to jquery, and jcanvas, since it's obvious they are there ;).

    <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>
Marek M.
  • 3,799
  • 9
  • 43
  • 93
  • What origin are you rotating it about? – Asad Saeeduddin Dec 29 '12 at 20:38
  • It's middle. I think it is the default behavior of this plugin. – Marek M. Dec 29 '12 at 20:40
  • You have an unclosed parenthesis. Could you please make a demonstration of the problem [here](http://calebevans.me/projects/jcanvas/sandbox.php)? – Asad Saeeduddin Dec 29 '12 at 20:44
  • I've pasted it wrong. In my code it's closed. And that's the demonstration: before rotation "myLayer" x, and y are respectively 80 and 120. After rotation they stay the same. – Marek M. Dec 29 '12 at 20:54
  • 1
    I realise that you've pasted it wrong, could you please edit the question to correct it and give me a link to a demonstration? – Asad Saeeduddin Dec 29 '12 at 20:59
  • Ok, one second - I'm trying to paste my code here (which is not that complicated) but stackoverflow says "Your post does not have much context to explain the code sections; please explain your scenario more clearly." Piece of s**t... – Marek M. Dec 29 '12 at 21:10
  • It is rotating about its center, so the x and y coordinates shouldn't change. What was your expected result? – Asad Saeeduddin Dec 29 '12 at 21:18
  • After rotation it's top left corner is in different place, so I expected (for this example) x ~ 30, y ~ 150 – Marek M. Dec 29 '12 at 21:22
  • Evidently the coordinates are still measured using the original orientation. The shape just appears to be rotated. – Asad Saeeduddin Dec 29 '12 at 21:34
  • Yeah, I know :). That's what this question is about - is there a method I should call, to reset the coordinates? Right now the only idea I came up with is not to rotate it, but delete this layer, and draw it rotated 90 degrees. Then I would have the correct coordinates. However this solution is harder than it should... – Marek M. Dec 29 '12 at 21:37
  • You could do that (using `rotateCanvas` -> `drawRect` -> `restoreCanvas`), but then the rotation would not be animated. You would have to manually time it and do it step by step. – Asad Saeeduddin Dec 29 '12 at 21:42
  • Actually the animation is just a nice feature, but I can get along without it. Nevermind... Thanks for your help anyway! – Marek M. Dec 29 '12 at 21:45
  • I [just tried](http://goo.gl/Ti2ry) this approach as well, but something very strange happens. If you mouse over the canvas, the layer suddenly reverts to its original position. Must be a bug in the library. – Asad Saeeduddin Dec 29 '12 at 21:50
  • Wow, this really is unexpected. Maybe it's a bug with sandbox? – Marek M. Dec 29 '12 at 22:31

1 Answers1

0

@Asad, in your Dec 29 '12 21:50 response, what were you trying to achieve with the ".restoreCanvas()" call? On my tests using your code (on both Chromium 23.0.1271.97 and FF 17.0.1 on Linux), that was the line that caused the mouse over behavior you described. Here's @Caleb531's documentation on that method: http://calebevans.me/projects/jcanvas/docs.php?p=restoreCanvas

dave_k_smith
  • 655
  • 1
  • 7
  • 22