旋转画布只是第一次工作答案

【问题标题】：Rotating a canvas is only working the first time旋转画布只是第一次工作
【发布时间】：2012-02-11 00:01:10
【问题描述】：

我试图在每次鼠标悬停时旋转画布，但它只在第一次工作。
你可以在这里玩：http://jsfiddle.net/h3Z7j/2/

我将其旋转 0 度的原因是在加载时将其转换为画布，因为我是第一次加载 img。

旋转脚本：http://code.google.com/p/jquery-rotate/downloads/detail?name=jquery.rotate.1-1.js

<div class="gameboard">
    <img width="40" height="40" id="1-1" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="2-1" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="1-2" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="2-2" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
</div>

$(document).ready(function () {
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard canvas").mouseover(function () {
        $(this).rotateLeft();
    });
});

编辑
如果有其他更好的轮换脚本，我会很乐意更改。

【问题讨论】：

我不知道rotateLeft()方法对你的img做了什么，但是这个方法执行后可能还有另一个命名。
我不应该在旋转后的画布上应用一些东西吗？我不确定如何。 mouseover->rotateLeft->add new mouse over
到目前为止，您是否查看过这个库的文档？

标签： jquery canvas rotation

【解决方案1】：

根据 Rory 的回答，您可以通过在鼠标悬停/鼠标悬停时将标志设置为真/假来实现每次鼠标悬停旋转：

$(document).ready(function () {
    var stopSpin = false;
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard").delegate('canvas', 'mouseover', function () {
        if (!stopSpin){
            $(this).rotateLeft();
        }
        stopSpin = true;
    });
    $(".gameboard").delegate('canvas', 'mouseout', function () {
        stopSpin = false;
    });
});

见：http://jsfiddle.net/CK5hh/

【讨论】：

【解决方案2】：

问题是因为 canvas 元素被删除，然后被读取到 DOM。这将丢失放置在其上的 mouseover 处理程序。如果您改为使用delegate 附加您的活动，它会起作用：

$(document).ready(function () {
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard").delegate('canvas', 'mouseover', function () {
        $(this).rotateLeft();
    });
});

虽然我不确定效果是否正是你所追求的 :)

Example fiddle

【讨论】：

看起来只要鼠标悬停，画布就会旋转。我希望它只打开一次鼠标悬停然后停止。
问题是因为插件正在将元素删除/添加到 DOM。即使鼠标没有移动，因为在它下面创建了一个新元素，事件也会被触发。这意味着元素将不断旋转。如果不修改创建 canvas 元素的插件的源代码，我认为没有解决此问题的方法。