8

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.

Exemplo JSFiddle

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..

5
  • Usando canvasContext.translate(-ptArrow.x/20, ptArrow.y/3.5); e canvasContext.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.
    – mutlei
    Commented 16/01/2015 às 11:16
  • @mutley pode mostrar-me no exemplo isso a funcionar por favor? Eu apliquei isso ao meu exemplo mas a seta sai do sitio e é suposto estar no fim da linha a apontar para o circulo 2. jsfiddle.net/msmini5/gbyt2zuq
    – Ninita
    Commented 16/01/2015 às 11:32
  • Link do jsfiddle jsfiddle.net/zfoyf8bg
    – mutlei
    Commented 16/01/2015 às 11:37
  • @mutley Pois realmente para os circulos atuais realmente funciona. O problema é que a construção deste fluxo deve ser dinâmica. Se alterarmos as coordenadas do circulo a solução já não funciona. Os valores que colocou para a rotação e a translação correspondem a alguma lógica ou foram apenas resultado de tentativa-erro?
    – Ninita
    Commented 16/01/2015 às 11:47
  • Tentativa e erro, infelizmente. Se alterar coordenadas dos circulos, não vai dar certo. D:
    – mutlei
    Commented 16/01/2015 às 11:48

1 Resposta 1

6

Problema resolvido! Após definir o ponto de translação, as coordenadas usadas para desenhar a seta devem ter como base o ponto 0 que na verdade passa a ser o ponto de translação.

       // move the rotation point to the center of the rect    
       canvasContext.translate(ptArrow.x, ptArrow.y);        
       // rotate the rect
       canvasContext.rotate(angleInDegrees*Math.PI/180);

        canvasContext.beginPath();
        canvasContext.moveTo(0,0);
        canvasContext.lineTo( 0, -arrow.h);
        canvasContext.lineTo( arrow.w, 0);
        canvasContext.lineTo( 0, +arrow.h);    

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .