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

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

ただいまの
回答率

88.35%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,292

SaintKnowledge

score 365

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",
......(省略)
}}


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

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