使图像可旋转jquery UI

Question

世界各地的程序员。我正在建立一个在线名片编辑器。用户可以添加图片，例如徽标并移动它或使用它调整大小        jquery draggable（）和resizable（）。

这是完美的。但我的客户坚持认为该工具应该允许用户旋转图像或元素。使用'Rotatable（）'。我知道在Jquery UI中没有什么可以像旋转一样。但我看到一些旋转元素的在线工具。我只是不知道该怎么做。提前致谢

Answer 1

您可以查看以下代码

＆＃13;

＆＃13;

var img = $('.image');
if(img.length > 0){
    var offset = img.offset();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    $(document).mousemove(mouse);
}

＆＃13;

#apDiv1 {
    position:absolute;
    width:400px;
    height:327px;
    z-index:1;
    left: 105px;
    top: 38px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="apDiv1"><img src="http://iconizer.net/files/DefaultIcon_ver_0.11/orig/arrow-up.png" class="image"/>
</div>

＆＃13;

＆＃13;

＆＃13;