Eu preciso de desenhar um fluxo dinamicamente com base numas escolhas do utilizador. Nesse fluxo eu quero desenhar as hipóteses escolhidas (circulos azuis com números) e a direção entre as escolhas (linhas com setas). Por exemplo: nó 1 para o nó 2.
Para desenhar a direção eu desenho a seta no fim da linha mas não consigo fazer com que a seta rode apenas em torno do seu centro, seguindo a direção da linha.
JS code
$(document).ready(function () {
drawOnCanvas();
});
function drawOnCanvas() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var circle1 = {
x: 75,
y: 75,
r: 15
};
var circle2 = {
x: 225,
y: 50,
r: 15
};
var arrow =
{
h: 5,
w: 10
};
drawCircle(ctx, circle1, "1");
drawCircle(ctx, circle2, "2");
var ptCircle1 = getPointOnCircle(circle1.r, circle1, circle2);
var ptCircle2 = getPointOnCircle(circle2.r, circle2, circle1);
var ptArrow = getPointOnCircle(circle2.r + arrow.w, circle2, circle1);
drawLine(ctx, ptCircle1, ptCircle2);
drawArrow(ctx, arrow, ptArrow, ptCircle2);
}
}
function drawArrow(canvasContext, arrow, ptArrow, endPt) {
var angleInDegrees = getAngleBetweenPoints(ptArrow, endPt);
canvasContext.beginPath();
// first save the untranslated/unrotated context
canvasContext.save();
// move the rotation point to the center of the rect
canvasContext.translate(ptArrow.x, ptArrow.y);
// rotate the rect
canvasContext.rotate(angleInDegrees);
canvasContext.moveTo(endPt.x, endPt.y);
canvasContext.lineTo(endPt.x - arrow.w, endPt.y + arrow.h);
canvasContext.lineTo(endPt.x - arrow.w, endPt.y - arrow.h);
canvasContext.closePath();
canvasContext.fillStyle = "rgb(72,72,72)";
canvasContext.stroke();
canvasContext.fill();
// restore the context to its untranslated/unrotated state
canvasContext.restore();
}
function drawCircle(canvasContext, circle, text) {
canvasContext.beginPath(); //começa ou reinicia o desenho de algo
canvasContext.fillStyle = "rgb(43,166,203)";
canvasContext.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, false); //cria arcos
canvasContext.fill(); //atribui estilos
drawText(canvasContext, circle, text);
}
function drawText(canvasContext, circle, text) {
canvasContext.font = '8pt Calibri';
canvasContext.fillStyle = 'white';
canvasContext.textAlign = 'center';
canvasContext.fillText(text, circle.x, circle.y + 3);
}
function drawLine(canvasContext, startPt, endPt) {
canvasContext.moveTo(startPt.x, startPt.y);
canvasContext.lineTo(endPt.x, endPt.y);
canvasContext.stroke();
}
function getPointOnCircle(radius, originPt, endPt) {
var angleInDegrees = getAngleBetweenPoints(originPt, endPt);
// Convert from degrees to radians via multiplication by PI/180
var x = radius * Math.cos(angleInDegrees * Math.PI / 180) + originPt.x;
var y = radius * Math.sin(angleInDegrees * Math.PI / 180) + originPt.y;
return { x: x, y: y };
}
function getAngleBetweenPoints(originPt, endPt) {
var interPt = { x: endPt.x - originPt.x,
y: endPt.y - originPt.y
};
return Math.atan2(interPt.y, interPt.x) * 180 / Math.PI;
}
Eu acho que o problema está no método drawArrow()
nas:
canvasContext.translate(ptArrow.x, ptArrow.y);
canvasContext.rotate(angleInDegrees);
Já tentei todos os possiveis valores para a rotação e a transladação mas a seta continua a não rodar apropriadamente em torno de si mesma. Alguém pode ajudar-me?
Update
Andei a ver e talvez a melhor forma de desenhar o triângulo seja JSFiddle Exemplo
canvasContext.moveTo(ptArrow.x, ptArrow.y);
canvasContext.lineTo(ptArrow.x, ptArrow.y - arrow.h);
canvasContext.lineTo(ptArrow.x + arrow.w, ptArrow.y);
canvasContext.lineTo(ptArrow.x + arrow.w, ptArrow.y);
canvasContext.lineTo(ptArrow.x, ptArrow.y + arrow.h);
Contudo continuo com o mesmo problema..
canvasContext.translate(-ptArrow.x/20, ptArrow.y/3.5);
ecanvasContext.rotate(angleInDegrees/100);
Eu consegui a seta ficar correta para as coordenadas do Fiddle, mas brinquei com as coordenadas do circulo 2 e isso foi apenas uma gambiarra minha.