canvas에서 일어나는 event 추적하는법이 궁금합니다

JS2
2019. 04. 10. 07:37

canvas에서 일어나는 event 추적하는법이 궁금합니다

jQuery 등을 이용하여 dom의 정보를 읽어서 작동하는 일반적인 페이지들은

개발자도구의 event 트리거 등을 이용하여 얼마든지 해당 dom 변경시 발생되는 function 들을 찾을수가있는데 canvas 내부에서 그려진것들은 이런 이벤트 트리거를 읽는것이 매우 어렵습니다.

항상 해당하는 JS들을 모두 해석하기엔 벅찬데 쉽게 해석할수있는 방법이 알고싶습니다.

공유하고 보상받기 ♥︎

총 1개의 답변이 있습니다.

질문자 채택 답변
프알못 답변자 인증 뱃지
비밀

캔버스에 이벤트를 추적해본 적이 없어서 데코레이터밖에 생각이 안 나네요

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <script type="application/javascript">
    function startTrack(ctx)
    {
      var n = ['fillStyle', 'fillRect']; // 추적할 이벤트(?)들
      for(var i = 0; i < n.length; i++)
      {
        ctx[n[i]] = (function (x, y) {
          return function () {
            console.log(x + "(" + JSON.stringify(arguments) + ")");
            y.apply(this, arguments);
          } // 호출될 때마다 로그를 남깁니다.
        })(n[i], ctx[n[i]]);
      }
    }
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        startTrack(ctx); // ctx에 대한 이벤트(?) 추적을 시작합니다.

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 50, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 50, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

정 다른 방법이 없다면 시도해 볼 만 한 방법인 것 같습니다.

2019. 04. 10. 12:09
38