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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

解決済

Canvasで描画した複数画像にIDを振って保存し、再編集できるようにしたい

junjuwar
junjuwar

総合スコア30

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

1回答

0リアクション

1クリップ

152閲覧

投稿2022/06/28 03:38

前提

使用ツール
M1 Mac
Ruby on Rails
Rails6
canvas
Docker

実現したいこと

canvasを利用して作成した画像(アイコン)11個にIDを振ってテーブルに保存したい。
編集画面で保存していたテーブルからそれらの画像を取得して、保存時の時の並び順を再現したい。
①画像のように画像(ユニフォームアイコン)をドラッグ&ドロップで並べ替える
②投稿ボタンを押す
③編集画面に転移した時に投稿したときの画像の並び順を再現し、編集可能とする
イメージ説明

発生している問題・エラーメッセージ

canvasを画像として保存する方法は見つかるのですが、一つ一つの画像(ユニフォームアイコン)にIDを振って、それらをテーブルに格納するための方法が見つかりません。

該当のソースコード

new.js

window.onload = function () { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var BB = canvas.getBoundingClientRect(); var offsetX = BB.left; var offsetY = BB.top; var WIDTH = canvas.width; var HEIGHT = canvas.height; var dragok = false; var startX; var startY; var img = new Image(); img.src = "/images/uni.jpg"; img.onload = () => { draw(); } var rects = []; rects.push({ x: 220 - 10, y: 90 - 35, width: 30, height: 30, fill: "#444444", isDragging: false }); rects.push({ x: 140 - 10, y: 50 - 35, width: 30, height: 30, fill: "#ff550d", isDragging: false }); rects.push({ x: 60 - 10, y: 90 - 35, width: 30, height: 30, fill: "#800080", isDragging: false }); rects.push({ x: 100 - 10, y: 150 - 35, width: 30, height: 30, fill: "#0c64e8", isDragging: false }); rects.push({ x: 180 - 10, y: 150 - 35, width: 30, height: 30, fill: "#0c64e8", isDragging: false }); rects.push({ x: 140 - 10, y: 200 - 35, width: 30, height: 30, fill: "#0c64e8", isDragging: false }); rects.push({ x: 100 - 10, y: 250 - 35, width: 30, height: 30, fill: "#0c64e8", isDragging: false }); rects.push({ x: 180 - 10, y: 250 - 35, width: 30, height: 30, fill: "#0c64e8", isDragging: false }); rects.push({ x: 30 - 10, y: 220 - 35, width: 30, height: 30, fill: "#0c64e8", isDragging: false }); rects.push({ x: 260 - 10, y: 220 - 35, width: 30, height: 30, fill: "#0c64e8", isDragging: false }); draw(); function rect(x, y, w, h) { ctx.beginPath(); ctx.rect(x, y, w, h); ctx.closePath(); ctx.fill(); ctx.save(); } function clear() { ctx.clearRect(0, 0, WIDTH, HEIGHT); ctx.save(); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; rect(0, 0, WIDTH, HEIGHT); for (var i = 0; i < rects.length; i++) { var r = rects[i]; ctx.fillStyle = r.fill; //四角の場合 //rect(r.x, r.y, r.width, r.height); //アイコンフォントの場合 //ctx.font = "900 " + r.width + "px 'Font Awesome 5 Free'"; //ctx.fillText("\uf553", r.x - 3, r.y + r.height - 2); //画像の場合 ctx.drawImage(img, r.x, r.y, r.width, r.height); ctx.save(); } } canvas.onmousedown = myDown; function myDown(e) { e.preventDefault(); e.stopPropagation(); var mx = parseInt(e.clientX - offsetX); var my = parseInt(e.clientY - offsetY); dragok = false; for (var i = 0; i < rects.length; i++) { var r = rects[i]; if (mx > r.x && mx < r.x + r.width && my > r.y && my < r.y + r.height) { dragok = true; r.isDragging = true; } } startX = mx; startY = my; } canvas.onmouseup = myUp; function myUp(e) { e.preventDefault(); e.stopPropagation(); dragok = false; for (var i = 0; i < rects.length; i++) { rects[i].isDragging = false; } } canvas.onmousemove = myMove; function myMove(e) { if (dragok) { e.preventDefault(); e.stopPropagation(); var mx = parseInt(e.clientX - offsetX); var my = parseInt(e.clientY - offsetY); var dx = mx - startX; var dy = my - startY; for (var i = 0; i < rects.length; i++) { var r = rects[i]; if (r.isDragging) { r.x += dx; r.y += dy; } } draw(); startX = mx; startY = my; } } };

投稿画面のhtml

new.html.erb

<h1>新規投稿</h1> <!-- form_for部分 --> <%= form_for(@post) do |f| %> <h4>タイトル</h4> <%= f.text_field :title %> <h4>カテゴリー</h4> <%= f.text_field :category %> <h4>本文</h4> <%= f.text_area :body %> <div> <canvas id="canvas" width=300 height=300></canvas> </div> <%= f.submit '投稿', class:"btn btn-lg btn-block", id:"save-button" %> <%= javascript_pack_tag 'posts/new' %> <% end %>

自分で調べたことや試したこと

調べ方がわかっていません。申し訳ございません。

使っているツールのバージョンなど補足情報

M1 Mac
Ruby on Rails
Rails6
webpacker
jQuery
canvas
Docker

ご教示いただければ幸いです。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

yambejp

2022/06/28 03:49

SVGではだめなのでしょうか?
junjuwar

2022/07/01 12:26

すみません。SVGだとダメなのでしょうかの意味がわかっていないのですが、もう少し詳細に教えていただけますでしょうか?
yambejp

2022/07/01 12:37

svgという画像形式はレイヤー管理ができるので画像内の個別の画像を操作できます という意味です
junjuwar

2022/07/03 03:02

拡張子をjpgからsvgに変換してコードを書き換えたのですが、画面上に映らなくなってしまいました。 var img = new Image(); img.src = "/images/uni.jpg"; img.onload = () => { draw(); } ここのjpgをsvgに変更するだけではダメでしょうか

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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