Fabric.Jsを使用して、事前に用意した図をCANVASに組み合わせるプログラムを作成しています。
ただ、最初にCANVASに図を置いた時は、
JavaScript
1 2fabric.Image.fromURL( 3 'Image/png/' + name + '.png' , 4 function(oImg){ 5 //生成タイルのプロパティ設定 6 oImg.set('name' , name + '_' + i ); 7 oImg.set('top' , x ); 8 oImg.set('left' , y ); 9 oImg.set('scaleX' , 0.5 ); 10 oImg.set('scaleY' , 0.5 ); 11 oImg.set('width' , 100 ); 12 oImg.set('height' , 100 ); 13 oImg.set('hasControls', false); 14 //キャンバス追加 15 cv.add(oImg); 16 } 17 );
と、セットすることで、オブジェクトのサイズを固定にすることが出来たのですが、一度JSON型に保存した後、loadFromJSONでCANVASに
再配置したオブジェクトが、拡大縮小可能となってしまいます。
ちなみに、オブジェクト自体は保存した時と同じ状態で正常に配置されています。
loadFromJSON部分のコードは下記のようにしております。
JavaScript
1 2// -------------------------------- 3// JSONから復元 4// -------------------------------- 5function fromJson(jsondata) { 6 cv.loadFromJSON(jsondata); 7 cv.renderAll(); 8 cv.calcOffset(); 9 //コントロールフィル非表示 10 cv.setUnControls(); 11}; 12 13 14// -------------------------------- 15// コントロールフィルを表示しない(全Obj) 16// -------------------------------- 17fabric.Canvas.prototype.setUnControls = function() { 18 var objects = this.getObjects(); 19 20 for (var i = 0, len = this.size(); i < len; i++) { 21 console.log("前:" + objects[i].get('hasControls')); 22 if (objects[i].set('hasControls')) { 23 objects[i].set('hasControls',false); 24 } 25 console.log("後:" + objects[i].get('hasControls')); 26} 27 28 return ; 29}; 30
上記コードにもあるように、変更前と後とで'hasControls'の値をチェックして見たのですが、trueだったものが正常にfalseになっております。
何か足りない部分があれば、ご教授いただければ幸いです。
以上、よろしくお願いします。
6/9追記
同じような仕組みをASP.Netでも作成しているのですが、ASP.Netの場合はloadFromJSONメソッドの後、renderAllメソッドのタイミングでCanvasにオブジェクトが表示されます。
が、今回は似たようなシステムをmonacaで開発しているのですが、renderAllメソッドを通ってもCanvasにオブジェクトが反映されず、fromJsonメソッドを過ぎて初期化が完了し、操作可能な状態にならないとcanvasにオブジェクトが表示されません。
これは、monacaもしくはcordova特有の現象なのかもしれません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。