Question

我希望旋转图片，使其像tympanus's swatchbook一样工作但我宁愿不使用和CSS 3一样，因为之前的链接需要我宁愿在js上进行所有旋转，每个实例使用JQueryRotate，除了旋转点之外，它是以te图像为中心的。

我不想指出一个能够完成它的库，我想学习一个很好的图像旋转方法，特别是如何在该方法中改变旋转点，这样我才能实现swatchbook我想要的效果。

但是如果你知道一个能够做到这一点的图书馆，我也非常喜欢它。

感谢

修改

在写这个问题时我意识到了什么。我可以放大那个图像的持有者。 althoug不是很亮也不优雅，或者非常好，它是一个开始。我将检查x3ro：Image rotation algorithm

所做的消化

html片段：

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="dvImg" style="position:relative;border: 1px solid black;">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image" style="position:absolute;top:0;left:12px;margin:auto;border: 1px solid black;">
<div>

js片段：

$("#dvImg").width($("#image").width()*2);
$("#dvImg").height($("#image").height()*2);
$("#image").css({ left: $("#image").width() + "px", top: $("#image").height()});

$("#image").mouseover(function() {
    $("#dvImg").rotate({animateTo:90});
});

Answer 1

如果您想自己进行轮换，请查看以下问题：Image rotation algorithm。当然，它不是JavaScript特定的解释，但它应该或多或少地易于转换为基于画布的解决方案。我没有看过jQueryRotate实现，但它可能也值得研究。

也就是说，可能没有关于“如何使用左下角的枢轴点旋转图像”的JavaScript特定教程：D

正如@Jasper所指出的那样，知道尽管在IE9之前的IE版本中不支持canvas本身可能会很好，但是有一些方法和手段可以获得canvas API的一大部分内容。即使在早期版本中，正如ExplorerCanvas所示。

在不使用CSS3的情况下围绕左下边缘枢轴旋转图像

1 个答案: