KinectJS：通過拖放旋轉關於絕對旋轉點的圖像

我想用kinectJS旋轉關於絕對旋轉點的圖像。例如約KinectJS：通過拖放旋轉關於絕對旋轉點的圖像

var rotatePoint = {x: 500, y: 500}

通過點擊圖像並移動鼠標，即通過拖放圖像來初始化旋轉。 Therby它可以旋轉大約相同的角度，鼠標正在繪製。

昨天我整天在這個問題上工作，coudn't找到解決方案。

任何想法？

謝謝！

來源

2013-07-24 Michael Palm

謝謝！

我最終得到了線索。在下面的示例代碼的圖像imgObj圍繞

imgObj.rotPoint = {x: 500, y: 500}

這裏有幾個問題需要解決：你不能只設置一個絕對的旋轉點，你必須改變偏移相對於它的標準位置（圖像的左上邊緣）。然後，您必須將圖像移回，因爲偏移量的更改會移動圖像。

對於roation，我啓用了拖動並使用了dragBoundFunc。

設置

return {x: this.getAbsolutePosition().x, y: this.getAbsolutePosition().y};

將可以確定地告訴你，那也不會有真正的拖動 - 只是旋轉。

對於旋轉本身需要六個值：三個值在拖動開始時：

posMouseStart：鼠標
radMouseStart的XY位置：角正x軸和之間從旋轉點到posMouseStart弧度
radImageStart矢量：該圖像的當前旋轉（也許它已經旋轉？）

我通過綁定onmousedown獲得這些值，並通過僅在使用這些值時進行拖放。

該改變而拖放所有的時間

三個值：

posMouseNow：鼠標的右在那一刻XY位置
radMouseNow：正x軸和從矢量之間角度旋轉點posMouseStart弧度就在那一刻
radImageNow：圖像（？也許它已經被旋轉）的當前旋轉就在那一刻

我在dragBoundFunc中獲取這些值。

雖然使用Math.atan2（）獲取角度，但您必須注意，您不在xy座標系中，而是在x - （ - y）座標系中 - 因此請使用：Math.atan2（ -y，X）。

通過從radMouseNow中減去radMouseStart，您將獲得需要旋轉的角度，以便將圖像從開始位置移動到現在的位置。但是，當我們圍繞這個角度旋轉時，圖像會像瘋狂一樣旋轉。這是爲什麼？ - 圖像已經旋轉的「開始」和「現在」之間有幾個毫秒。所以：當你「現在」旋轉時，你不會從radMouseStart開始，而是從radImageNow開始 - radImageStart + radMouseStart。

\ O /所有的問題都解決了\ O/

代碼：

var imgObj = new Kinetic.Image 
       ({ 
         image: YourImg, 
         x: YourSize.x, 
         y: YourSize.y, 
         draggable: true 
       }); 
imgObj.rotPoint = {x: 500, y: 500}; 
imgObj.setOffset 
(
    imgObj.rotPoint.x - imgObj.getAbsolutePosition().x, 
    imgObj.rotPoint.y - imgObj.getAbsolutePosition().y 
); 
imgObj.move(imgObj.getOffsetX(),imgObj.getOffsetY()); 
var o = {x: imgObj.rotPoint.x, y: imgObj.rotPoint.y}; // shortcut 
imgObj.on('mousedown', function() 
         { 
          posMouseStart = stage.getMousePosition(); 
          radMouseStart = Math.atan2(-(posMouseStart.y - o.y), posMouseStart.x - o.x); 
          radImageStart = this.getRotation(); 
         }); 
imgObj.setDragBoundFunc(function(pos) 
         { 
          var posMouseNow = stage.getMousePosition(); 
          var radMouseNow = Math.atan2(-(posMouseNow.y - o.y), posMouseNow.x - o.x); 
          var radImageNow = this.getRotation(); 

          var radMouseDiff = -(radMouseNow - radMouseStart); 

          this.rotate(radImageStart + radMouseDiff - radImageNow); 

          return {x: this.getAbsolutePosition().x, y: this.getAbsolutePosition().y}; 
         });

來源

2013-07-24 15:18:42

可以圍繞固定的旋轉點使用一些三角移動圖像

使用計算相對於旋轉點的鼠標的位置的角度Math.atan2：

var dx=mouseX-rotationPointX; 
    var dy=mouseY-rotationPointY; 
    var radianAngle=Math.atan2(dy,dx);

移動圖像使用Math.cos和Math.sin圍繞旋轉點：

var x=rotationPointX+radius*Math.cos(radianAngle)-imgWidth/2; 
    var y=rotationPointY+radius*Math.sin(radianAngle)-imgHeight/2; 
    image.setPosition(x,y);

下面是工作示例代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script> 

<style> 
body{ padding:15px; } 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:300px; 
    height:300px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 300, 
     height: 300 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    var rx=150; 
    var ry=150; 
    var radius=75; 

    var image;; 
    var imgWidth=50; 
    var imgHeight=50; 

    var rotationPoint=new Kinetic.Circle({ 
     x:rx, 
     y:ry, 
     radius:10, 
     fill:"green" 
    }); 
    layer.add(rotationPoint); 


    $(stage.getContent()).on('mousemove', function (event) { 

     // get the current mouse position on the stage 
     var pos=stage.getMousePosition(); 
     var mouseX=parseInt(pos.x); 
     var mouseY=parseInt(pos.y); 

     // calculate the mouse angle relative 
     // to the rotation point [rx,ry] 
     var dx=mouseX-rx; 
     var dy=mouseY-ry; 
     var radianAngle=Math.atan2(dy,dx); 

     // "normalize" the angle so it always is in a proper range (0-2*PI) 
     radianAngle=(radianAngle+Math.PI*2)%(Math.PI*2); 

     // calculate the new image x,y 
     // based on the angle 
     var x=rx+radius*Math.cos(radianAngle)-imgWidth/2; 
     var y=ry+radius*Math.sin(radianAngle)-imgHeight/2; 
     image.setPosition(x,y); 

     layer.draw(); 
    }); 


    var img=new Image(); 
    img.onload=function(){ 
     image=new Kinetic.Image({ 
      image:img, 
      x:0, 
      y:0, 
      width:imgWidth, 
      height:imgHeight, 
     }); 
     layer.add(image); 
     layer.draw(); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png"; 


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <p>Move mouse to rotate image around</p> 
    <p>the green dot which is located at</p> 
    <p>the rotation point</p> 
    <div id="container"></div> 
</body> 
</html>

來源

2013-07-24 08:45:05 markE

KinectJS：通過拖放旋轉關於絕對旋轉點的圖像

回答

相關問題