如何在Kinetic.js中实现旋转和拖放？

Question

I need a code to do the follow things: I've an image definited to Kinetic.Image, and this image should rotate; 我需要执行以下操作的代码：我有一个定义为Kinetic.Image的图像，并且该图像应该旋转； I have to use the drag and drop on this image, but the rotation doesn't allow the drag and drop. 我必须在该图像上使用拖放，但是旋转不允许拖放。 Can you give me a code to do this? 你能给我一个代码来做到这一点吗？ I searched some tutorials but they don't help me. 我搜索了一些教程，但它们对我没有帮助。 Thank you 谢谢

Answer 1

KineticJS images are both draggable and rotatable already. KineticJS图像既可拖动又可旋转。

在此处输入图片说明

For the "drop", you can listen for the drop event on the image like this: 对于“放置”，您可以像这样监听图像上的放置事件：

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

      // do your drop tests here

  });

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/eCekf/ 这是代码和小提琴： 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>

如何在Kinetic.js中实现旋转和拖放？

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-07-27 18:49:18

如何在Kinetic.js中实现旋转和拖放？

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-07-27 18:49:18

解决方案1
1 已采纳 2013-07-27 18:49:18