質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2327閲覧

Fabric.jsでcanvasにテキストを挿入できるが動かせず消える

Izumo1101

総合スコア49

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/10/06 05:54

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は適当なボタンに割り当ててテストをしています。

何が間違えているのか、なにか考え違いをしているのか教えてください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

スクリプトの順の問題でした。

javascript

1window.onload = function(){ 2 const CanvasCon = document.getElementById('mycanvas'); 3 // const CanvasCon = document.getElementsByClassName( "upper-canvas " ) 4 CanvasCon.width=window.innerWidth-30; 5 CanvasCon.height = window.innerHeight-30; 6 MondaiCanvas(); 7 var canvas = new fabric.Canvas('mycanvas'); 8 canvas.width = window.innerWidth-30; 9 canvas.height = window.innerHeight-30; 10 // canvas.isDrawingMode = true; 11 // canvas.freeDrawingBrush.color = '#fffacd'; 12 // canvas.freeDrawingBrush.width = 4; 13 // document.getElementById('select').addEventListener("click", function(){ 14 // canvas.isDrawingMode = !canvas.isDrawingMode }, false); 15 }

このような形では正常動作をしたので、isDrawingModeの効きの問題だと考えています。
皆様ありがとうございました。

投稿2021/10/06 07:05

Izumo1101

総合スコア49

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問