我正在尝试制作一个函数，该函数恰好在矩形中下降这个方向，有人可以帮助我吗？
我不知道如何将矩形从水平方向打破到垂直方向。
我不知道如何打破矩形并添加一个新的矩形。
也许我必须只使用单独的行？
我怎样才能使绘图相同？
如果有人可以帮助我！生无可恋！
<script>
$(document).ready(function () {
var canvas = new fabric.Canvas('canvas');
canvas.selection = false;
var rect, isDown, origX, origY, freeDrawing = true, textVal, activeObj;
var isRectActive = true;
var rectangle = document.getElementById('rect');
var obj_selecionado = false;
var started = false;
var prvX = -300;
var prvY = -300;
rectangle.addEventListener('click', function () {
isRectActive = !isRectActive;
});
canvas.on('mouse:down', function (o) {
if (freeDrawing) {
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
prvX = pointer.x;
prvY = pointer.y;
started = true;
if (isRectActive) {
rect = new fabric.Rect({
left: origX,
top: origY,
width: pointer.x - origX,
height: pointer.y - origY,
fill: '',
stroke: 'gray',
type: 'rect',
uuid: generateUUID(),
strokeWidth: 1
});
canvas.add(rect);
activeObj = rect;
}
}
});
canvas.on('mouse:move', function (o) {
if (isDown && freeDrawing) {
var pointer = canvas.getPointer(o.e);
if (!started) return;
if (isRectActive) {
//HERE ADD SOMETHING TO BREAK RECTANGLE
var dx = pointer.x - prvX;
var dy = pointer.y - prvY;
if (Math.abs(dx) > Math.abs(dy)) {
rect.set({ width: dx });
rect.set({ height: 120 });
} else {
rect.set({ width: 120 });
rect.set({ height: dy });
}
}
canvas.renderAll();
}
});
canvas.on('mouse:up', function (o) {
started = false;
if (freeDrawing) {
isDown = false;
var pointer = canvas.getPointer(o.e);
if (pointer.x === origX || pointer.y === origY || obj_selecionado === true) {
canvas.remove(rect);
obj_selecionado = false;
return false;
}
}
});
});
</script>
<canvas id='canvas' width="2024" height="1024"></canvas>