패브릭에서 객체 정렬

Question

캔버스에 객체 정렬 (예 : 오른쪽, 가운데, 왼쪽, 위, 아래)을 구현하려고합니다. 사용자가 하나의 개체 (예 : 텍스트 또는 이미지)를 선택한 다음 사용자가 오른쪽 맞춤 옵션을 누른 다음 선택한 개체가 오른쪽에 정렬되어야한다고합니다.

아래 두 가지 방법을 시도했지만 성공하지 못했습니다.

var canvas = new fabric.Canvas('a'); 
 
canvas.add(new fabric.Rect({ 
 
    left: 50, 
 
    top: 50, 
 
    height: 50, 
 
    width: 50, 
 
    fill: 'red' 
 
})); 
 
canvas.add(new fabric.Rect({ 
 
    left: 130, 
 
    top: 50, 
 
    height: 50, 
 
    width: 50, 
 
    fill: 'green' 
 
})); 
 
canvas.add(new fabric.Rect({ 
 
    left: 90, 
 
    top: 130, 
 
    height: 50, 
 
    width: 50, 
 
    fill: 'blue' 
 
})); 
 

 
canvas.renderAll(); 
 

 
$('.alignment').click(function() { 
 
    var cur_value = $(this).attr('data-action'); 
 
    if (cur_value != '') { 
 
    process_align(cur_value); 
 
    } else { 
 
    alert('Please select a item'); 
 
    return false; 
 
    } 
 
}); 
 

 
/* Align the selected object */ 
 
function process_align(val) { 
 
    switch (val) { 
 
    case 'right': 
 
     //Tried below one with 
 
     //activeObj.setPositionByOrigin(new fabric.Point(activeObj.top, canvas.getWidth()), activeObj.originY,'center'); 
 

 
     //Tried below one but its not working 
 
     var activeObj = canvas.getActiveObject(); 
 
     activeObj.set({ 
 
     originX: 'right', 
 
     //originY: 'center' 
 
     }); 
 
     activeObj.setCoords(); 
 
     canvas.renderAll(); 
 
     break; 
 
    } 
 
}

canvas { 
 
    border: 2px solid black; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script> 
 
<button class="alignment" data-action="left">Align Left</button> 
 
<button class="alignment" data-action="center">Align Center</button> 
 
<button class="alignment" data-action="right">Align Right</button> 
 
<button class="alignment" data-action="top">Align Top</button> 
 
<button class="alignment" data-action="bottom">Align Bottom</button> 
 
<canvas id="a" width="400" height="200"></canvas>

내가 다른 정렬을위한 정렬을 수행하는 방법을 잘 모르겠습니다으로 난 단지, 오른쪽 정렬을 구현 한

(위, 아래, 왼쪽, 가운데).

Answer 1

var canvas = new fabric.Canvas('a'); 
 
canvas.add(new fabric.Rect({ 
 
    left: 50, 
 
    top: 50, 
 
    height: 50, 
 
    width: 50, 
 
    fill: 'red' 
 
})); 
 
canvas.add(new fabric.Rect({ 
 
    left: 130, 
 
    top: 50, 
 
    height: 50, 
 
    width: 50, 
 
    fill: 'green' 
 
})); 
 
canvas.add(new fabric.Rect({ 
 
    left: 90, 
 
    top: 130, 
 
    height: 50, 
 
    width: 50, 
 
    fill: 'blue' 
 
})); 
 

 
canvas.renderAll(); 
 

 
$('.alignment').click(function() { 
 
    var cur_value = $(this).attr('data-action'); 
 
    var activeObj = canvas.getActiveObject(); 
 
    if (cur_value != '' && activeObj) { 
 
    process_align(cur_value, activeObj); 
 
    activeObj.setCoords(); 
 
    canvas.renderAll(); 
 
    } else { 
 
    alert('Please select a item'); 
 
    return false; 
 
    } 
 
}); 
 

 
/* Align the selected object */ 
 
function process_align(val, activeObj) { 
 
    switch (val) { 
 

 
    case 'left': 
 
     activeObj.set({ 
 
     left: 0 
 
     }); 
 
     break; 
 
    case 'right': 
 
     activeObj.set({ 
 
     left: canvas.width - (activeObj.width * activeObj.scaleX) 
 
     }); 
 
     break; 
 
    case 'top': 
 
     activeObj.set({ 
 
     top: 0 
 
     }); 
 
     break; 
 
    case 'bottom': 
 
     activeObj.set({ 
 
     top: canvas.height - (activeObj.height * activeObj.scaleY) 
 
     }); 
 
     break; 
 
    case 'center': 
 
     activeObj.set({ 
 
     left: (canvas.width/2) - ((activeObj.width * activeObj.scaleX)/2) 
 
     }); 
 
     break; 
 
    } 
 
}

canvas { 
 
    border: 2px solid black; 
 
}

<script 
 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
 
    crossorigin="anonymous"></script> 
 
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script> 
 
<button class="alignment" data-action="left">Align Left</button> 
 
<button class="alignment" data-action="center">Align Center</button> 
 
<button class="alignment" data-action="right">Align Right</button> 
 
<button class="alignment" data-action="top">Align Top</button> 
 
<button class="alignment" data-action="bottom">Align Bottom</button> 
 
<canvas id="a" width="400" height="200"></canvas>

당신은 당신의 필요, 다음 setCoords()로 따라/왼쪽 상단을 설정할 수 있습니다. 스 니펫을 확인하십시오.