1

I try to rotate my image when I click(using Pixastic) but I can only rotate 1 time, how can I go on rotating each time I click to the image

$('#tok').click(function() {
                $("#tok").pixastic("rotate", {angle:90});                   
            });
wallace740
  • 1,380
  • 5
  • 19
  • 36

2 Answers2

2

I have NOT used Pixastic before. But, I believe, everytime the image is clicked , you have to increase the angle 90 . 

First Click -> 90 
Second Click->180 
Third Click ->270
Fourth Click ->360
Fifth Click ->90..etc

Updated:

It seems Pixastic remove the image first and insert it again. That's why onClick handler is executed once. Change it to "live" and it will work. 

$('#tok').live('click',function() {
     $(this).pixastic("rotate", {angle:90});                 
});

Check Demo : here.

Kai
  • 2,967
  • 1
  • 22
  • 28
  • That's what I;m trying to do but only first 90 degree rotation is working. Second, third click doesnt do anything :( – wallace740 Oct 11 '11 at 09:27
0

If you want to rotate it finer than 90 degree, you could also use the HTML5 range Element (or a workaround for deprecated browsers ( like IE 9 and below ;-) )

HTML (5)

<input type="range" id="rotate" min="-180" max="180" value="0" step="1">

jQuery

$('.rotate').live('change', function(){
    $('img').pixastic("rotate", {angle: $(this).val() });
}

Kind regards to Jacob Seidelin for his great plugin!

netzaffin
  • 1,602
  • 3
  • 13
  • 14
  • BTW, if you use range, you should always replace the "user shown image" with an backup image and do the pixastic magic on this. If you dont do it, the rotation wont be e.g. 12 degree but 12 degree to the 11 degree before and so on... and note, it seems there is a bug with pixastic rotation. Rotate an IMAGE with "change" works fine, but if you rotate an CANVAS, it makes multiple duplicates and crashes due memory leak! So be sure your backup Image is an Image, not a copy from the pixastic returned canvas. – netzaffin Oct 27 '11 at 09:37