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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

3229閲覧

canvasで作った図形に対してドラッグ操作を行えるようにしたい

otk12

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2022/01/26 11:56

htmlファイル
イメージ説明
JSファイル
イメージ説明
現在下記のイメージのようにcanvas上でクリックをしたら円の作成を行い
作成ボタンを押すと消えるようになっております。
イメージ説明

  • やりたいこと

選択ボタンをクリックした場合、描画した円をドラッグアンドドロップ操作で動かすことを可能にする。

  • 試したこと

いくつかメソッドなどは調べてdraggableやmousedown,mousemoveなどを調べてみましたが、canvas上で作成した円を指定する方法がわからない状態です。

何卒ご教授いただけると幸いです。
よろしくお願いいたします。

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

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

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

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

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

guest

回答3

0

数年前に同じようなものを実装したことがあります。
JavaScriptとjQueryだけだと、k08045kkさんの回答どおりで、自分でマウスイベントを監視するロジックを組むしかありません。
表示済みの図形の座標を変数に保持しておいて、

  • マウスダウンの座標が近くにあれば選択、
  • マウスアップされないまま一定距離マウスが動いたらドラッグなので再描画、
  • マウスアップされたらドラッグ(のフラグ)を解除。

みたいなことをします。
業務で実装したのでそのソースは公開できませんし、当然手元にありません。

cx20さんの回答で紹介されているライブラリは面白そうですね。
これが使えるかどうかは質問者自らが判断するしかないと思います。

投稿2022/01/26 14:59

yossie

総合スコア106

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

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

0

ベストアンサー

Canvas の標準機能だと厳しいかもしれません。
ドラッグ&ドロップに対応したライブラリがあるのでそちらを検討してみるのは如何でしょうか?

■ Dragging - PixiJS Examples
https://pixijs.io/examples/#/interaction/dragging.js
■ Manage selection | Fabric.js Demos
http://fabricjs.com/manage-selection

投稿2022/01/26 12:39

編集2022/01/26 12:40
cx20

総合スコア4632

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

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

otk12

2022/01/26 16:02

ありがとうございます! 試してみます。
guest

0

canvasに描画した円は、HTML要素ではないため、HTML要素のように指定することはできません。地道に描画済みの円の座標とマウスの座標から計算で算出するしかないと思いです。

(ソースコードを画像で貼るのは流石にやめてください。回答者がわざわざ文字起こししないと動作確認できなくなります。そのため、回答率が減ります)

投稿2022/01/26 12:33

k08045kk

総合スコア384

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

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

otk12

2022/01/26 15:59

ソースコード失礼いたしました。 次回から気をつけます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問