使用ThreeDubMedia Drag旋转/变换元素

时间：2014-08-21 10:00:44

标签： javascript jquery

原始小提琴 - http://liveweave.com/7dKduz
拖动/调整大小/旋转小提琴 - http://liveweave.com/4EW0Hy
拖动/旋转（X＆amp; Y） - http://liveweave.com/E4MCh4

我正在使用ThreeDubMedia's Drag Plugin

进行旋转元素的实验

enter image description here

在ThreeDubMedia的网站上有一个名为circular的演示。

我试图旋转它的宽度和高度的样本元素是不同的。因此半径不起作用。

这是一个很好的演示但是我不确定如何将这个交互式旋转结合到我的实验中。

我遇到了jquery.ui.rotatable.js（demo here），这正是我想要弄清楚的。除了使用JQuery UI库，我正在使用ThreeDubMedia's Drag Plugin。

我使用360 Degree Angular Slider之前（.each）制作/完成了360次旋转我一直在努力尝试使用此插件但是只要调用旋转并且我使用rotateX或rotateY after（与其他演示相同的缩放）主旋转被调用。

var FinalizeRotation = function() {
  if (($("#rotate").val() === "") && ($("#rotateX").val() === "")) {
    $("#rotateFinal").val($("#rotateY").val());
  } else if (($("#rotate").val() === "") && ($("#rotateY").val() === "")) {
    $("#rotateFinal").val($("#rotateX").val());
  } else if (($("#rotateX").val() === "") && ($("#rotateY").val() === "")) {
    $("#rotateFinal").val($("#rotate").val());
  } else if ($("#rotate").val() === "") {
    $("#rotateFinal").val($("#rotateX").val() + " " + $("#rotateY").val());
  } else if ($("#rotateX").val() === "") { 
    $("#rotateFinal").val($("#rotate").val() + " " + $("#rotateY").val());
  } else if ($("#rotateY").val() === "") {
    $("#rotateFinal").val($("#rotate").val() + " " + $("#rotateX").val());
  } else {
    $("#rotateFinal").val($("#rotate").val() + " " + $("#rotateX").val() + " " + $("#rotateY").val());
  }
};

// Handles Drag and RotateX & RotateY
$('.element').drag('start',function( ev, dd ){
  dd.attr = $( ev.target ).prop("className");
}).drag(function( ev, dd ) {
  var props = {};
  if ( dd.attr.indexOf("E") > -1 ){
    $("#rotateX").val("rotateX(" + Math.max( 32, ev.pageY ) + "deg)").change();
  }
  if ( dd.attr.indexOf("S") > -1 ){
    $("#rotateY").val("rotateY(" + Math.max( 32, ev.pageX ) + "deg)").change();
  }
  if ( dd.attr.indexOf("W") > -1 ){
    $("#rotateX").val("rotateX(" + Math.max( 32, ev.pageY ) + "deg)").change();
  }
  if ( dd.attr.indexOf("N") > -1 ){
    $("#rotateY").val("rotateY(" + Math.max( 32, ev.pageX ) + "deg)").change();
  }
  if ( dd.attr.indexOf("element") > -1 ){
    props.top = dd.offsetY;
    props.left = dd.offsetX;
  }
  $( this ).css( props );
});

// Rotate 360 Degrees 
$(".rotatable").on("mousedown touchstart", function() {
  $(".element").each(function() {
    var container = $(this),
        body = $(document),
        angler = container.find(".rotatable").parent();

    angler.on("mousedown touchstart", mouseDown);
    body.on("mouseup touchend", mouseUp);

    function setAngle(value) {
      $("#rotate").val("rotate("+ value +"deg)").change();
    }

    function mouseDown(event) {
      body.on("mousemove.rotatable", handleMove);
      body.on("touchmove.rotatable", handleMove);
      handleMove(event);
      event.preventDefault();
    }

    function mouseUp(event) {
      body.off("mousemove.rotatable", handleMove);
      body.off("touchmove.rotatable", handleMove);
    }

    function handleMove(event) {
      var mouseX = event.pageX;
      var mouseY = event.pageY;

      setAngle(0);
      var ofs = angler.offset();
      ofs.left += angler.height()/2;
      ofs.top += angler.width()/2;

      var x = mouseX - ofs.left;
      var y = mouseY - ofs.top;

      var angle = Math.atan2(x, y) * 180 / Math.PI;
      angle = 180 - angle;
      // strip decimal, go between 0-360
      angle = ((angle + 360) | 0) % 360;
      setAngle(angle);
    }
  });
});

// Finalize Rotation For Selected Element
$(".handlerotate").on('keyup change', function() {
    FinalizeRotation();
    $(".element").css("transform", $("#rotateFinal").val());
});

1 个答案:

答案 0 :(得分：0)

拖动/旋转/调整大小= http://liveweave.com/ik8TB5
（包括My New RotateMe插件）： http://jsbin.com/zeguyipizizi/1/edit
拖动/旋转/旋转X /旋转Y = http://jsbin.com/dusacabobupa/1/edit
http://liveweave.com/vLYVUW

拖动/旋转/调整大小= http://liveweave.com/ik8TB5
拖动/旋转/旋转X /旋转Y = http://liveweave.com/vLYVUW

我能弄清楚如何使其工作的唯一方法是调用变量rotateable并调用true / 1或false来启用/禁用旋转方法。

这不是最好的方法，但我还没有找到另一种方法来实现这一目标。

<强>拖/旋转/调整大小 

var rotateable = false;

$('.element').drag('start',function( ev, dd ){
  dd.attr = $( ev.target ).prop("className");
  dd.width = $( this ).width();
  dd.height = $( this ).height();
}).drag(function( ev, dd ) {
  var props = {};
  if ( dd.attr.indexOf("E") > -1 ){
    props.width = Math.max( 32, dd.width + dd.deltaX );
  }
  if ( dd.attr.indexOf("S") > -1 ){
    props.height = Math.max( 32, dd.height + dd.deltaY );
  }
  if ( dd.attr.indexOf("W") > -1 ){
    props.width = Math.max( 32, dd.width - dd.deltaX );
    props.left = dd.originalX + dd.width - props.width;
  }
  if ( dd.attr.indexOf("N") > -1 ){
    props.height = Math.max( 32, dd.height - dd.deltaY );
    props.top = dd.originalY + dd.height - props.height;
  }
  if ( dd.attr.indexOf("element") > -1 ){
    props.top = dd.offsetY;
    props.left = dd.offsetX;
  }
  $( this ).css( props );
});

// Rotate 360 Degrees 
$(".rotatable").on("mousedown touchstart", function() {
  rotateable = 1;
  if (rotateable) {
    $(".element").each(function() {
      var container = $(this),
          body = $(document),
          angler = container.find(".rotatable").parent();

      angler.on("mousedown touchstart", mouseDown);
      body.on("mouseup touchend", mouseUp);

      function setAngle(value) {
        angler.css("transform", "rotate(" + value + "deg)").change();
      }

      function mouseDown(event) {
        body.on("mousemove.rotatable", handleMove);
        body.on("touchmove.rotatable", handleMove);
        handleMove(event);
        event.preventDefault();
      }

      function mouseUp(event) {
        body.off("mousemove.rotatable", handleMove);
        body.off("touchmove.rotatable", handleMove);
        rotateable = false;
      }

      function handleMove(event) {
        if (rotateable) {
          var mouseX = event.pageX;
          var mouseY = event.pageY;

          setAngle(0);
          var ofs = angler.offset();
          ofs.left += angler.height()/2;
          ofs.top += angler.width()/2;

          var x = mouseX - ofs.left;
          var y = mouseY - ofs.top;

          var angle = Math.atan2(x, y) * 180 / Math.PI;
          angle = 180 - angle;
          // strip decimal, go between 0-360
          angle = ((angle + 360) | 0) % 360;
          setAngle(angle);
        }
      }
    }); 
  }
});

<强>拖/旋转/ RotateX /旋转Y 

var FinalizeRotation = function() {
  if (($("#rotate").val() === "") && ($("#rotateX").val() === "")) {
    $("#rotateFinal").val($("#rotateY").val());
  } else if (($("#rotate").val() === "") && ($("#rotateY").val() === "")) {
    $("#rotateFinal").val($("#rotateX").val());
  } else if (($("#rotateX").val() === "") && ($("#rotateY").val() === "")) {
    $("#rotateFinal").val($("#rotate").val());
  } else if ($("#rotate").val() === "") {
    $("#rotateFinal").val($("#rotateX").val() + " " + $("#rotateY").val());
  } else if ($("#rotateX").val() === "") { 
    $("#rotateFinal").val($("#rotate").val() + " " + $("#rotateY").val());
  } else if ($("#rotateY").val() === "") {
    $("#rotateFinal").val($("#rotate").val() + " " + $("#rotateX").val());
  } else {
    $("#rotateFinal").val($("#rotate").val() + " " + $("#rotateX").val() + " " + $("#rotateY").val());
  }
};

// Handles Drag and RotateX & RotateY
$('.element').drag('start',function( ev, dd ){
  dd.attr = $( ev.target ).prop("className");
}).drag(function( ev, dd ) {
  var props = {};
  if ( dd.attr.indexOf("E") > -1 ){
    $("#rotateX").val("rotateX(" + Math.max( 32, ev.pageY ) + "deg)").change();
  }
  if ( dd.attr.indexOf("S") > -1 ){
    $("#rotateY").val("rotateY(" + Math.max( 32, ev.pageX ) + "deg)").change();
  }
  if ( dd.attr.indexOf("W") > -1 ){
    $("#rotateX").val("rotateX(" + Math.max( 32, ev.pageY ) + "deg)").change();
  }
  if ( dd.attr.indexOf("N") > -1 ){
    $("#rotateY").val("rotateY(" + Math.max( 32, ev.pageX ) + "deg)").change();
  }
  if ( dd.attr.indexOf("element") > -1 ){
    props.top = dd.offsetY;
    props.left = dd.offsetX;
  }
  $( this ).css( props );
});

// Rotate 360 Degrees 
$(".rotatable").on("mousedown touchstart", function() {
  rotateable = 1;

  if (rotateable) {
    $(".element").each(function() {
      var container = $(this),
          body = $(document),
          angler = container.find(".rotatable").parent();

      angler.on("mousedown touchstart", mouseDown);
      body.on("mouseup touchend", mouseUp);

      function setAngle(value) {
        $("#rotate").val("rotate("+ value +"deg)").change();
      }

      function mouseDown(event) {
        body.on("mousemove.rotatable", handleMove);
        body.on("touchmove.rotatable", handleMove);
        handleMove(event);
        event.preventDefault();
      }

      function mouseUp(event) {
        body.off("mousemove.rotatable", handleMove);
        body.off("touchmove.rotatable", handleMove);
        rotateable = false;
      }

      function handleMove(event) {
        if (rotateable) {
          var mouseX = event.pageX;
          var mouseY = event.pageY;

          setAngle(0);
          var ofs = angler.offset();
          ofs.left += angler.height()/2;
          ofs.top += angler.width()/2;

          var x = mouseX - ofs.left;
          var y = mouseY - ofs.top;

          var angle = Math.atan2(x, y) * 180 / Math.PI;
          angle = 180 - angle;
          // strip decimal, go between 0-360
          angle = ((angle + 360) | 0) % 360;
          setAngle(angle);
        }
      }
    });
  }
});

$(".handlerotate").on('keyup change', function() {
  FinalizeRotation();
  $(".element").css("transform", $("#rotateFinal").val());
});
相关问题
最新问题