rootからthisに変更
1. canvas.js
1.1 マウス押下開始とマウス押下終了をrootからthisに変更
function(){…}.bind(this); でfunction内のthisを式の評価時のthisに固定する
before:
this.canvas.onmousedown = function(e){ let root = window.root; // マウス押下開始 root.drawStart(e.offsetX, e.offsetY, root.cnvBold, root.cnvColor); root.canvas.addEventListener("mousemove" ,root.mouseMove, false); } this.canvas.onmouseup = function(){ let root = window.root; // マウス押下終了 root.canvas.removeEventListener("mousemove" , root.mouseMove, false); }
after:
this.canvas.onmousedown = function(e){ // マウス押下開始 this.drawStart(e.offsetX, e.offsetY, this.cnvBold, this.cnvColor); this.canvas.addEventListener("mousemove" ,this.mouseMove, false); }.bind(this); this.canvas.onmouseup = function(){ // マウス押下終了 this.canvas.removeEventListener("mousemove" , this.mouseMove, false); }.bind(this);
1.2 canvas上でのイベントをrootからthisに変更
function(){…}.bind(this); でfunction内のthisを式の評価時のthisに固定する
before:
// canvas上でのイベント this.mouseMove = function (e){ let root = window.root; //console.log(this); root.draw(e.offsetX, e.offsetY, root.cnvBold, root.cnvColor); };
after:
// canvas上でのイベント this.mouseMove = function (e){ //console.log(this); this.draw(e.offsetX, e.offsetY, this.cnvBold, this.cnvColor); }.bind(this);