如何多次使用 Pixastic jquery 旋转？答案

【问题标题】：How to rotate with Pixastic jquery more than once?如何多次使用 Pixastic jquery 旋转？
【发布时间】：2011-12-05 03:23:46
【问题描述】：

单击时我尝试旋转图像（使用 Pixastic），但我只能旋转 1 次，每次单击图像时如何继续旋转

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

【问题讨论】：

【解决方案1】：

我以前没有使用过 Pixastic。但是，我相信，每次点击图片，你都必须增加角度 90 。

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

更新：

似乎 Pixastic 先删除图像并重新插入。这就是 onClick 处理程序执行一次的原因。将其更改为“实时”，它将起作用。

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

在此处查看Demo :。

【讨论】：

【解决方案2】：

如果您想将其旋转超过 90 度，您还可以使用 HTML5 范围元素（或已弃用浏览器的解决方法（如 IE 9 及以下版本；-)）

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() });
}

向 Jacob Seidelin 致敬，感谢他的出色插件！

【讨论】：

顺便说一句，如果您使用范围，则应始终将“用户显示的图像”替换为备用图像，并对此进行 pixastic 魔术。如果你不这样做，旋转将不会是例如12 度，但 12 度到之前的 11 度等等......请注意，似乎存在像素旋转的错误。使用“更改”旋转图像效果很好，但如果旋转画布，则会由于内存泄漏导致多次重复和崩溃！因此，请确保您的备份图像是图像，而不是来自 pixastic 返回的画布的副本。