타원을 올바르게 그리는 방법 [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(); 

, 내가 실행할 때 코드, 오류가 발생합니다 .. 크롬의 콘솔은 다음과 같이 말했습니다 : 캐치 오류 : 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/이 링크는 오류가 남겨졌습니다.