形狀（圓弧）描邊上的單擊事件不起作用

Question

使用KineticJS，形狀中的點擊事件（在我的情況下爲arc）根本不會引發。

我的代碼是有http://jsfiddle.net/mPsfm/

JS

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 200, 
    height: 200 
}); 
var layer = new Kinetic.Layer(); 

var arc = new Kinetic.Shape({ 
     drawFunc: function(canvas) { 

      var ctx = canvas.getContext(); 
      ctx.beginPath(); 
      ctx.lineWidth = 10; 
      var startAngle = 0; 
      var endAngle = 135 * Math.PI/180; 
      ctx.arc(50, 50, 40, startAngle, endAngle, false); 
      ctx.stroke(); 
     } 
}); 

arc.on('click', function() { 
    alert("click detected"); 
}); 

layer.add(arc); 
stage.add(layer); 

我怎樣才能使這項工作呢？

預先感謝您。

Answer 1

http://jsfiddle.net/mPsfm/3/

你發現漏掉了一個小行：

canvas.fillStroke(this); 

這使得您的自定義形狀功能：

var arc = new Kinetic.Shape({ 
    drawFunc: function(canvas) { 

     var ctx = canvas.getContext(); 
     ctx.beginPath(); 
     ctx.lineWidth = 10; 
     var startAngle = 0; 
     var endAngle = 135 * Math.PI/180; 
     ctx.arc(50, 50, 40, startAngle, endAngle, false); 
     ctx.stroke(); 
     canvas.fillStroke(this); 
    } 
}); 

Answer 2

感謝EliteOctagon。

最終代碼在這裏！

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 200, 
    height: 200 
}); 
var layer = new Kinetic.Layer(); 

var arc = new Kinetic.Shape({ 
     drawFunc: function(canvas) { 
      var ctx = canvas.getContext(); 
      ctx.beginPath(); 
      ctx.lineWidth = 10; 
      var startAngle = 0; 
      var endAngle = 135 * Math.PI/180; 
      ctx.arc(50, 50, 40, startAngle, endAngle, false); 
      ctx.stroke(); 
      canvas.fillStroke(this); 
     }, 
    drawHitFunc: function(canvas) { 
      var ctx = canvas.getContext(); 
      ctx.beginPath(); 
      ctx.lineWidth = 10; 
      var startAngle = 0; 
      var endAngle = 135 * Math.PI/180; 
      ctx.arc(50, 50, 40+ctx.lineWidth, startAngle, endAngle, false); 
      ctx.lineTo(50*Math.cos(endAngle)+40,50*Math.sin(endAngle)+40); 
      ctx.lineTo(50*Math.cos(endAngle/2)+40,50*Math.sin(endAngle/2)+40); 
      ctx.lineTo(50*Math.cos(startAngle)+40,50*Math.sin(startAngle)+40); 
      ctx.stroke(); 
      canvas.fillStroke(this); 
     } 
}); 

arc.on('click', function() { 
    alert("click detected"); 
}); 


layer.add(arc); 
stage.add(layer);