如何在Kinetic.js中實現旋轉和拖放？

我需要一個代碼來做以下事情：我有一個圖像定義爲Kinetic.Image，並且這個圖像應該旋轉;我必須使用這個圖像的拖放，但旋轉不允許拖放。你可以給我一個代碼來做到這一點？我搜索了一些教程，但他們不幫助我。謝謝如何在Kinetic.js中實現旋轉和拖放？

來源

2013-07-27 Joe Matt

KineticJS圖像既可以拖動也可以旋轉。

enter image description here

對於「滴」，你可以聽像這樣在圖像上放置事件：

kImage.on('dragend', function() { 

     // do your drop tests here 

    });

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/eCekf/

<!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> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:400px; 
    height:400px; 
} 
</style>   
<script> 
$(function(){ 

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

    var kImage; 

    var img=new Image(); 
    img.onload=function(){ 
     kImage=new Kinetic.Image({ 
      image:img, 
      x:175, 
      y:175, 
      width:150, 
      height:150, 
      offset:[75,75], 
      draggable:true 
     }); 
     layer.add(kImage); 
     kImage.rotate(30*Math.PI/180); 
     layer.draw(); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png"; 


    $("#rotate").click(function(){ 
     kImage.rotate(kImage.getRotation()+20*Math.PI/180); 
     layer.draw(); 
    }); 

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

</script>  
</head> 

<body> 
    <div id="container"></div> 
    <button id="rotate">Rotate</button> 
</body> 
</html>

來源

2013-07-27 18:49:18 markE

謝謝你的答案..但我的意思是作爲運動的旋轉：圖像在圓環軌跡上移動！你可以幫我嗎？ –

當然，只要改變偏移就可以繞任何你想要的點旋轉。看到我編輯的小提琴：http://jsfiddle.net/m1erickson/eCekf/這圍繞圖像的初始x/y旋轉200,200。如果將圖像拖到新位置，它將圍繞新的x/y旋轉。 – markE

如何在Kinetic.js中實現旋轉和拖放？

回答

相關問題