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", ......(省略) }}
よろしくお願い致します。
あなたの回答
tips
プレビュー