Snap fabric.Line до 45 градусов угол

Question

Я пытаюсь играть с fabric.Line() в fabricJS, так что, когда пользователь начинает рисовать линию, он привязывается к одному из восьми углов под углом 45 градусов от начальной точки. Это было бы похоже на сдерживание сдвига при использовании продукта Adobe. Возможно ли это с помощью ткани?

Answer 1

Вы должны проверить угол, который вы строите во время перемещения мыши , и приблизить его к линии 45 градусов.

var canvas = new fabric.Canvas('c', { 
 
    selection: false 
 
}); 
 

 
var line, isDown, points; 
 

 
canvas.on('mouse:down', function(o) { 
 
    isDown = true; 
 
    var pointer = canvas.getPointer(o.e); 
 
    points = [pointer.x, pointer.y, pointer.x, pointer.y]; 
 
    line = new fabric.Line(points, { 
 
    strokeWidth: 2, 
 
    fill: 'red', 
 
    stroke: 'red', 
 
    originX: 'left', 
 
    originY: 'center' 
 

 
    }); 
 
    canvas.add(line); 
 
}); 
 

 
canvas.on('mouse:move', function(o) { 
 
    if (!isDown) return; 
 
    var pointer = canvas.getPointer(o.e); 
 

 
    var startX = points[0]; 
 
    var startY = points[1]; 
 
    var x2 = pointer.x - startX; 
 
    var y2 = pointer.y - startY; 
 
    var r = Math.sqrt(x2*x2 + y2*y2); 
 
    var angle = (Math.atan2(y2, x2)/Math.PI * 180); 
 

 
    angle = (angle) % 360 + 180; 
 

 
    if (angle <= 22.5 || angle >= 337.5) { 
 
    angle = 0; 
 
    } else if (angle <= 67.5) { 
 
    angle = 45; 
 
    } else if (angle <= 112.5) { 
 
    angle = 90; 
 
    } else if (angle <= 157.5) { 
 
    angle = 135 
 
    } else if (angle <= 202.5) { 
 
    angle = 180 
 
    } else if (angle <= 247.5) { 
 
    angle = 225 
 
    } else if (angle <= 292.5) { 
 
    angle = 270 
 
    } else if (angle < 337.5) { 
 
    angle = 315 
 
    } 
 
    angle -= 180; 
 

 
    var cosx = r * Math.cos(angle * Math.PI/180); 
 
    var sinx = r * Math.sin(angle * Math.PI/180); 
 
    
 
    line.set({ 
 
    x2: cosx + startX, 
 
    y2: sinx + startY 
 
    }); 
 
    canvas.renderAll(); 
 
}); 
 

 
canvas.on('mouse:up', function(o) { 
 
    isDown = false; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 

 
<canvas id="c" width="500" height="500"></canvas>

Answer 2

Хорошо, мы знаем, что начинаются строки X1 и Y1, а также конечные точки X2 и Y2. Мы знаем также, что знаете 45 градусов.

Итак, мы применим некоторую математику для получения результата.

в точке X1 и Y1 остается там, а точки X2 и Y2 хотят перемещаться с углом 45 градусов.

X2 = Math.cos(angle * Math.PI/180) * distence + startX Y2 = Math.sin(angle * Math.PI/180) * distence + startY tanks for this

здесь

startX = x1 
startY = y1 
angle=45 
distence = current.mouse.x-x1 

Таким образом, мы можем получить x2, y2 с углом 45 градусов

позволяет попробовать это на fabricjs

var canvas = new fabric.Canvas('c', { 
 
    selection: false 
 
}); 
 

 
var line, isDown, points; 
 

 
canvas.on('mouse:down', function(o) { 
 
    isDown = true; 
 
    var pointer = canvas.getPointer(o.e); 
 
    points = [pointer.x, pointer.y, pointer.x, pointer.y]; 
 
    line = new fabric.Line(points, { 
 
    strokeWidth: 2, 
 
    fill: 'red', 
 
    stroke: 'red', 
 
    originX: 'left', 
 
    originY: 'center' 
 

 
    }); 
 
    canvas.add(line); 
 
}); 
 

 
canvas.on('mouse:move', function(o) { 
 
    if (!isDown) return; 
 
    var pointer = canvas.getPointer(o.e); 
 

 
    var startX = points[0]; 
 
    var startY = points[1]; 
 
    var distence = pointer.x - points[0]; 
 
    var angle = -45 
 

 
    x2 = Math.round(Math.cos(angle * Math.PI/180) * distence + startX); 
 
    y2 = Math.round(Math.sin(angle * Math.PI/180) * distence + startY); 
 
    console.log("x2 >>> " + x2 + " y2 >>>>> " + y2) 
 

 
    line.set({ 
 
    x2: x2, 
 
    y2: y2 
 
    }); 
 
    canvas.renderAll(); 
 
}); 
 

 
canvas.on('mouse:up', function(o) { 
 
    isDown = false; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 

 
<canvas id="c" width="300" height="200"></canvas>