2012-05-25 83 views
2

我正在嘗試檢測Kinetic.Line對象上的鼠標懸停。Kinetic.Line鼠標懸停

根據文檔,Kinetic.Line確實具有on函數,因爲它是節點的子節點。 on函數將mousemove和mouseover列爲受支持的事件。

但是,它似乎不適用於mouseover或mousemove在一行上。

這是設計嗎?這個功能會被執行嗎?難道我做錯了什麼?

function canvasTest() { 
    stage = new Kinetic.Stage({ 
     container: "tutorial", 
     width: 400, 
     height: 400 
    }); 

    var layer = new Kinetic.Layer(); 

    var redLine = new Kinetic.Line({ 
     points: [73, 70, 340, 23, 450, 60, 500, 20], 
     stroke: "red", 
     strokeWidth: 15, 
     lineCap: "round", 
     lineJoin: "round" 
    }); 

    redLine.on('mouseover mousemove', function (ev) { 
     alert('line moused over.'); 
    }); 

    layer.add(redLine); 

    stage.add(layer); 
} 

回答

2

動態線使用像素檢測來處理事件,因爲它們沒有路徑。你需要使用shape.saveData()方法,以便它是可檢測的。

下面是一個例子:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-pixel-detection-with-kineticjs/

乾杯!

+0

調用線對象上的saveData()方法會產生:「未捕獲的TypeError:無法讀取未定義的屬性'attrs' – BishopZ

+0

同樣的問題發生在我身上。會喜歡這個解決方案! – Gleeb

+0

在嘗試saveImageData之前確保它在舞臺/圖層上 –

2

我想添加到Erics的答案。

該行附加到的圖層需要添加到舞臺上!發出.saveData()函數。否則你會有一個例外。

祝你好運。