如何在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中实现旋转和拖放？

回答

相关问题