実現したいこと
GASを利用したwebページ作成の一環で、canvasを利用し自由描画とテキストのみ配置の二種類のスペースを作成したいです。
できればFabric.jsを使用していきたいです。
発生している問題・エラーメッセージ
一つ目の自由描画のcanvasは問題なく動作しますが、二つ目のテキスト配置のcanvasは配置したテキストが表示されません。
canvasは複数枚数使用できないなどの制約があるのでしょうか？
該当のソースコード
HTML＆Jquery
<!DOCTYPE html> <html> <head> <!DOCTYPE html> <html> <head> <base target="_top"> <?!=HtmlService.createHtmlOutputFromFile('css.html').getContent(); ?> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script> </head> <body> <div> <br> <center> <button type="button" id="modalOpen" class="button" data-target="modal1">canvas</button> </center> <br><br> <!--- モーダルウィンドウ ---> <div id="modal1" class="modal_box"> <h1>自由描画ウィンドウ</h1> <label style="font-size: 20px; color: red;"> <input id="drawing" type="checkbox" checked><b>編集</b></label><br><br> <div style="padding:10px"> <button id="delete" style="display:none">選択範囲削除</button> </div> <canvas id="canvas-id" width="800" height="400" class="canvas"></canvas> <div style="padding:10px"> <button type="button" onclick="chgImg()" value="1">画像変換</button> <h2>画像出力欄</h2> <div id="img-box"><img id="newImg"></div> <div class="link_area"> <p class="modal_link"><a data-target="modal2" class="modal_switch"><span>テキストへ</span></a></p> </div> <p><a class="modal_close">×<i class="zmdi zmdi-close"></i></a></p> </div> </div> <div id="modal2" class="modal_box"> <h1>テキスト</h1> <div class="canvas-container2" style="width: 800px; height: 1000px; position: relative; user-select: none;"> <canvas id="canvas-final" width="800" height="1000" class="canvas"></canvas> </div> <div class="link_area"> <ul> <li class="modal_link"><a data-target="modal1" class="modal_switch" rel="noopener noreferrer"><span>自由描画へ</span></a></li> </ul> </div> <p><a class="modal_close">×<i class="zmdi zmdi-close"></i></a></p> </div> </div> <!--- 終わり ---> <script> const buttonOpen = document.getElementById('modalOpen'); const modal = document.getElementById('easyModal'); const buttonClose = document.getElementsByClassName('modalClose')[0]; /*-------------- ボタンクリック ----------------*/ $(function () { // 「.modal_open」をクリックしたらモーダルと黒い背景を表示する $('#modalOpen').click(function () { // 黒い背景をbody内に追加 $('body').append('<div class="modal_bg"></div>'); $('.modal_bg').fadeIn(); // data-targetの内容をIDにしてmodalに代入 var modal = '#' + $(this).attr('data-target'); // モーダルをウィンドウの中央に配置する function modalResize() { var w = $(window).width(); var h = $(window).height(); var x = (w - $(modal).outerWidth(true)) / 2; var y = (h - $(modal).outerHeight(true)) / 2; $(modal).css({ 'left': x + 'px', 'top': y + 'px' }); } // modalResizeを実行 modalResize(); // modalをフェードインで表示 $(modal).fadeIn(); // .modal_bgか.modal_closeをクリックしたらモーダルと背景をフェードアウトさせる $('.modal_bg, .modal_close').off().click(function () { $('.modal_box').fadeOut(); $('.modal_bg').fadeOut('slow', function () { $('.modal_bg').remove(); }); }); // ウィンドウがリサイズされたらモーダルの位置を再計算する $(window).on('resize', function () { modalResize(); }); // .modal_switchを押すとモーダルを切り替える $('.modal_switch').click(function () { // 押された.modal_switchの親要素の.modal_boxをフェードアウトさせる $(this).parents('.modal_box').fadeOut(); // 押された.modal_switchのdata-targetの内容をIDにしてmodalに代入 var modal = '#' + $(this).attr('data-target'); // モーダルをウィンドウの中央に配置する function modalResize() { var w = $(window).width(); var h = $(window).height(); var x = (w - $(modal).outerWidth(true)) / 2; var y = (h - $(modal).outerHeight(true)) / 2; $(modal).css({ 'left': x + 'px', 'top': y + 'px' }); } // modalResizeを実行 modalResize(); $(modal).fadeIn(); // ウィンドウがリサイズされたらモーダルの位置を再計算する $(window).on('resize', function () { modalResize(); }); }); }); }); /*------------- 自由描画スクリプト ---------------*/ //htmlで作ったcanvas要素をidで指定して、canvasオブジェクトを生成。 const canvas = new fabric.Canvas("canvas-id"); //フリードローイングを可能にする canvas.isDrawingMode = true; //ペンサイズの設定 canvas.freeDrawingBrush.width = 5; // 描画する線の太さ document.getElementById("drawing").addEventListener("click", function () { canvas.isDrawingMode = canvas.isDrawingMode ? false : true; canvas.discardActiveObject(); canvas.requestRenderAll(); }); fabric.Object.prototype.set({ borderScaleFactor: 6 }); //オブジェクトを選択してデリートを行う const deleteBtn = document.getElementById("delete"); deleteBtn.addEventListener("click", function () { deleteSelectedObjects(); }); canvas.on("selection:created", function () { deleteBtn.style.display = "inline-block"; }); canvas.on("selection:cleared", function () { deleteBtn.style.display = "none"; }); function deleteSelectedObjects() { var selection = canvas.getActiveObjects(); selection.forEach((obj) => { canvas.remove(obj); }); canvas.requestRenderAll(); } document.addEventListener("keyup", function (e) { console.log(e.keyCode); if (e.keyCode == 8 | e.keyCode == 46) { deleteSelectedObjects(); } }); //初期値（サイズ、色、アルファ値）の決定 var defSize = 2, defColor = "#555"; //フリードローイングを可能にする canvas.isDrawingMode = true; //初期値（サイズ、色、アルファ値）の決定 var defSize = 7, defColor = "#555"; //モーダルコンテンツ以外がクリックされた時 addEventListener('click', outsideClose); function outsideClose(e) { if (e.target == modal) { modal.style.display = 'none'; }; }; //バツ印がクリックされた時 buttonClose.addEventListener('click', modalClose); function modalClose() { modal.style.display = 'none'; }; function chgImg() { var png = canvas.toDataURL(); document.getElementById("newImg").src = png; } function initLocalStorage() { myStorage.setItem("__log", JSON.stringify([])); } function setLocalStoreage() { var png = canvas.toDataURL(); var logs = JSON.parse(myStorage.getItem("__log")); setTimeout(function () { logs.unshift({ 0: png }); myStorage.setItem("__log", JSON.stringify(logs)); currentCanvas = 0; temp = []; }, 0); } /*----------- テキスト -------------*/ var canvasf = new fabric.Canvas('canvas-final'); var textObj = new fabric.Text('Hello Text!', { fontFamily: 'Delicious_500', left: 400, top: 225, fontSize: 80, textAlign: "left", fill: "#FF0000" // Set text color to red }); canvasf.add(textObj); </script> </main> </body> </html>
CSS
<style> header { background: #fff; } body { font-family: "Open Sans", sans-serif; line-height: 1.25; } @media screen and (min-width: 800px) { .modal_box { position: fixed; z-index: 7777; display: none; width: 80%; height: 500px; max-width: 1000px; margin: 0; padding: 60px 2vw 80px; border: 2px solid #aaa; text-align: center; background: #fff; box-sizing: border-box; overflow: scroll; } .modal_close { position: absolute; top: 0; right: 0; display: block; width: 62px; font-size: 46px; color: #000; line-height: 62px; text-align: center; background: #e6e6e6; } .modal_close i { line-height: 62px; vertical-align: bottom; } .modal_bg { position: fixed; top: 0; left: 0; z-index: 6666; display: none; width: 100%; height: 120%; background-color: rgba(0, 0, 0, 0.7); } } @media screen and (max-width: 769px) { /* ウィンドウサイズ769px以下の時のスタイル */ .modal_box { position: fixed; z-index: 7777; display: none; width: 80%; height: 500px; max-width: 1000px; margin: 0; padding: 60px 2vw 80px; border: 2px solid #aaa; text-align: center; background: #fff; box-sizing: border-box; overflow: scroll; } .modal_close { position: absolute; top: 0; right: 0; display: block; width: 62px; font-size: 46px; color: #000; line-height: 62px; text-align: center; background: #e6e6e6; } .modal_close i { line-height: 62px; vertical-align: bottom; } .modal_bg { position: fixed; top: 0; left: 0; z-index: 6666; display: none; width: 100%; height: 120%; background-color: rgba(0, 0, 0, 0.7); } } canvas { border: 3px solid #000; }</style>
0 コメント