1. canvas.js
1.1 globalThis.clickFlgの除去
mousedown とmouseupのイベントをgrabしたことで、globalThis.clickFlg の必要性を無くす
before:
if(!globalThis.clickFlg) { console.log("mousemove"); return false; }
after:
無し
1.2
before:
canvas.onmousedown = function(){ globalThis.clickFlg = 1; // マウス押下開始 canvas.addEventListener("mousemove" , _mouseMove, false); }
after:
canvas.onmousedown = function(e){ globalThis.clickFlg = 1; // マウス押下開始 root.drawStart(e.offsetX, e.offsetY, cnvBold, cnvColor); canvas.addEventListener("mousemove" , _mouseMove, false); }
1.3 drawファンクションをdrawStartとdrawに分離
before:
// 描画処理 "draw":function (x, y, cnvBold, cnvColor ) { this.ctx.lineWidth = cnvBold; this.ctx.strokeStyle = 'rgba('+cnvColor+')'; // 初回処理の判定 if (globalThis.clickFlg == "1") { globalThis.clickFlg = "2"; this.ctx.beginPath(); this.ctx.lineCap = "round"; // 線を角丸にする this.ctx.moveTo(x, y); } else { this.ctx.lineTo(x, y); } this.ctx.stroke(); },
after:
"drawStart":function (x, y, cnvBold, cnvColor ) { this.ctx.lineWidth = cnvBold; this.ctx.strokeStyle = 'rgba('+cnvColor+')'; // 初回処理の判定 if (globalThis.clickFlg == "1") { globalThis.clickFlg = "2"; this.ctx.beginPath(); this.ctx.lineCap = "round"; // 線を角丸にする this.ctx.moveTo(x, y); console.log("globalThis.clickFlg = "+globalThis.clickFlg); } }, // 描画処理 "draw":function (x, y, cnvBold, cnvColor ) { this.ctx.lineWidth = cnvBold; this.ctx.strokeStyle = 'rgba('+cnvColor+')'; // 初回処理の判定 if (globalThis.clickFlg != "1") { this.ctx.lineTo(x, y); console.log("globalThis.clickFlg = "+globalThis.clickFlg); } this.ctx.stroke(); },