Fabric.js에서 캔버스 객체 레이어하기

Question

공식 API를 통해 Fabric.js 캔버스에 객체를 레이어하는 방법이 있습니까? 지금 내가 찾은 유일한 방법은 canvas._objects를 수동으로 반복하고 특정 순서로 그려 지도록 순서를 바꾸는 것입니다. 객체를 깰 가능성이없는 더 나은 방법이 있습니까?

Answer 1

[편집] 아래 정보를 수정했습니다. (원래 KineticJs API를 생각하고있었습니다.)

FabricJS 개체의 z 인덱스 변경이 API 메소드 가지고 내부적

canvas.sendBackwards(myObject) 
canvas.sendToBack(myObject) 
canvas.bringForward(myObject) 
canvas.bringToFront(myObject) 

를 FabricJs)을합니다 (getObjects 오브젝트로부터 오브젝트를 제거 다시 배열하고 접합하여에 의해 Z- 색인 변경 원하는 위치. 교차하는 객체를 검사하는 멋진 최적화가 있습니다.

bringForward: function (object) { 
     var objects = this.getObjects(), 
      idx = objects.indexOf(object), 
      nextIntersectingIdx = idx; 


     // if object is not on top of stack (last item in an array) 
     if (idx !== objects.length-1) { 

     // traverse up the stack looking for the nearest intersecting object 
     for (var i = idx + 1, l = this._objects.length; i < l; ++i) { 

      var isIntersecting = object.intersectsWithObject(objects[i]) || 
           object.isContainedWithinObject(this._objects[i]) || 
           this._objects[i].isContainedWithinObject(object); 

      if (isIntersecting) { 
      nextIntersectingIdx = i; 
      break; 
      } 
     } 
     removeFromArray(objects, object); 
     objects.splice(nextIntersectingIdx, 0, object); 
     } 
     this.renderAll(); 
    }, 

Answer 2

1 단계 : 당신은 preserveObjectStacking: true

2 단계를 사용할 수 있습니다 : 특정을 설정하려면 다음 sendtoback 사용 sendtofront .... 아래

Answered over here

Answer 3

같은 옵션을 fabricjs 모든 객체에 대한 순서 지정, 하나의 객체를 앞뒤로 이동하는 대신 전면/후면으로 가져 오거나 보내기위한 반복 호출이 느립니다. https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js#L1468

을 그리고이 수행 :

당신은 영감을 bringToFront의 코드를 사용할 수 있습니다

이 사용 사례를 속도를 정의 비교

fabric.Canvas.prototype.orderObjects = function(compare) { 
    this._objects.sort(compare); 
    this.renderAll(); 
} 

을 정렬 같은 :

function compare(x,y) { 
    return x.getWidth() * x.getHeight() < y.getWidth() * y.getHeight(); 
} 

some_canvas.orderObjects(compare) 

작은 물체를 앞으로 가져오고 싶다면.