KineticJS 및 HTML5 - 드래그 작업을하지 마십시오.

KineticJS에 문제가 있습니다. 내 모양에 드래그가 없습니다.KineticJS 및 HTML5 - 드래그 작업을하지 마십시오.

내 코드가 잘못되었습니다. - 정말로 갇혀 있고 누군가 KineticJS-shark가 필요해.

내 코드 :

(더 당신이 날 ??? StackOverflow에 쓰기 원하는 작업)

<!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>

출처

2012-10-26 Morten Gustafsson

사용자 정의 모양을 사용하는 경우, 당신이 필요로하는

<!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

코드 아래에이 시도 KineticJS fill() 및 stroke() 메서드를 사용해야합니다. 그렇지 않으면 모양에 이벤트를 바인딩 할 수 없습니다.

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/

KienticJS 채우기 때문에이 필요하다()와 스트로크() 메소드는 또한 높은 성능 이벤트 검출

사용되는 투명 버퍼층 상에 그리기 위해 사용된다 : 여기 예제

출처

2012-10-31 22:39:30

KineticJS 및 HTML5 - 드래그 작업을하지 마십시오.

답변

관련 문제