KineticJS中Mouseover事件的問題

Question

我想用KinetiJs Canvas庫做一些實驗。我在下面做的是 - 繪製一個矩形，每當有一個鼠標懸停時，我想要在特定點之間繪製一條線。

問題是，鼠標懸停發生時我沒有看到任何行。

我已經試過檢查onmousemove函數是否被調用，它確實被調用，但行不會被繪製。任何人都可以解釋爲什麼？

感謝，

$(document).ready(function() { 
    var stage = new Kinetic.Stage({ 
     container: "sketchcanvas", 
     width: 600, 
     height: 600 
    }); 
    var layer = new Kinetic.Layer(); 
    var rect = new Kinetic.Rect({ 
     x: 50, 
     y: 50, 
     width: 500, 
     height: 500, 
     fill: "#00D2FF", 
     stroke: "black", 
     strokeWidth: 4 
    }); 
    rect.on("mousemove", function() { 
     var mousePos = stage.getMousePosition(); 
     var x = mousePos.x; 
     var y = mousePos.y; 
     var line = new Kinetic.Line({ 
      points: [60, 60, 80, 80, 100, 200], 
      stroke: "black", 
      strokeWidth: 15, 
      lineCap: 'round', 
      lineJoin: 'round' 
     }); 
     layer.add(line); 
    }); 
    layer.add(rect); 
    stage.add(layer); 
}); 

Answer 1

在KineticJS，以後你做改建或加建一層，你需要draw()該層的效果，以顯示

... 
layer.add(line); 
layer.draw();