web-dev-qa-db-ja.com

ファブリックJS-オブジェクトをバックに送信

オブジェクト（私の例ではポリゴン）を選択すると、そのオブジェクトは自動的に前面に移動します。 z軸の動きを防ぐ方法、または選択後に後方に送る方法を探しています。誰かが助けてくれるかもしれません。

簡単な例へのリンクは次のとおりです。 http://jsfiddle.net/98cuf9b7/1/

ポリゴンの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");
  });
javascriptfrontendfabricjs
8
Sophie D

これは、使用しているファブリックのバージョンが原因で発生しています。私が見ることができるように、フィドルではversion0.9 _._を使用しているので、オブジェクトが選択されるたびに、そのz-indexが上部/前面になるように変更されるのがデフォルトの動作のようです。それ以降のバージョンを使用してみてください。他のバージョンでは、オブジェクトが後ろにある場合、この問題は発生しません。オブジェクトを選択しても、後ろに残ります。これは、後の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>_
9
Manish

ステップ1：preserveObjectStacking: trueを使用できます

ステップ2：次に、以下のようなsendtoback、sendtofront .... fabricjsオプションを使用します

背面と前面が動作する動作例

    
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 src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>


<canvas id="c" width="500" height="300" style="margin-top:-150px;"></canvas>

<button height="60" style="margin-left:200px;" onclick="sendSelectedObjectBack()"> Send Back </button>
14
vijay