Fabric.js 캔버스의 모든 텍스트 개체 선택

Question

var canvas = new fabric.Canvas(); 

// select all objects 
function selectAllCanvasObjects(){ 
    var objs = canvas.getObjects().map(function(o) { 
     return o.set('active', true); 
    }); 

    var group = new fabric.Group(objs, { 
     originX: 'center', 
     originY: 'center' 
    }); 

    canvas._activeObject = null; 

    canvas.setActiveGroup(group.setCoords()).renderAll(); 
} 

캔버스가 있으며 모든 텍스트 개체를 선택하고 다른 개체를 건너 뛸 필요가 있습니다. 이 코드는 모든 객체를 선택하는 코드입니다. 어떻게 모든 텍스트 객체를 선택하고 다른 객체를 건너 뛰게 할 수 있습니까?

Answer 1

다음 예제는 type이 'text' 인 항목 만 선택합니다.

• 패브릭 JS get 방법은 type가 'text' 다음 잠시 후 같은 경우 우리가

  이상

• 을 반복하고있는 현재 항목의 type을 검사 할 수 있습니다 : 요약

  항목

• NB 우리는 이제 'text'의 유형과 일치 항목을 반환 원하는대로 우리는 지금

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

 
// Add some example shapes 
 
var circle = new fabric.Circle({ 
 
    radius: 20, fill: 'green', left: 100, top: 100 
 
}); 
 
var triangle = new fabric.Triangle({ 
 
    width: 20, height: 30, fill: 'blue', left: 50, top: 50 
 
}); 
 

 
canvas.add(circle, triangle); 
 

 
// Add some example text 
 
var text1 = new fabric.Text('hello world', { left: 100, top: 100 }); 
 

 
var text2 = new fabric.Text('test', { left: 0, top: 0 }); 
 

 
canvas.add(text1, text2); 
 

 
// Select all objects 
 
function selectAllCanvasObjects(){ 
 
    var objs = canvas.getObjects().filter(function(o) { 
 
     if (o.get('type') === 'text') { 
 
      return o.set('active', true); 
 
     } 
 
    }); 
 

 
    var group = new fabric.Group(objs, { 
 
     originX: 'center', 
 
     originY: 'center' 
 
    }); 
 

 
    canvas._activeObject = null; 
 

 
    canvas.setActiveGroup(group.setCoords()).renderAll(); 
 
} 
 

 
selectAllCanvasObjects();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.8/fabric.min.js"></script> 
 
<canvas id="c"></canvas>

Answer 2

당신이 선택하는 코드 아래에 사용할 수있는 대신 모든 항목의, 대신 map의 filter 사용 모든 텍스트 개체.

var object_length = parseInt(canvas.getObjects().length) - 1; 
for(var i = 0; i <= object_length; i++) 
{ 
    canvas.setActiveObject(canvas.item(i)); 

    var obj = canvas.getActiveObject(); 
    var object_type = obj.type; 

    if(object_type == "text") 
    { 
     //Write your code here 
     canvas.renderAll(); 
    } 
} 
canvas.deactivateAllWithDispatch(); 
canvas.renderAll(); 

실행 완료 후 모든 개체가 선택 취소되므로 마지막으로 선택한 개체가 선택 상태로 표시되지 않습니다.