canvas上でクリックした位置にtextareaを出現させたい
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 527
やりたいこと
canvas上でクリックした際、クリック位置のマウス座標を取得し、その座標にtextareaを出現させるようなことを実現したいです。
やってみたこと
テキストボックスの内容を取得し、canvas上のクリックした位置に取得した内容を表示させるというものを作ってみました
ちなみに以下のコードになります。
<html>
<head>
<link rel="stylesheet" href="canvas.css" type="text/css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="canvas.js"></script>
</head>
<p id="tool">
<canvas id="axisCanvas" style="width: 700px; height: 800px; margin: 0 auto;position: absolute; left: 500px; top: 200px"></canvas>
Text: <input id="text" name="text" type="text" value="Example"> |
Size: <input id="size" name="size" type="text" size="3" value="14"> |
Color: <input id="color" name="color" type="text" size="7" value="#000">var canvas; // canvas要素(HTMLCanvasElement)
var ctx; // 2Dコンテキスト(CanvasRenderingContext2D)
var canvasW = 700; // canvas要素の横幅(px)
var canvasH = 800; // canvas要素の縦幅(px)
var mouseX; // 最後にクリックされた位置のx座標
var mouseY; // 最後にクリックされた位置のy座標
var text, size, color;
window.onload = function() {
// canvas要素を取得し、サイズ設定
canvas = document.getElementById('axisCanvas');
canvas.width = canvasW;
canvas.height = canvasH;
// 描画のために2Dコンテキスト取得
ctx = canvas.getContext('2d');
// クリックイベントの登録
canvas.onclick = function(e) {
// 一度描画をクリア
// クリック位置の座標計算（canvasの左上を基準。-2ずつしているのはborderの分）
var rect = e.target.getBoundingClientRect();
mouseX = e.layerX;
mouseY = e.layerY;
// クリック位置を中心に円を描画
//ctx.beginPath();
//ctx.arc(mouseX/1.73, mouseY/1.95, 5, 0, Math.PI * 2, false);
// ctx.fill();
text = $('#text').val();
size = $('#size').val();
color = $('#color').val();
console.log(size);
console.log(mouseX + ","+mouseY);
console.log("Math.floor(rect.left)"+Math.floor(rect.left));
console.log("rect.left"+rect.left);
console.log("rect.top"+rect.top);
console.log("e.clientX"+e.clientX);
// 座標の表示テキストを描画
var maxWidth = 200;
ctx.textAlign = 'right';
ctx.font = size+"px 'ＭＳ ゴシック'";
ctx.fillStyle = color;
ctx.fillText(text, mouseX, mouseY);
//setTF(this.form.txtField1,'visible',5,100);
}
};
ネット上で同じことをしようとしていると考えられる方のコードを利用してみましたがうまくいきませんでした。そのコードが以下のものになります。完全にお手上げ状態です。恐縮ですが詳しい方、何卒ご教授のほどお願い致します。
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="canvas.js"></script>
</head>
<body>
<canvas id="c" width="200" height="200"></canvas>
</body>
</html>var canvas = document.getElementById("c"),
textarea = null;
canvas.addEventListener('onclick', function(e) {
if(!textarea) {
textarea = document.createElement('textarea');
textarea.className = 'info';
document.body.appendChild(textarea);
}
var x = e.clientX - canvas.offsetLeft,
y = e.clientY - canvas.offsetTop;
console.log("asasasasasasasasas"+x);
textarea.value = "x: " + x + " y: " + y;
textarea.style.top = e.clientY + 'px';
textarea.style.left = e.clientX + 'px';
}, false);-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
これでそれっぽく動いてるんですが違います？
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<canvas id="c" width="200" height="200"></canvas>
</body>
<script>
var canvas = document.getElementById("c"),
textarea = null;
canvas.addEventListener('click', function(e) {
if(!textarea) {
textarea = document.createElement('textarea');
textarea.className = 'info';
document.body.appendChild(textarea);
}
var x = e.clientX - canvas.offsetLeft,
y = e.clientY - canvas.offsetTop;
console.log("asasasasasasasasas"+x);
textarea.value = "x: " + x + " y: " + y;
textarea.style.position = 'absolute';
textarea.style.top = e.clientY + 'px';
textarea.style.left = e.clientX + 'px';
}, false);
</script>
</html>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
2018/11/29 20:16
かなり理想的な動きをしています。
プラスで、書き込んだものを残していく形にしたいのですが、もし何か案がありましたら、恐縮ですがご教授
お願いいたします。