ファブリックJS - 背中にオブジェクトを送る

オブジェクト（私の例ではポリゴン）を選択すると、オブジェクトは自動的に前面に移動します。私は、z軸上での動きを防ぐ方法を探しています。あるいは選択した後に後方に送る方法があります。ここでファブリックJS - 背中にオブジェクトを送る

は簡単な例へのリンクです：あなたはポリゴンのいずれかを選択するとhttp://jsfiddle.net/98cuf9b7/1/

、それが前面に移動します。私は選択後にそれを送り返そうとしましたが、 "canvas.sendToBack（object）"関数が呼び出されても、それはまだ前面に残ります。私の例で

コードは次のとおりです。

var canvas = new fabric.Canvas('c'); 

var pol = new fabric.Polygon([ 
    {x: 200, y: 0}, 
    {x: 250, y: 50}, 
    {x: 250, y: 100}, 
    {x: 150, y: 100}, 
    {x: 150, y: 50} ], { 
    left: 250, 
    top: 150, 
    angle: 0, 
    fill: 'green' 
    } 
); 

var pol2 = new fabric.Polygon([ 
    {x: 200, y: 50}, 
    {x: 200, y: 100}, 
    {x: 100, y: 100}, 
    {x: 100, y: 50} ], { 
    left: 300, 
    top: 200, 
    angle: 0, 
    fill: 'blue' 
    } 
); 
canvas.add(pol, pol2); 

canvas.on('object:selected', function(event) { 
     var object = event.target; 
     canvas.sendToBack(object); 
     //object.sendToBack(); 
     console.log("OK"); 
    });

出典

2016-11-15 Sophie D

これはバグではありません。 http://stackoverflow.com/questions/38247337/fabricjs-1-6-3-why-active-object-is-always-shown-on-top/38293440#38293440を参照してください。 – Ben

[OK]をので、これが原因で、使用している生地のバージョンで起こっています。私はあなたが使用することができますようにフィドルでversion 0.9 .これは、オブジェクトが選択されるたびに、そのZ-インデックスがその上/前に変更されるというデフォルトの動作であるようです。それ以降のバージョンを使用してみてください。他のバージョンでは、たとえ選択したとしても、後ろにオブジェクトがある場合、この問題はありません。デモには後でversion(1.4.0)が入ります。ここでは、オブジェクトを選択するたびに、逆方向に移動します。そして、あなたが送り返しているコードをコメントアウトすると、それは正面にあれば前に、後ろにあれば後ろにとどまるでしょう。

var canvas = new fabric.Canvas('c'); 
 

 
var pol = new fabric.Polygon([ 
 
    {x: 200, y: 0}, 
 
    {x: 250, y: 50}, 
 
    {x: 250, y: 100}, 
 
    {x: 150, y: 100}, 
 
    {x: 150, y: 50} ], { 
 
    left: 250, 
 
    top: 150, 
 
    angle: 0, 
 
    fill: 'green' 
 
    } 
 
); 
 

 
var pol2 = new fabric.Polygon([ 
 
    {x: 200, y: 50}, 
 
    {x: 200, y: 100}, 
 
    {x: 100, y: 100}, 
 
    {x: 100, y: 50} ], { 
 
    left: 300, 
 
    top: 200, 
 
    angle: 0, 
 
    fill: 'blue' 
 
    } 
 
); 
 
canvas.add(pol, pol2); 
 

 
canvas.on('object:selected', function(event) { 
 
     var object = event.target; 
 
     canvas.sendToBack(object); 
 
     //object.sendToBack(); 
 
     console.log("Selected"); 
 
    });

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script> 
 
<canvas id="c" width="500" height="500"></canvas>

出典

2016-11-15 09:39:08 Manish

返信いただきありがとうございました:) 私自身のプロジェクトでは、私は新しいバージョンを使用していますが、私は新しいバージョンでフィドルを作成しましたが、再び動作しません：http://jsfiddle.net/z7koh0h4/1/ それがバグだと思うので、私はこれを報告します。 :)ありがとう –

ステップ1：その後、sendtoback使用し、sendtofront ....

Working Example with back and front working

<html> 
    <body> 
    <button onclick="sendSelectedObjectBack()"> Send Back </button> 
    <canvas id="c" width="600" height="600"></canvas> 

    <script> 
     var canvas = new fabric.Canvas('c', { 
     preserveObjectStacking: true 
     }); 

     var pol = new fabric.Polygon([{ 
     x: 200, 
     y: 0 
     }, { 
     x: 250, 
     y: 50 
     }, { 
     x: 250, 
     y: 100 
     }, { 
     x: 150, 
     y: 100 
     }, { 
     x: 150, 
     y: 50 
     }], { 
     left: 250, 
     top: 150, 
     angle: 0, 
     fill: 'green' 
     }); 

     var pol2 = new fabric.Polygon([{ 
     x: 200, 
     y: 50 
     }, { 
     x: 200, 
     y: 100 
     }, { 
     x: 100, 
     y: 100 
     }, { 
     x: 100, 
     y: 50 
     }], { 
     left: 300, 
     top: 200, 
     angle: 0, 
     fill: 'blue' 
     }); 
     canvas.add(pol, pol2); 

     var objectToSendBack; 
     canvas.on('object:selected', function(event) { 
     objectToSendBack = event.target; 
     }); 

     var sendSelectedObjectBack = function() { 
     canvas.sendToBack(objectToSendBack); 
     } 

    </script> 
    </body> 
</html>

以下のようなfabricjsオプション：あなたは preserveObjectStacking: true

ステップ2を使用することができます

出典

2017-01-26 17:41:24 vijay

最初のポイントは私の時間を保存しました..ありがとう@ビジェイ – lalithkumar

ファブリックJS - 背中にオブジェクトを送る

答えて

関連する問題