jQuery拖动并旋转到角度
|
我正在使用jQuery UI拖放图像。我还想将图像旋转360度，以便像在Photoshop中一样移动和旋转图像。我正在使用jQuery旋转插件在单击时旋转图像，但是我想选择一个角并拖动以将图像旋转到任何角度。
实时JS：http：//jsfiddle.net/87jaR/
JavaScript代码：
var test = 5;
$(function()
{
$(\'#rotate\').draggable({ containment: \'frame\' });
$(\'#frame img\').live(\'mousedown\', function(event)
{
test = test + 15;
$(this).rotate({ angle: test });
});
});
没有找到相关结果
已邀请:
5 个回复
拭十年
var dragging = false $(function() { var target = $(\'#target\') target.mousedown(function() { dragging = true }) $(document).mouseup(function() { dragging = false }) $(document).mousemove(function(e) { if (dragging) { var mouse_x = e.pageX; var mouse_y = e.pageY; var radians = Math.atan2(mouse_x - 10, mouse_y - 10); var degree = (radians * (180 / Math.PI) * -1) + 90; target.css(\'-moz-transform\', \'rotate(\' + degree + \'deg)\'); target.css(\'-moz-transform-origin\', \'0% 40%\'); target.css(\'-webkit-transform\', \'rotate(\' + degree + \'deg)\'); target.css(\'-webkit-transform-origin\', \'0% 40%\'); target.css(\'-o-transform\', \'rotate(\' + degree + \'deg)\'); target.css(\'-o-transform-origin\', \'0% 40%\'); target.css(\'-ms-transform\', \'rotate(\' + degree + \'deg)\'); target.css(\'-ms-transform-origin\', \'0% 40%\'); } })表示，可以用2）您可以通过改变ѭ6来改变旋转点 例如：将旋转点移到中心。苏髓骗撩
(function() { var RAD2DEG = 180 / Math.PI; var dial = $(\"#box\"); dial.centerX = dial.offset().left + dial.width()/2; dial.centerY = dial.offset().top + dial.height()/2; var offset, dragging=false; dial.mousedown(function(e) { dragging = true; offset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX); }) $(document).mouseup(function() { dragging = false }) $(document).mousemove(function(e) { if (dragging) { var newOffset = Math.atan2(dial.centerY - e.pageY, e.pageX - dial.centerX); var r = (offset - newOffset) * RAD2DEG; dial.css(\'-webkit-transform\', \'rotate(\' + r + \'deg)\'); } }) }());娠侈脚惮顽
膝垫富顷
$.fn.rotateAble = function() { var offset = null; var dragging = false; var RotationTarget = $(this); // Save target, cause $(this) doesn\'t work from MouseUp and MouseMove // Mouse var MouseDown = function(e) { dragging = true; offset = { x: e.pageX, y: e.pageY }; $(\"div#rotation\").text(\"MouseDown\"); }; var MouseUp = function() { dragging = false; $(\"div#rotation\").text(\"MouseUp\"); }; var MouseMove = function(e) { var mouse_x = e.pageX - offset.x; var mouse_y = e.pageY - offset.y; //$(\"div#rotation\").text(\"Move: \" + mouse_x + \" \" + mouse_y); if (dragging) { var radians = Math.atan2(mouse_x, mouse_y); var degree = (radians * (180 / Math.PI) * -1) + 90; RotationTarget.rotate(degree); //$(\"div#rotation\").text(degree); } }; // Touch var TouchStart = function(e) { var orig = e.originalEvent; var pos = $(this).position(); offset = { x: orig.changedTouches[0].pageX, y: orig.changedTouches[0].pageY }; }; var TouchMove = function(e) { e.preventDefault(); var orig = e.originalEvent; var mouse_x = orig.changedTouches[0].pageX - offset.x; var mouse_y = orig.changedTouches[0].pageY - offset.y; var radians = Math.atan2(mouse_x, mouse_y); var degree = (radians * (180 / Math.PI) * -1) + 90; $(this).rotate(degree); //$(\"div#rotation\").text(degree); }; this.bind(\"touchstart\", TouchStart); this.bind(\"touchmove\", TouchMove); $(this).bind(\"mousedown\", MouseDown); $(document).bind(\"mouseup\", MouseUp); $(document).bind(\"mousemove\", MouseMove); };脖呐