如何正確繪製橢圓[KineticJs]

Question

我怎麼能創建一個繪圖畫布，可以創建一個基於鼠標座標的橢圓？ 這裏是我上的jsfiddle代碼（我還是新來此一）：

http://jsfiddle.net/thekucays/DRfph/

這裏是我的代碼來繪製橢圓（59行）：

var x, y, width, height; 
     //var rect; 

     //Math.min untuk mencari nilai terkecil dari 2 parameternya 
     x = Math.min(event.clientX, lastX); 
     y = Math.min(event.clientY, lastY); 

     //Math.abs buat bikin nilai negatif jadi positif 
     width = event.clientX - lastX; 
     height = event.clientY - lastY; 

     if(rect_drawed == 0){ 
      rect = new Kinetic.Ellipse({ 
       x: x, 
       y: y, 
       radius:{ 
        x: width, 
        y: height 
       }, 
       stroke: 'black', 
       strokeWidth: 4, 
       fill: 'blue', 
       name: 'rect'+rect_counter 
      }); 
      layer.add(rect); 
      layer.draw(); 
      rect_drawed = 1; 
      //stage.add(rect); 

      /*rect.on('click', function(){ 
       rect.setFill('RED'); 
      });*/ 
     } 
     rect.setAttrs({ 
      x: width/2, 
      y: height/2 
     }); 
     layer.draw(); 

所以，當我執行代碼，它會導致錯誤.. Chrome的控制檯說： 未捕獲的錯誤：INDEX_SIZE_ERR：kinetic.js上的DOM異常1：29

我的代碼出了什麼問題？

最好的問候，

盧基[R Rompis

Answer 1

看你的代碼，

width = event.clientX - lastX; 
    height = event.clientY - lastY; 

您允許的寬度和高度爲負，這將引發你的DOM異常。

讓它：

width = Math.abs(event.clientX - lastX); 
    height = Math.abs(event.clientY - lastY); 

http://jsfiddle.net/HSdgT/3/此鏈接複製你的錯誤。

http://jsfiddle.net/HSdgT/4/此鏈接與錯誤消失。