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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

1回答

5972閲覧

Fabric.Jsを使用して、JSONから復元したオブジェクトのサイズを拡大縮小させないようにしたい

T_Furuta

総合スコア25

canvas

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

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

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2020/06/05 03:14

編集2020/06/09 03:27

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特有の現象なのかもしれません。

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

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

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

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

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

guest

回答1

0

自己解決

タイミングの問題かと思いますが、表示させるコードのイベントを分けることにより、解決しました。

javascript

1//画面初期化 2function page_init() { 3  var canvas = document.getElementById('mycanvas'); 4  if (canvas.getContext){ 5    initcanvas(); 6    let hidOldJson = localStorage.getItem('hidOldJson'); 7    if (hidOldJson != "") { 8      cv.clear(); 9      cv.loadFromJSON(hidOldJson); 10    } ; 11  } 12} 13 14//画面表示 15function page_show() { 16 17  cv.renderAll(); 18  cv.calcOffset(); 19  //コントロールフィル非表示 20  cv.setUnControls(); 21 22} 23 24

上記コードのように、画面初期化時は、loadFromJSONメソッドのみを記載しておき、画面表示イベントでその下部分のコードを記載することで正常に動作するようになりました。

投稿2020/06/11 00:50

T_Furuta

総合スコア25

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問