我正在尝试实现对象对齐(即,顶部-底部-左-右-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>
我如何更新代码以能够同时对齐旋转的对象? (检查绿色矩形上的对齐方式)
[看一下这种方法,animate
有一个不错的中止选项,如果有任何拐角点超出了画布的边界,我正在使用该选项,我刚刚在chrome上进行了测试
function move(obj, prop, value) {
obj.saveState();
obj.animate(prop, value, {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: canvas.renderAll.bind(canvas),
easing: fabric.util.ease["easeOutQuad"],
abort: function () {
obj.setCoords();
for (const prop in obj.aCoords) {
point = obj.aCoords[prop]
if (point.x <= 0 || point.x >= canvas.width ||
point.y <= 0 || point.y >= canvas.height) {
obj.left = obj._stateProperties.left;
obj.top = obj._stateProperties.top;
return true
}
}
obj.saveState();
}
});
}
function process_align(val, obj) {
switch (val) {
case 'left':
move(obj, 'left', 1);
break;
case 'right':
move(obj, 'left', canvas.width - 1);
break;
case 'top':
move(obj, 'top', 1);
break;
case 'bottom':
move(obj, 'top', canvas.height - 1);
break;
}
}
var canvas = new fabric.Canvas('a');
canvas.stateful = true;
canvas.add(new fabric.Rect({ left: 50, top: 50, height: 50, width: 50, fill: 'red' }));
canvas.add(new fabric.Rect({ angle: 76, left: 240, top: 50, height: 50, width: 50, fill: 'green' }));
canvas.add(new fabric.Rect({ left: 120, top: 100, 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;
}
});
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="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="160"></canvas>
而且您可以从中选择一些动画缓动:http://fabricjs.com/animation-easing