【发布时间】：2020-08-04 00:52:45
【问题描述】：
我正在尝试实现对象对齐（即上 - 下 - 左 - 右 - CenterH - CenterV）我的代码运行良好，但我不知道如何在对象旋转时处理对齐（使用代码当角度不为 0 时，如果对象的一部分消失，我想知道如何计算最小左偏移量才能仍然看到整个旋转的对象）。我的代码如下。
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({
angle: 76,
left: 180,
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() || canvas.getActiveGroup();
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 'centerH':
activeObj.set({
left: (canvas.width / 2) - ((activeObj.width * activeObj.scaleX) / 2)
});
break;
case 'centerV':
activeObj.set({
top: (canvas.height / 2) - ((activeObj.height * activeObj.scaleY) / 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="centerH">Align CenterH</button>
<button class="alignment" data-action="centerV">Align CenterV</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>如何更新代码以对齐旋转的对象？ （检查绿色矩形上的对齐方式）
【问题讨论】：
-
@HelderSepulveda 抱歉，我会解释一下...如果您在尝试对齐时打开任何图形软件，假设在屏幕左侧，对象仍然在画布上可见.使用提供的代码，当角度不同于 0 时，对象的一部分会消失，因为在左对齐的情况下，左坐标设置为 0。所以我想知道如何计算最小左偏移量才能仍然看到整个旋转的对象。
-
您应该将该描述添加到您的问题中...现在完成类似的操作，调试您的代码并查看您的 activeObj.aCoords ...您需要考虑矩形的所有角落
-
问题已更新
-
我正在尝试本地编辑器
标签： javascript canvas fabricjs