KineticJS - 與 - 優文庫

我使用下列獲得鼠標位置新的鼠標位置更新文本層：KineticJS - 與

var coordinate = 0; 
............ 
      canvas1.addEventListener('mousemove', function (evt) { 
      var mousePos = getMousePos(canvas1, evt); 
      var nY = Math.round(mousePos.y); 
      var nX = Math.round(mousePos.x); 
      coordinate = "x=" + nX + ", y=" + nY; 
      $('#pValue').val(coordinate); 
     }, false);

，如果我在顯示文本字段中的值它的偉大工程;但我無法更新文本層：

dlayerA1Text = new Kinetic.Layer(); 
      var simpleTextRight = new Kinetic.Text({ 
       x: lOffset + (lOffset * 0.25), 
       y: 15, 
       text: coordinate, 
       fontSize: 12, 
       fontFamily: 'Calibri', 
       fill: 'white', 
       align: 'left' 
      });

來源

2013-04-21 hncl

[再次編輯！對不起我不完全回答昨晚 - 我是困]

要獲得動能的文本顯示在舞臺上移動鼠標的座標...

舞臺本身不排放鼠標事件，但我們可以用！ stage.getContent獲得階段的DIV，所以我們可以偵聽該div鼠標事件：

$(stage.getContent()).on('mousemove', function(event){ onMousemove(event)});

然後在的OnMouseMove處理程序中，我們可以得到在舞臺上鼠標的座標：

var pos=stage.getMousePosition(); 
var mouseX=parseInt(pos.x); 
var mouseY=parseInt(pos.y);

最後，我們更新了動態文本顯示的座標：

simpleTextRight.setText("Mouse: x="+mouseX+", y="+mouseY);

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

<!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; } 
    canvas{border:1px solid red;} 
</style>   
<script> 
$(function(){ 

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

     // a kinetic text object to display coordinates 
     var mouseToText=new Kinetic.Text({ 
      x:20, 
      y:30, 
      fontFamily:"Arial", 
      fontSize:18, 
      fill:"blue", 
      stroke:null, 
      text:"Mouse position" 
     }); 
     layer.add(mouseToText); 

     // Start listening to mousemove events 
     // The stage does not emit mouse events 
     // So stage.getContent() will get a reference to the stage <div> 
     // This will let us get mouseevents even on areas not filled with kinetic nodes 
     $(stage.getContent()).on('mousemove', function(event){ onMousemove(event)}); 


     // on mousemove... 
     // Find the current mouse position 
     // Update the kinetic text for the new coordinate 
     // And redraw the layer 
     function onMousemove(event) { 

      // Find the position of the mouse relative to the stage 
      var pos=stage.getMousePosition(); 
      mouseX=pos.x; 
      mouseY=pos.y; 

      // update the kinetic text with the current coordinate 
      mouseToText.setText("Mouse: x="+mouseX+", y="+mouseY); 

      // draw the layer with the new text 
      layer.drawScene(); 
     } 

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

</script>  
</head> 

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

來源

2013-04-21 06:23:04 markE

謝謝馬克，背景是黑色的，文字顯示爲0. – hncl 2013-04-21 06:24:26

是的，我沒有把它添加到舞臺上，更新座標的值是問題，謝謝。 – hncl 2013-04-21 06:30:39

不幸的是它沒有工作，在這裏它是http://jsfiddle.net/user373721/NJ7q8/7/ – hncl 2013-04-21 07:17:02

這是非常有益的。但是，最新版本的kinetic.js不再具有'getMousePosition'，它們使用'getPointerPosition'。

這很好，因爲我無法使用hand.js來使用kinetic.js。顯然他們已經想到了。

來源

2013-12-31 06:59:08 JSdc

KineticJS - 與

回答

相關問題