1. 首页
  2. 问答
  3. KineticJS和HTML5 - 拖动不工作

KineticJS和HTML5 - 拖动不工作

2012-10-26 29 views
3

我有一个KineticJS的问题 - 我的形状没有拖动。KineticJS和HTML5 - 拖动不工作

我的代码有什么问题？ - Iam真的卡住了，需要有人KineticJS-鲨鱼。

我的代码：

<!DOCTYPE HTML> 
<html> 
<head> 

<script src="kinetic-v4.0.4.min.js"></script> 
<script> 
window.onload = function() { 
var stage = new Kinetic.Stage({ 
container: "container", 
width: 1024, 
height: 768 
}); 
var layer = new Kinetic.Layer(); 
var spaceShip = new Kinetic.Shape({ 

drawFunc: function (context) { 

context.beginPath(); 
context.moveTo(99.3, 161.4); 
context.bezierCurveTo(99.3, 143.2, 92.5, 128.4, 84.2, 128.4); 
context.bezierCurveTo(83.6, 128.4, 83.1, 128.4, 82.6, 128.6); 
context.bezierCurveTo(76.5, 84.1, 53.0, 8.0, 53.0, 8.0); 
context.bezierCurveTo(53.0, 8.0, 29.6, 84.0, 23.5, 128.5); 
context.bezierCurveTo(23.0, 128.4, 22.6, 128.4, 22.2, 128.4); 
context.bezierCurveTo(13.8, 128.4, 7.0, 143.2, 7.0, 161.4); 
context.bezierCurveTo(7.0, 179.6, 22.2, 228.9, 22.2, 228.9); 
context.bezierCurveTo(22.2, 228.9, 27.2, 212.4, 31.5, 194.9); 
context.bezierCurveTo(37.1, 206.7, 44.7, 213.9, 53.0, 213.9); 
context.bezierCurveTo(61.5, 213.9, 69.1, 206.5, 74.7, 194.6); 
context.bezierCurveTo(79.0, 212.2, 84.2, 228.9, 84.2, 228.9); 
context.bezierCurveTo(84.2, 228.9, 99.3, 179.6, 99.3, 161.4); 
context.closePath(); 
context.fillStyle = "rgb(203, 203, 203)"; 
context.fill(); 


context.bezierCurveTo(37.9, 97.3, 42.4, 92.8, 48.0, 92.8); 
context.bezierCurveTo(53.7, 92.8, 58.2, 97.3, 58.2, 102.9); 
context.closePath(); 
context.fillStyle = "rgb(255, 255, 255)"; 
context.fill(); 


}, 


}); 


// add the shape to the layer 
layer.add(spaceShip); 

// add the layer to the stage 
stage.add(layer); 

spaceShip.setDraggable(true); 

spaceShip.on('dragstart', function() { 
    console.log("Drag start");  
}); 

spaceShip.on('dragend', function() { 
    console.log("Drag end");   
}); 




}; 
</script> 
</head> 
<body> 
<div id="container"></div> 
</body> 
</html>

（你还要我写的StackOverflow ???什么）

来源

2012-10-26 Morten Gustafsson

回答

1

试试这个下面的代码

<!DOCTYPE HTML> 
<html> 
<head> 

    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script> 

    <script> 
     window.onload = function() { 
      var stage = new Kinetic.Stage({ 
       container: "container", 
       width: 1024, 
       height: 768 
      }); 
      var layer = new Kinetic.Layer(); 

      var spaceShip = new Kinetic.Shape({ 
       drawFunc: function (context) { 
        context.beginPath(); 
        context.moveTo(99.3, 161.4); 
        context.bezierCurveTo(99.3, 143.2, 92.5, 128.4, 84.2, 128.4); 
        context.bezierCurveTo(83.6, 128.4, 83.1, 128.4, 82.6, 128.6); 
        context.bezierCurveTo(76.5, 84.1, 53.0, 8.0, 53.0, 8.0); 
        context.bezierCurveTo(53.0, 8.0, 29.6, 84.0, 23.5, 128.5); 
        context.bezierCurveTo(23.0, 128.4, 22.6, 128.4, 22.2, 128.4); 
        context.bezierCurveTo(13.8, 128.4, 7.0, 143.2, 7.0, 161.4); 
        context.bezierCurveTo(7.0, 179.6, 22.2, 228.9, 22.2, 228.9); 
        context.bezierCurveTo(22.2, 228.9, 27.2, 212.4, 31.5, 194.9); 
        context.bezierCurveTo(37.1, 206.7, 44.7, 213.9, 53.0, 213.9); 
        context.bezierCurveTo(61.5, 213.9, 69.1, 206.5, 74.7, 194.6); 
        context.bezierCurveTo(79.0, 212.2, 84.2, 228.9, 84.2, 228.9); 
        context.bezierCurveTo(84.2, 228.9, 99.3, 179.6, 99.3, 161.4); 
        context.closePath(); 
        this.fill(context); 
        this.stroke(context); 
       }, 
       draggable:true, 
       fill: "#00D2FF", 
       stroke: "black", 
       strokeWidth: 1 
      }); 

      // add the shape to the layer 
      layer.add(spaceShip); 

      // add the layer to the stage 
      stage.add(layer); 

      spaceShip.on('dragstart', function() { 
       console.log("Drag start"); 
       document.getElementById("display").innerHTML = "Drag start"; 
      }); 

      spaceShip.on('dragend', function() { 
       console.log("Drag end"); 
       document.getElementById("display").innerHTML = "Drag end"; 
      }); 

     }; 
    </script> 

</head> 
<body> 
<div id="container"></div> 
<div id="display"></div> 
</body> 
</html>

来源

2012-10-26 11:03:55

相关问题

 相关问题