我试图在画布中实现对象对齐(即右,中,左,上,下)。假设用户选择了一个对象(即文本或图像),然后如果用户点击右对齐选项,则所选对象应该对齐到右侧。
我尝试了以下两种方法但没有成功。
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>
我只实现了Align Right,因为我不确定如何对其他对齐(顶部,底部,左侧,中央)进行对齐。
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()
。检查代码段。
这是我使用FabricJS 2.0实现的setAlign
方法
setAlign(align, canvas) {
let activeObj = canvas.getActiveObject(),
horizontalCenter = (activeObj.width * activeObj.scaleX) / 2,
verticalCenter = (activeObj.height * activeObj.scaleY) / 2,
{ width, height } = canvas
switch (align) {
case 'top':
activeObj.set({ top: verticalCenter })
break
case 'left':
activeObj.set({ left: horizontalCenter })
break
case 'bottom':
activeObj.set({ top: height - verticalCenter })
break
case 'right':
activeObj.set({ left: width - horizontalCenter })
break
case 'center':
activeObj.set({ left: (width / 2) })
break
case 'middle':
activeObj.set({ top: (height / 2) })
break
}
activeObj.setCoords()
canvas.renderAll()
}