Fabric.jsでcanvasに問題文を描画し、それをオブジェクトとして動かしたいのですができません。
描画はできるのですが、それ以外に線などを書こうとすると問題文が消えますし、他に何も描かない状態でもマウスカーソルが十字に変化しません。
ちなみに基本的な自由線や図形を描画し動かすことはできています。
html
1<canvas id="mycanvas" width="900px" height="750px" ></canvas> 2<button id="select" type="button">選択</button>
javascript
1window.onload = function(){ 2 const CanvasCon = document.getElementById('mycanvas'); 3 CanvasCon.width=window.innerWidth-30; 4 CanvasCon.height = window.innerHeight-30; 5 var canvas = new fabric.Canvas('mycanvas'); 6 canvas.width = window.innerWidth-30; 7 canvas.height = window.innerHeight-30; 8 canvas.isDrawingMode = true; 9 canvas.freeDrawingBrush.color = '#fffacd'; 10 canvas.freeDrawingBrush.width = 4; 11 document.getElementById('select').addEventListener("click", function(){ 12 canvas.isDrawingMode = !canvas.isDrawingMode }, false); 13 } 14 15 function MondaiCanvas(){ 16 var canvas = new fabric.Canvas('mycanvas'); 17 var t = document.getElementById("mondai").textContent; 18 var txt = new fabric.Text(t, { 19 left: 20, top: 20, 20 fill: 'white', 21 stroke: 'black', 22 strokeWidth: 2, 23 fontFamily: "UD デジタル 教科書体 N-R", 24 fontSize: 300 25 }); 26 canvas.add(txt); 27 }
mondaiには他のスクリプトで生成した2+4などの算数の問題があります。要はこの式の描画の位置をユーザーに自由に動かせるようにしたいのです。MondaiCanvasは適当なボタンに割り当ててテストをしています。
何が間違えているのか、なにか考え違いをしているのか教えてください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。