javascriptについて

Question

fabric.jsについてお伺いします。
初期設定では、図形やテキストを選択すると、
それらの選択したオブジェクトが、一番手前に自然と表示されるかと思います。

これを、選択しても、一番手前に移動することなく、そのまま階層が変わらないようにするにはどうすればよいでしょうか。

Answer

ECマスターズの田中です。

fabric.jsの仕様を確認の上、改めてご案内いたしますので
今しばらくお待ちいただきますようお願いします。

Answer

ECマスターズの田中です。

> 選択しても、一番手前に移動することなく、そのまま階層が変わらないようにするにはどうすればよいでしょうか。

Canvas作成時のオプションにて、
preserveObjectStacking を true に
ご設定いただきますようお願いします。

var canvas = new fabric.Canvas('canvas', {
  preserveObjectStacking: true
});

Answer

変更前

var canvas = new fabric.Canvas('c',{ allowTouchScrolling : true, preserveObjectStacking:false,imageSmoothingEnabled: true,isDrawingMode:false,
});

変更後
var canvas = new fabric.Canvas('c',{ allowTouchScrolling : true, preserveObjectStacking:true,imageSmoothingEnabled: true,isDrawingMode:true,
});

としました。
試しに変更したisDrawingModeのみ効き、
本来希望しているpreserveObjectStackingは効かない状態で困っております。
※isDrawingModeはtrueにしたところ、画面上で手書きができるようになったのですが、preserveObjectStackingは、効いていない状態です。

Answer

ECマスターズの田中です。

オプションが別の箇所で定義されていないでしょうか。

以前ご質問いただいたページで読み込まれている
custom_fabric3.0.js
を確認したところ、
preserveObjectStacking が false に設定されている箇所がございましたので、
こちらの変更をお試しいただきますようお願いします。

Answer

custom_fabric3.0.jsの
preserveObjectStacking もtrue に変えてみましたが、
変化がありません。

引き続きよろしくお願い致します。

Answer

ECマスターズの田中です。

それでは、実際のページの動作を確認させていただく必要がございますので、
preserveObjectStacking が true に設定された
custom_fabric3.0.js が読み込まれたページのURLを、
「投稿内容について報告する」よりお知らせいただきますようお願いいたします。

Answer

ECマスターズの田中です。

URLをお知らせいただき、ありがとうございました。
確かに、custom_fabric3.0.js にて true が設定されておりました。

さらにページの動作を確認したところ、
ページ内に直接記載されているタグにて
エラーが発生していることがわかりました。
下記の部分となります。


var idName = '';
switch ( document.referrer ){
// ulr1
case '（URL省略）': // box1を表示させるリンク元URL
idName = 'box1';
break;
//url2
case 'url2': // box2を表示させるリンク元URL
idName = 'box2';
break;
//url3
case 'url3': // box3を表示させるリンク元URL
idName = 'box3';
break;
};
document.getElementById(idName).style.display = "none";


最後の「document.getElementById（後略）」にて、
IDを持つ要素が見つからないためエラーが発生しており、
後に記載された、canvas周りの操作も含むJavaScriptの動作を
妨げている可能性がございます。

idNameのIDを持つ要素が見つからなくても
エラーで停止することのないように、

document.getElementById(idName).style.display = "none";
を
var idElm = document.getElementById(idName);
if(idElm){ idElm.style.display = "none"; }
以上２行に置き換えていただきますようお願いします。

Answer

var idElm = document.getElementById(idName);
if(idElm){ idElm.style.display = "none"; }

の２行に変えてみました。
しかし、こちらのパソコン２台でリロードし確認しましたが、変わりなしです。

Answer

ECマスターズの田中です。

ご対応ありがとうございます。
変更されてエラーが無くなったこと、それでも症状が続いていることを
確認いたしました。

改めてソースを確認したところ、

       group.on(
         {
          'selected': function(e) {
               Controller._canvas.bringToFront( this )

という記述を見つけました。

おそらく、最後の行にて
「要素が選択されたら、その要素を最前面に配置する」
という処理が行われているようですので、
この最後の1行、
Controller._canvas.bringToFront( this )
をコメントアウトしていただき、
改めて動作をご確認いただきますようお願いします。

Answer

田中様

ありがとうございます。
指定箇所をコメントアウトしました。

明日、様々なデバイスで動作確認致します。

もう一点。
同じサイトについてですが、

わかりやすく、ピンク色で表記しておる場所が、
どのような時も必ず手前に表示されるおようにするにはどうすればよいでしょうか。

javascript で、zindex？なのかと思い設置してみましたが、
思うようにいきませんで、今はその設定は無しに戻しました。

obj.set('opacity' , 0.3)の透過性は残したまま、一番手前側に常に表示させたいのです。

ご教授願います。

Answer

ECマスターズの伊藤です。
　　　　
頂いておりますご質問についてですが、
担当より、明日以降に回答させていただきます。

恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

ECマスターズの田中です。

> わかりやすく、ピンク色で表記しておる場所が、
> どのような時も必ず手前に表示されるおようにするにはどうすればよいでしょうか。

obj.set('opacity' , 0.3);
の直後に、
obj.bringToFront();
を実行していただくのはいかがでしょうか。

また、先にご案内差し上げた
Controller._canvas.bringToFront( this )
が適用されており、
かつ症状が続いていることを確認いたしました。
こちら、コメントを解除していただきますようお願いします。

先の
obj.set('opacity' , 0.3);
が記載されているonChange関数に含まれる
canvas.forEachObjectを利用して、
Canvas内各要素の状況を確認できるようですので、

canvas.forEachObject(function(obj) {
    
以上1行を

canvas.forEachObject(function(obj,index,allobj) {
if( index === 0 ) console.log(allobj);

以上2行にご変更いただき、
各要素が変更されるたびに、Canvas内全要素の状態を
開発者ツールにて確認できる状態にしてただきますようお願いします。

併せて、
     objects.sort(function(a,b) {
の直前に
console.log(objects);
を追記していただき、
要素を並べ替える上記関数がどのタイミングで動作しているか
開発者ツールにて確認できる状態にしてただきますようお願いします。