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

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

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

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

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

JavaScript

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

Q&A

0回答

3858閲覧

【Fabric.js(1.4.13)】JSONから描画したCanvasを、修正してJSONに吐き出すと、追加拡張したオブジェクト項目と値が欠落する

SaintKnowledge

総合スコア368

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2017/08/09 09:09

編集2017/08/09 09:11

Fabric.jsを使用して、背景に敷いたJPG画像の一部を四角形で囲み、ImageMapでいくつかのリンクを付ける処理を書いています。
ショッピングサイトの管理者機能です。
(公開画面はめくり型の電子カタログの写真ひとつひとつにImageMapリンクを付けて、写真をクリックするとカート画面にジャンプする、という感じです)

作成したひとつの四角形(Rect)と背景を、JSON.stringify(canvas)でJSON化。これをAjaxでMySQLに格納し、管理者が同画像にさらにリンクを追加・修正する時、
1.AJAXでMySQLから該当のJSONを呼び出し、
2.canvas.loadFromJSON(json).renderAll()で描画し、
3.四角形の座標修正して再度格納する、
という処理において。。

処理上、囲んだ四角形のオブジェクトに、追加拡張オブジェクトとして「商品コード」を付けてJSON吐き出し、取り込みを行っています。
(参考)Fabricjs入門Part3
シリアライゼーションの「単にオブジェクトのシリアライズされた表現をカスタマイズする必要がある時」「追加のプロパティを使って、矩形の toObjectメソッドを拡張」部分

var rect = new fabric.Rect(); rect.toObject = (function(toObject) { return function() { return fabric.util.object.extend(toObject.call(this), { name: this.name }); }; })(rect.toObject); canvas.add(rect);

これによって、最初の登録では、オブジェクトが拡張されて「商品コード」がJSONに入り登録出来ることを確認。そして上記2.において、console.log(canvas)で、描画後に「商品コード」も取り込んでいることは確認済です。
しかしながら、上記3.において、座標修正後にJSON.stringify(canvas)で吐き出した内容には、「商品コード」が含まれない、という現象があります(座標修正しなくても・・)。この直前にconsole.log(canvas)で見ると、「商品コード」は入っています。
console.log(canvas.toObject())でも、「商品コード」は含まれていません。。

上記2.の後に、2番目として新しく四角形(Rect)を作成し、これに新しく「商品コード」を付与すると、この2番目の「商品コード」はJSONに吐き出されます。

ポカミスかもしれないと思って数時間格闘していますが、どうにも解決しません。Fabric.js独特のcanvas親子構造で、追加拡張したオブジェクトは再取り込みで排除されるのか、バージョンが古いのか、と予想しつつも。。

同じような現象に出会って解決した方はいらっしゃいませんでしょうか?

以下は「canvas.loadFromJSON(json).renderAll()」で取り込んだ時のJSONオブジェクトです。「myNumber」が商品コードにあたります。

{"objects":[ {"type":"rect", "originX":"left", "originY":"top", "left":135, "top":183, "width":128, "height":582, "fill":"rgba(55, 254, 255, 0.3)", ......(省略) "rx":0, "ry":0, "myNumber":"1111-222222"} ], "background":"", "backgroundImage":{ "type":"image", ......(省略) ,"src":"0001.jpg", ......(省略) }}

よろしくお願い致します。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問