1

いくつかのテストの後、最終的に fabric.canvas を MySQL データベースに保存しました。問題は、キャンバス内の画像のサイズを変更したくないことです。必要なのは回転だけです。残念ながら、保存された json には fabric.Image オブジェクトの lockScalingX および lockScalingY プロパティが保存されていません。fabric.canvas を取得すると、画像のサイズを変更できます。

これを回避する方法はありますか？

私は機能を使用します

var jsonCanvas = JSON.stringify(canvas.toDatalessObject());

phpを使用してjsonをデータベースに保存し、保存されたjsonを次を使用して取得します

canvas.loadFromJSON(data);

私が話していることを確認するには、このフィドルを参照してください-> http://jsfiddle.net/lpccoder/YX9Wf/1/ oImg.lockScalingX = oImg.lockScalingY = true; を設定します。サイズ変更を避けるためにキャンバスに追加する前に。[保存] ボタンをクリックするとキャンバスが保存されますが、([読み込み] ボタンを使用して) 読み込むと、画像のサイズを変更できます。

これに対する回答が得られないので、キャンバスをロードした後に lockScalingX と lockScalingY を設定しようとしていますが、 forEach メソッドを使用すると奇妙な動作が発生します。つまり、これを機能させるには、forEach の前にアラートを配置する必要があります。このアラートを配置しないと、forEach ループは機能しません。これを明確にするために、この 2 つのフィドルを見て比較できます。

作業中 -> jsfiddle.net/lpccoder/hGPCG/

動かないもの -> jsfiddle.net/lpccoder/Vv4AW/

私はJavaScriptコーディングが初めてで、初心者の質問かもしれませんが、それは非常に奇妙な動作だと思います...解決策はありますか?

4

1 に答える 1

2

https://groups.google.com/forum/#!topic/fabricjs/rGX8F93TeGEでこの質問に答えてくれた Rodrigo Pandini に感謝します。

解決策は、コールバック関数を使用してプロパティを手動で設定することです。

canvas.loadFromJSON(jsonCanvas, function(){
  var objects = canvas.getObjects();
  // Trying to set the property after load JSON
  //alert('Objects: ' + objects);
  objects.forEach(function(o) {
    o.lockScalingX = o.lockScalingY = true;
  });
  canvas.renderAll(); 
});

私が知る限り、json にはこのプロパティが保存されていないためです。最終的な解決策は -> http://jsfiddle.net/lpccoder/Vv4AW/1/で確認できます。

于 2012-07-17T11:20:19.867 に答える