ファブリック内のオブジェクトの整列js

Question

キャンバスにオブジェクトの整列（右、中央、左、上、下）を実装しようとしています。ユーザーが1つのオブジェクト（テキストまたは画像）を選択した場合、ユーザーが[右揃え]オプションをクリックし、次にその選択されたオブジェクトが右揃えになっているとします。

私は以下の2つの方法を試みましたが、成功しませんでした。

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()そして、あなたの必要性として左/トップ応じて設定することができます。スニペットを確認してください。