5.事件響應
5.1.圖形的事件響應
圖形對象對事件的響應處理可使用 on() 方法綁定事件類型和相應方法。 On() 方法須要一個事件類型參數和相應方法，其中所支持的事件類型包括: mouseover， mouseout， mousemove， mousedown， mouseup， click， dblclick， dragstart 以及 dragend 事件。默認狀況下，圖形對象事件響應使用的是路徑檢測方法，下一節還會介紹像素檢測方法。html
綁定代碼以下：安全
<script>服務器
shape.on(「click」, function(evt){post
// 事件響應代碼spa
});.net
</script>htm
以下代碼繪製一個矩形，並相應鼠標在此矩形上的點擊操做，彈出消息框：對象
<!DOCTYPE html>教程
<html>seo
<head>
<meta charset=「UTF-8″>
<title>KineticJS</title>
<script src=「../kinetic.js」></script>
</head>
<body>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container : 「container」,
width : 600,
height : 400
});
var layer = new Kinetic.Layer();
//建立config參數
var config = {
x : 200,
y : 150,
width : 200,
height : 100,
fill : 「blue」,
stroke : 「black」,
strokeWidth : 4
};
//建立矩形對象
var rect = new Kinetic.Rect(config);
//綁定事件響應方法
rect.on(「click」, function() {
alert(「clicked」);
});
//把矩形對象添加到層裏
layer.add(rect);
//將層添加到舞臺中
stage.add(layer);
};
</script>
<div id=「container」></div>
</body>
</html>
5.2.像素檢測
對於圖像、線條和文本之類的對象，路徑檢測就不太合適，這時就須要使用像素檢測方法來響應事件。爲了使用像素檢測，就須要爲圖形圖像對象的檢測類型detectionType設置爲像素檢測pixel。這個值默認是路徑檢測path。
<script>
// 在構造方法的config中指定檢測類型
var image = new Kinetic.Image({
detectionType: 「pixel」
});
// 或者是用對象方法設定檢測類型
image.setDetectionType(「pixel」);
</script>
而後，Kinetic還須要用對象的saveData()來保存數據纔可使用像素檢測功能。另外還能夠用clearData()來清除保存的數據。但要注意的是，saveData()須要在對象所在的層被添加到舞臺上之後才能使用，不然會出錯。
<script>
// 保存圖像數據
image.saveData();
// 清除圖像數據
image.clearData();
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset=「UTF-8″>
<title>KineticJS</title>
<script src=「../kinetic.js」></script>
</head>
<body>
<script>
var stage;
function loadImage() {
var image = new Image();
image.onload = function() {
var kimage = new Kinetic.Image({
x : 100,
y : 100,
image : image,
detectionType : 「pixel」
});
//綁定事件響應方法
kimage.on(「click」, function() {
alert(「image clicked」);
});
var layer = new Kinetic.Layer();
layer.add(kimage);
stage.add(layer);
//保存數據以相應事件
kimage.saveData();
};
//圖像須要與此頁面在同一個服務器上，不然會Javascript會拋出安全異常
image.src = 「http://localhost/FSM.jpg」;
}
window.onload = function() {
stage = new Kinetic.Stage({
container : 「container」,
width : 600,
height : 400
});
var rect = new Kinetic.Rect({
x : 400,
y : 100,
width : 100,
height : 100,
fill : 「red」,
detectionType : 「pixel」
});
//綁定事件響應方法
rect.on(「click」, function() {
alert(「rect clicked」);
});
var layer = new Kinetic.Layer();
layer.add(rect);
stage.add(layer);
//保存數據以相應事件
rect.saveData();
loadImage();
};
</script>
<div id=「container」></div>
</body>
</html>
5.3.事件命名
對於同一個事件，能夠經過對事件進行命名綁定多個事件處理方法。事件的命名格式遵循「事件類型.自定義名稱「。好比，針對鼠標點擊事件「click「，能夠命名兩個事件處理方法「click.a」和「click.b」分別綁定各自的事件處理方法：
//建立矩形對象
var rect = new Kinetic.Rect(config);
//綁定消息響應方法
rect.on(「click.a」, function() {
alert(「clicked a」);
});
rect.on(「click.b」, function() {
alert(「clicked b」);
});
//把矩形對象添加到層裏
layer.add(rect);
//將層添加到舞臺中
stage.add(layer);
點擊這個矩形的時候會依次調用這兩個綁定的方法，彈出兩個消息框。
5.4.鼠標位置的獲取
在響應鼠標事件的時候經常須要獲取鼠標位置信息，這時能夠在事件響應方法中使用舞臺對象的getMousePosition方法獲取鼠標位置：
//綁定事件響應方法
rect.on(「click」, function() {
var mousePos = stage.getMousePosition();
var msg = 「x:」+mousePos.x+」 | 「+「y:」+mousePos.y;
alert(msg);
});
固然，要注意的是，這個座標是相對於舞臺左上角的，而不是綁定的圖像左上角。
5.5.多事件綁定
若是但願同時相應多個不一樣的事件，能夠在on方法綁定事件處理方法的時候，在事件參數中以空格分隔不一樣的事件，以下在鼠標按下和移過的時候都調用此處理方法：
<script>
shape.on(「mousedown mouseover」function(evt) {
// 事件響應代碼
});
</script>
5.6.取消事件綁定
要取消對某個事件的相應綁定，只須要用圖形對象的off方法，參數即要取消的事件名稱，以下代碼取消了鼠標點擊事件的相應：
<script>
shape.off(「click」);
</script>
對於有多個自定義命名的事件，好比上文中的「click.a「和「click.b「，使用shape.off(「click」)會將兩個事件處理的綁定都取消掉，若是隻是單獨取消其中某個，能夠以下操做：
<script>
shape.off(「click.a」);
</script>
或
<script>
shape.off(「click.b」);
</script>
5.7.事件監聽開關
Kinetic中還能夠經過設定listening屬性的方法來肯定是否要監聽事件。若是設爲false，則綁定的事件響應方法會被忽略不執行。
<script>
// 在構造方法的config參數中設置
var shape = new Kinetic.Circle({
listening: false
});
// 使用對象方法設置
shape.listen(true);
</script>
5.8.禁止事件向上級對象傳遞
若是某個圖形對象屬於某個組，則某個發生在圖形上的事件會被依次傳遞到圖形對象、組、層，那麼若是這三者都綁定了此事件的相應方法，那麼這些方法也會被依次執行。
那麼若是但願在本對象處理事件後事件再也不繼續向上級傳遞，則能夠在綁定事件處理方法時以下用方法的evt參數處理：
<script>
shape.on(「click」, function(evt) {
evt.cancelBubble = true;
});
</script>
5.9.在事件處理方法中獲取圖形對象
一樣也是用在綁定事件處理方法時方法的evt參數獲取當前事件綁定的圖形對象：
<script>
shape.on(「click」, function(evt) {
var shape = evt.shape;
});
</script>
而後就能夠在事件處理方法中對圖形對象進行操做了。
5.10.觸發事件響應方法
除了由用戶交互操做出發事件而執行響應方法外，還能夠在代碼裏用simulate方法觸發事件。
好比：
<script>
// 圖形對象綁定了鼠標點擊事件
shape.on(「click」, function(evt){
// 事件處理
});
// 觸發事件鼠標點擊事件
shape.simulate(「click」);
</script>
5.11.移動設備的觸摸屏事件響應
觸摸屏的事件響應與普通電腦的響應處理方法相似，只是事件類型的名稱略有不一樣。Kinetic支持的觸摸屏事件包括touchstart， touchmove， touchend， tap， dbltap， dragstart， dragmove 以及 dragend。
而觸摸點座標的獲取就不是用getMousePosition(evt)，而是觸摸屏專用方法getTouchPosition(evt)或者桌面與觸摸屏通用方法getUserPosition(evt)。