canvasで描画した文字に変数を付与したい

Question

前提・実現したいこと

1, XMLファイルのデータをJavaScriptで取得し、取得した文字データをcanvas上に表示させる
2, マウスオーバーするとテキストが表示される

1まではできているのですが、canvasで描画した文字に対して変数は付与できるのでしょうか？

マウスオーバーの処理は変数を取得しないことには実装ができないので…
Googleで自分なりに調べたのですが、どれもcanvasに文字を描画する方法までしか書かれておらず困っています…
（もしかしたら検索キーワードが悪いのかもしれませんが…）

イメージ画像は下記の通りです

わかりやすいように色分けしています。

XMLファイルに座標データが入っており

ctx.fillText(任意のテキスト,XMLファイルで取得したX座標,XMLファイルで取得したy座標);

というような形で描画しています。
これに対して、変数を付与し、CSSやJavascriptでマウスオーバーしたときの処理を書きたいというわけです。

どなたかご教授いただければ幸いです。よろしくお願いいたします。

Comments

[yambejp]

手書きでいいので具体的に図示できますか？
SVGは想定外ですか？

[kairi003]

変数を付与というのがよく分からないのですが、canvas上に描画された文字にonMouseのようなイベントリスナをかけたいということでしょうか

[itzuakniami123]

kairi003様
そうですね、canvas上に描画された文字に対してonMouseといったイベントを設けたいと考えています。
そのために変数を作りたいのです…
テキストはいくつか存在するので、CSSでいうクラス、「.(変数）」を作りたいというわけです。

[itzuakniami123]

yambejp様
イメージ画像追加しました！これでつかめたでしょうか…？
SVGは想定外ですね…

[kairi003]

ちょっと勘違いしていたかもしれないんですが「canvasを」マウスオーバーするとテキストが表示されるでいいのですか？
「canvas上のテキスト」をマウスオーバーしたら、だと思っていたのですが

[yambejp]

特定の座標位置（範囲？）にマウスが乗るとテキストが表示するということですかね？

[itzuakniami123]

kairi003様
「canvas上のテキスト」をマウスオーバーしたらという認識で合っています！

[itzuakniami123]

yambejp様
その認識で合っています！

Answer 1

多分こんな感じではないでしょうか。
How do I check if a mouse click is inside a rotated text on the HTML5 Canvas in JavaScript?やHTML Canvas Hover Textを参考にしました。

実装が面倒で質問の本質ではないと思ったので、以下の例ではマウスがテキスト上で移動するとコンソールにテキストを表示するようにしています。開発者ツールで確認してください。

canvasは結局の所ペイントみたいな上書き仕様なので、canvas内に新たなテキストなどを表示・非表示をしたい場合、「上書き→すべて消す→下のものを再描画」という手順を踏むか、canvasの上に別のcanvasを重ねておき、吹き出しなどはそちらに描画するようにする、などの方法を取る必要があります。

また今回はわかりやすさ重視でなるべく単純な感じに書いてますが、理解ができるならクラス(HTMLではなくjsの)を用いた設計をするといい感じになると思います。

<canvas id="canvas" width=300 height=300></canvas>
<script src="script.js"></script>

function getTextRectPath(ctx, text, textX, textY) {
  // テキスト描画時の範囲情報TextMatrixから、テキスト背景の矩形パスを生成して返す
  const tm = ctx.measureText(text);
  const x = textX - tm.actualBoundingBoxLeft;
  const y = textY - tm.actualBoundingBoxAscent;
  const width = tm.width;
  const height = tm.actualBoundingBoxAscent + tm.actualBoundingBoxDescent;
  const path = new Path2D();
  path.rect(x, y, width, height);
  return path;
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "60px Arial";

const textList = [
  //各テキストの情報をまとめたオブジェクトの配列
  {text: 'text1', x: 100, y: 200, path: null},
  {text: 'text2', x: 200, y: 100, path: null}
];

for (const t of textList) {
  // テキスト背景の矩形パスを得てpathに代入
  t.path = getTextRectPath(ctx, t.text, t.x, t.y);
  // わかりやすさのため矩形を塗りつぶす(やらなくてもいい)
  ctx.fillStyle = 'red';
  ctx.fill(t.path);
  // テキストを描画する
  ctx.fillStyle = 'black';
  ctx.fillText(t.text, t.x, t.y);
}

canvas.addEventListener('mousemove', e => {
  // canvas上でマウスが動くと呼び出される関数
  const canvas = e.currentTarget;
  // canvasの左辺・上辺を得る
  const rect = canvas.getBoundingClientRect();
  const offsetX = rect.left;
  const offsetY = rect.top;
  // ページ全体上の座標(clienet~)↑からcanvas上のマウス座標を得る
  const x = e.clientX - offsetX;
  const y = e.clientY - offsetY;
  for (const t of textList) {
    // textListの各テキストについて、矩形パス上にマウスがあるか確認する
    if (ctx.isPointInStroke(t.path, x, y)) {
      console.log(t.text);
    }
  }
});

Answer 2

canvasで描画した文字に対して変数は付与できるのでしょうか？

できません。描画した後はただの画像なので。

各テキストに対して、fillText() するときに measureText() も呼んで TextMetrics オブジェクトとマウスホバー時に表示したいテキストをリストに保存しておき、Canvas の mousemove イベント内でCanvas内でのマウス座標が入る TextMetrics をリストから見つけて、それに対応するテキストを表示、という感じで実装はできそうです。

---

私ならCanvasに文字を描画しないで、HTMLの要素を手前に重ねますね。

Comments

[itzuakniami123]

ご回答ありがとうございます。
canvasを使わないでやるとなると、どういった形になるでしょうか？

Answer 3

<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
const canvas=document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
canvas.addEventListener('mouseover', ()=>{
  ctx.font = "12px serif";
  ctx.fillText("TEST TEXT", 10, 50);
}, false);
canvas.addEventListener('mouseout', ()=>ctx.clearRect(0, 0, canvas.width, canvas.height), false);
</script>

Comments

[itzuakniami123]

コードありがとうございます。
これだと、何回かマウスオーバーを繰り返すと下にあった画像が消えてしまいました…