자바 스크립트 캔버스

Question

다음 코드는 작동 onchange를 이벤트를 작동하지 않습니다.

나는 onchange 이벤트를 사용하여 내 함수를 래핑하고 Checkbox가 선택되어 있는지 확인해야합니다.

하지만 왜 이것이 위의 2 줄에서 작동하지 않는지 이해할 수 없습니다. Chrome 개발자 콘솔에 아무런 오류가 표시되지 않습니다.

다시 위의 두 줄을 제거하면 코드가 작동하지만 추가하면 그 이유가 이해되지 않습니다.

전체 코드 : 그 마우스 이벤트 리스너 콜백 함수가 캔버스에 추가하는 시간으로 초기화되지 않고, 때문에

if(window.addEventListener) { 
    window.addEventListener('load', function() { 

    ... 

    // Initialization sequence. 
    function init() { 

     canvas = document.getElementById('imageView'); 


     tool = new tool_pencil(); 

     canvas.addEventListener('mousedown', ev_canvas, false); 
     canvas.addEventListener('mousemove', ev_canvas, false); 
     canvas.addEventListener('mouseup', ev_canvas, false); 
    } 

    function tool_pencil() { 

     var tool = this; 
     this.started = false; 

     checkboxPencil.onchange = function() { 
      if(checkboxPencil.checked) { 
       console.log("Pencil checked"); 

       this.mousedown = function (ev) { 
        context.beginPath(); 
        context.moveTo(ev._x, ev._y); 
        tool.started = true; 
       }; 

       this.mousemove = function (ev) { 
        if (tool.started) { 
         context.lineTo(ev._x, ev._y); 
         context.stroke(); 
        } 
       }; 

       this.mouseup = function (ev) { 
        if (tool.started) { 
         tool.mousemove(ev); 
         tool.started = false; 
        } 
       }; 
      } else { 
       console.log("Pencil not checked"); 
      } 
     } 
    } 

Answer 1

문제가 발생한다.

캔버스에 그리기 전에 확인란을 선택했는지 여부를 확인해야합니다.

window.addEventListener('load', init); 
 

 
function init() { 
 
    canvas = document.getElementById('imageView'); 
 
    checkboxPencil = document.getElementById('checkboxPencil'); 
 
    context = canvas.getContext("2d"); 
 
    tool = new tool_pencil(); 
 
    canvas.addEventListener('mousedown', tool.mousedown, false); 
 
    canvas.addEventListener('mousemove', tool.mousemove, false); 
 
    canvas.addEventListener('mouseup', tool.mouseup, false); 
 
} 
 

 
function tool_pencil() { 
 
    this.started = false; 
 
    this.mousedown = function(ev) { 
 
     if (checkboxPencil.checked) { 
 
      context.beginPath(); 
 
      context.moveTo(ev.offsetX, ev.offsetY); 
 
      this.started = true; 
 
     } 
 
    }; 
 
    this.mousemove = function(ev) { 
 
     canvas.style.cursor = 'default'; 
 
     if (this.started && checkboxPencil.checked) { 
 
      context.lineTo(ev.offsetX, ev.offsetY); 
 
      context.stroke(); 
 
     } 
 
    }; 
 
    this.mouseup = function(ev) { 
 
     if (this.started && checkboxPencil.checked) { 
 
      this.started = false; 
 
     } 
 
    }; 
 
}

canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="imageView" width="300" height="300"></canvas> 
 
<input type="checkbox" id="checkboxPencil">Pencil

Answer 2

이 나 코드를 실행하기에 충분한 상황이 아니라, 내가 문제의 적어도 일부를 추측 할 수 있다고 생각 ...

내가 있으리라 믿고있어 checkboxPencil은 var checkboxPencil = document.getElementById('my_checkbox_element') 또는 이와 유사하게 초기화되었습니다. 이 작업을 수행하려면 생략 된 섹션에서 checkboxPencil을 window.onload 코드 내에서 선언해야합니다.

또한 tool이 생략 된 부분이나 전역으로 선언되었다고 가정합니다. 그렇지 않으면 라인 tool = new tool_pencil() 아무것도하지 않을 것입니다.

그리고 ev_canvas은 tool 개체의 관련 mousedown/mouseup/mousemove 메서드를 호출하는 함수라고 가정합니다.

이러한 가정이 모두 정확하다면 가장 명백한 문제는 mousedown 등의 기능을 잘못된 개체에 연결하는 것입니다. onchange 처리기 내에서 HTML 체크 박스 요소의 할당을 수행 중이므로 해당 코드가 실행될 때 this은 이 아닌 인 tool_pencil 개체의 확인란 요소를 나타냅니다. 난 당신이 이런 맥락에서

tool.mousedown = function (ev) {

에 선

this.mousedown = function (ev) {

(등)을 변경하려는 생각 tool은 폐쇄를 통해 로컬 변수 tool_pencil 기능의 tool을 말한다 .

또 다른 문제는 context이 정의되어 있지 않은 것입니다.아마 당신은 당신의 코드를 생략 섹션에 선언하려면, 다음이 canvas을 초기화 직후,

context = canvas.getContext("2d");