Kinetic.js - 通過以下的MousePointer

我在Javascript和動力學新的，我需要實現一個函數來繪製一個Kinetics.Js繪製freehandline一個freehandline。我發現這個例子，但只適用於開始和終點。我會實時通過遵循的MousePointer畫......我不知道如何改變功能或推一些新的座標...Kinetic.js - 通過以下的MousePointer

你有一個想法？

var moving = false; 


function createLine() { 
    line = new Kinetic.Line({ 
     points: [0, 0, 0, 0], 
     stroke: "red", 
     strokeWidth: 2, 
     id: 'line', 
     name: 'line', 
     draggable: true 
    }); 
    lineLayer.add(line); 
    addHoverEffect(lineLayer, line); 
    lineLayer.draw(); 
} 

function drawLine() { 
    stage.on("mousedown touchstart", function() { 
     createLine(); 

     if (moving) { 
      moving = false; 
      lineLayer.draw(); 
     } else { 
      var pos = stage.getPointerPosition(); 

      //start point and end point are the same 
      line.getPoints()[0].x = parseInt(pos.x); 
      line.getPoints()[0].y = parseInt(pos.y); 
      line.getPoints()[1].x = parseInt(pos.x); 
      line.getPoints()[1].y = parseInt(pos.y); 

      moving = true; 
      lineLayer.drawScene(); 
     } 
    }); 
    stage.on("mousemove touchmove", function() { 
     if (moving) { 

      var pos = stage.getPointerPosition(); 

      line.getPoints()[1].x = parseInt(pos.x); 
      line.getPoints()[1].y = parseInt(pos.y); 
      moving = true; 
      lineLayer.drawScene(); 
     } 
    }); 
    stage.on("mouseup touchend", function() { 
     moving = false; 
     removeLineDrawEvents(); 
    }); 
}

來源

2013-04-21 user2286914

你在正確的軌道上。這裏有一些你需要知道的更多信息：

舞臺不發射鼠標事件，所以stage.on(「mousedown」 …)將無法正常工作。

相反，創建充滿整個舞臺背景矩形。這個背景矩形可以發出鼠標事件。

var background = new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: stage.getWidth(), 
    height: stage.getHeight(), 
    fill: 'white', 
    stroke: 'black', 
    strokeWidth: 1, 
})

背景是監聽級全鼠標事件的簡單方法。但是，是一種方法來偵聽沒有背景的舞臺鼠標事件。它在這裏討論：Detecting a Click on Stage but not on Shape in KineticJS

要打開您的單線變成了「折線」，維護你想在你的線線段的外部數組，然後你的線的點屬性設置爲數組

var points=[]; 
points.push(…another line segment endpoint…); 
myLine.setPoints(points);

然後只是做你在做什麼！

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

<!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://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
} 
</style>   
<script> 
$(function(){ 

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

     // an empty stage does not emit mouse-events 
     // so fill the stage with a background rectangle 
     // that can emit mouse-events 
     var background = new Kinetic.Rect({ 
      x: 0, 
      y: 0, 
      width: stage.getWidth(), 
      height: stage.getHeight(), 
      fill: 'white', 
      stroke: 'black', 
      strokeWidth: 1, 
     })   
     layer.add(background); 
     layer.draw(); 

     // a flag we use to see if we're dragging the mouse 
     var isMouseDown=false; 
     // a reference to the line we are currently drawing 
     var newline; 
     // a reference to the array of points making newline 
     var points=[]; 

     // on the background 
     // listen for mousedown, mouseup and mousemove events 
     background.on('mousedown touchstart', function(){onMousedown();}); 
     background.on('mouseup touchend', function(){onMouseup();}); 
     background.on('mousemove touchmove', function(){onMousemove();}); 

     // On mousedown 
     // Set the isMouseDown flag to true 
     // Create a new line, 
     // Clear the points array for new points 
     // set newline reference to the newly created line 
     function onMousedown(event) { 
      isMouseDown = true; 
      points=[]; 
      points.push(stage.getMousePosition()); 
      var line = new Kinetic.Line({ 
       points: points, 
       stroke: "red", 
       strokeWidth: 5, 
       lineCap: 'round', 
       lineJoin: 'round' 
      }); 
      layer.add(line); 
      newline=line; 
     } 

     // on mouseup end the line by clearing the isMouseDown flag 
     function onMouseup(event) { 
      isMouseDown=false; 
     } 

     // on mousemove 
     // Add the current mouse position to the points[] array 
     // Update newline to include all points in points[] 
     // and redraw the layer 
     function onMousemove(event) { 
      if(!isMouseDown){return;}; 
      points.push(stage.getMousePosition()); 
      newline.setPoints(points); 
      layer.drawScene(); 
     } 


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

</script>  
</head> 

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

來源

2013-04-21 17:32:56 markE

當我在Chrome中打開你的小提琴，我得到'遺漏的類型錯誤：無法對「CanvasRenderingContext2D」執行「補」：參數1（「[對象CanvasRenderingContext2D ]'）不是有效的枚舉value.' – 2014-04-03 16:14:17

最後，如果它也適用於觸摸屏（如果它在所有工作），你可以將其調整到我的問題：http://stackoverflow.com/q/22423791/ 562769 – 2014-04-03 16:15:40

Kinetic.js - 通過以下的MousePointer

回答

相關問題