前提
vanillaJS(ES6)を利用してサッカーボードのようなアプリを作成しているのですが、canvasへのペン描画と要素の追加および操作を分離することができません。
実現したいこと
動作イメージとしては、フラグがオンの場合は要素追加および操作のみ、
フラグがオフの場合はペン描画のみといったものです。]
現状偶数/奇数でフラグを分類しておりますが、フラグそのものは何でもよく、個々の処理を別々で動かしたいというのが本旨でございます。
発生している問題
現状、画像をクリックするとイベント発火し、変数yが偶数の場合は要素追加メソッドを呼び出し、奇数の場合はペン描画メソッドを呼び出しで動作を分離しようとしています。
ただ、この場合呼び出し先のイベントが残ったままとなるので、
y=<2で要素追加とペン描画のイベントが重なり、
下記のようにペン描画後に要素追加が重なってしまいます。
そこで、コールバック関数listnenerのclickを処理するbreakの直前にremoveEventListener("click", listener);を入れてみましたが、
そうすると、要素追加が1度きりになってしまいます。(当然と言えば当然だとは思いますが)
該当のソースコード
index.htmlでmain.jsを呼び出し、ペン描画処理のDrawPen.jsと要素操作のElement.jsはクラス化しており、モジュールとしてmain.jsにインポートしています。
html:index.html
<body> <div class="container"> <main> <canvas id="draw_area" width="500px" height="500px" style="border: 1px solid #000000;"> </canvas> </main> <div class="playerElem" id="player" data-elemid="0" style="top: 220px; left: 267px;">たいとる</div> </div> <!-- ペンの設定を変更する要素 --> <div id="change_pen"> <img src="img/pen.png" alt=""> <div class="select_color"> <ul> <li data-color="black"> <p>ペンの色:黒</p> </li> <li data-color="red"> <p>ペンの色:赤</p> </li> <li data-color="blue"> <p>ペンの色:青</p> </li> <li data-color="white"> <p>消しゴム</p> </li> </ul> </div> </div> <script src="js/main.js" type="module"></script> <!-- テスト用スクリプト --> <script> </script> </body>
js:main.js
"use strict"; import { DrawPen } from './DrawPen.js'; import { Element } from './Element.js'; const draw = new DrawPen(); draw.setCanvasSize(); // draw.drawPen(); // draw.changePenColor(); const elem = new Element(); // elem.moveElement(1); // elem.moveElement(2); // switch_btn押下で要素追加とペン描画を切り替える const switch_btn = document.querySelector("#change_pen > img"); let y = 0; switch_btn.addEventListener("click", () => { y++; if (y % 2 === 0) { console.log(true); elem.moveElement(); } else if (y % 2 !== 0) { console.log(false); draw.drawPen(); draw.changePenColor(); } });
js:DrawPen.js
"use strict"; export class DrawPen { canvas = document.getElementById("draw_area"); context = this.canvas.getContext("2d"); // this減らしてもっと簡潔に書けないだろうか? drawPen() { this.canvas.addEventListener("mousemove", event => draw(event.layerX, event.layerY)); this.canvas.addEventListener("touchmove", event => draw(event.layerX, event.layerY)); //パソコンでクリックしてる間だけ描けるようにした機能 this.canvas.addEventListener("mousedown", () => { this.context.beginPath(); isDrag = true; }); this.canvas.addEventListener("mouseup", () => { this.context.closePath(); isDrag = false; }); //スマホで描けるようにする機能 this.canvas.addEventListener("touchstart", () => { this.context.beginPath(); isDrag = true; }); this.canvas.addEventListener("touchend", () => { this.context.closePath(); isDrag = false; }); let isDrag = false; //線をかく機能 const draw = (x, y) => { if (!isDrag) return; this.context.lineTo(x, y); this.context.stroke(); } } // ペンの色を変えるメソッド changePenColor() { const selectList = document.querySelectorAll(".select_color > ul > li"); const colorList = ["black", "red", "blue", "white"]; for (let i = 0, len = selectList.length; i < len; i++) { selectList[i].addEventListener("click", () => { const color = selectList[i].getAttribute("data-color"); // 下記はもっと簡潔に書く方法はないか…? if (color === "black") { this.context.globalCompositeOperation = "source-over"; this.context.strokeStyle = "black"; this.context.lineWidth =5; } else if (color === "red") { this.context.globalCompositeOperation = "source-over"; this.context.strokeStyle = "red"; this.context.lineWidth =5; } else if (color === "blue") { this.context.globalCompositeOperation = "source-over"; this.context.strokeStyle = "blue"; this.context.lineWidth =5; } else { this.context.globalCompositeOperation = 'destination-out'; this.context.lineWidth =50; } }) } } // canvasのサイズをmain要素に合わせる処理 setCanvasSize() { const main = document.querySelector("main"); const mainWidth = main.clientWidth; const mainHeight = main.clientHeight; console.log(mainWidth); console.log(mainHeight); this.canvas.setAttribute("width", mainWidth); this.canvas.setAttribute("height", mainHeight); } }
js:Element.js
"use strict"; export class Element { moveElement() { const elements = document.getElementsByClassName("playerElem"); const container = document.querySelector(".container"); // 要素がクリックされた座標を取得する変数 let x; let y; const listener = (event) => { console.log("イベント起動") switch (event.type) { case 'mousedown': console.log("mousedown起動"); this.lastMousedownElement = event.target.id; let elem = event.target; elem.classList.add("drag"); if (event.type !== "mousedown") { var event = event.changedTouches[0]; } x = event.pageX - elem.offsetLeft; y = event.pageY - elem.offsetTop; document.body.addEventListener("mousemove", mmove, false); break; case 'mouseup': console.log("mouseup起動"); this.lastMouseupElement = event.target.id; let mouseup_elem = event.target; mouseup_elem.classList.remove("drag"); break; case 'click': console.log("click起動"); console.log(this.lastMousedownElement); console.log(this.lastMouseupElement); if (this.lastMousedownElement === this.lastMouseupElement) return; console.log("alert:要素を追加しました"); alert("要素を追加しました"); // 追加する要素を定義 const playerElem = document.createElement("div"); playerElem.className = "playerElem"; const text = document.createTextNode("たいとる"); playerElem.setAttribute("id", "player"); playerElem.appendChild(text); container.appendChild(playerElem); // クリックした座標位置に要素を配置 const drag = document.querySelectorAll(".playerElem"); const elemId = drag.length - 1; drag[elemId].setAttribute("data-elemId", elemId); // 下記の20はマジックナンバーなので、他に算出方法あるかも drag[elemId].style.top = event.pageY - 20 + "px"; drag[elemId].style.left = event.pageX - 20 + "px"; container.removeEventListener("click", listener); break; } for (let dragElm of document.getElementsByClassName("playerElem")) { dragElm.addEventListener('mousedown', listener, false); document.addEventListener('mouseup', listener, false); } } function mmove(event) { const drag = document.getElementsByClassName("drag")[0]; if (event.type !== "mousemove") { let event = event.changedTouches[0]; } event.preventDefault(); if (drag) { drag.style.top = event.pageY - y + "px"; drag.style.left = event.pageX - x + "px"; } } container.addEventListener('click', listener, false); container.addEventListener('mouseup', listener, false); } }
かなり長文となってしまい申し訳ございません。
情報が不足しているあるいは、あいまいな表現で伝わらない部分がございましたら、ご指摘いただけますと幸いです。
何卒宜しくお願い致します。
追記になります。
※すみません。。②はmousedownではなくmouseupです。
まだ回答がついていません
会員登録して回答してみよう