Fabric JS - 뒤로 객체 보내기

객체 (예 : 다각형)를 선택하면 자동으로 객체가 Front로 이동합니다. 나는 z 축의 움직임을 막거나 선택 후에 뒤로 돌려 보낼 방법을 찾고있다. 누군가 도움을 줄 수 있을까?Fabric JS - 뒤로 객체 보내기

당신이 다각형 중 하나를 선택 http://jsfiddle.net/98cuf9b7/1/, 그것은 전면으로 이동됩니다 : 여기

간단한 예제에 대한 링크입니다. 내가 선택한 후 뒤로 보내려고했는데 "canvas.sendToBack (object)"함수가 호출 되더라도 여전히 Front에 남아 있습니다. 내 예에서

코드는 다음과 같습니다이 때문에 사용하는 직물 버전의 일어나고

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

확인 있도록. 내가 볼 수있는 바이올린으로 사용하면 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/ 그것이 버그라고 생각해서, 나는 이것을보고 할 것입니다. :) thanks –

1 단계 : 당신은 preserveObjectStacking: true

2 단계를 사용할 수 있습니다 : 다음 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

출처

2017-01-26 17:41:24 vijay

첫 포인트는 내 시간을 절약했습니다. 감사합니다. @vijay – lalithkumar

Fabric JS - 뒤로 객체 보내기

답변

관련 문제