нарисуйте стрелку HummusJS

Ответ 1

На основании ответов на этот вопрос: Как вычислить координаты стрелки на основе стрелки? особенно принятый: fooobar.com/questions/591178/...

Вы можете вычислить необходимые координаты с помощью векторной арифметики:

function arrowhead(A, B) {
    var h = 10 * Math.sqrt(3);
    var w = 10;
    var d = {x: B.x - A.x, y: B.y - A.y};
    var length = Math.sqrt(d.x*d.x + d.y*d.y);
    var U = {x: d.x/length, y: d.y/length};
    var V = {x: -U.y, y: U.x};
    return [
        {x: B.x - U.x*h + V.x*w, y: B.y - U.y*h + V.y*w},
        {x: B.x - U.x*h - V.x*w, y: B.y - U.y*h - V.y*w}
    ];
}

h и w определяют длину и полуширину. Функция возвращает две точки: концы наконечника стрелки.

Пример использования:

var startPoint = {x:100, y:100};
var endPoint = {x:200, y:200};

var arrowPoint = arrowhead(startPoint, endPoint);

// draw line
cxt.drawPath(startPoint.x, startPoint.y, endPoint.x, endPoint.y);

// draw arrow head
cxt.drawPath(endPoint.x, endPoint.y, arrowPoint[0].x, arrowPoint[0].y, arrowPoint[1].x, arrowPoint[1].y, endPoint.x, endPoint.y, {type: 'fill', color: '#000000'});

Ответ 2

Это пример использования функции drawArrow для рисования стрелки в PDF. PDF создается через http://localhost: 3000/ через браузер. Он может нарисовать горизонтальную и вертикальную стрелки и поместить стрелку в начало или конец. Вы можете репетировать входные переменные startPoint, endPoint, endArrowHead

var express = require('express');
var app = express();


const DELTA = 5; //used to draw triangle arrowhead points

app.get('/', function(req, res){

var startPoint = {x:100, y:100}
var endPoint = {x:150, y:100}
var endArrowHead = true;

res.writeHead(200, {'Content-Type': 'application/pdf'});

var hummus = require('hummus');

var pdfWriter = hummus.createWriter(new hummus.PDFStreamForResponse(res));
var page = pdfWriter.createPage(0,0,595,842);
var cxt = pdfWriter.startPageContentContext(page);

drawArrow(cxt, startPoint, endPoint, endArrowHead);

startPoint = {x:200, y:100}
endPoint = {x:250, y:100}
endArrowHead = false;

drawArrow(cxt, startPoint, endPoint, endArrowHead);


startPoint = {x:300, y:100}
endPoint = {x:300, y:150}
endArrowHead = true;

drawArrow(cxt, startPoint, endPoint, endArrowHead);

startPoint = {x:400, y:200}
endPoint = {x:400, y:250}
endArrowHead = false;

drawArrow(cxt, startPoint, endPoint, endArrowHead);

pdfWriter.writePage(page);
pdfWriter.end();

res.end();

});

function drawArrow(cxt, startPoint, endPoint, endArrowHead) {
    cxt.drawPath(startPoint.x, startPoint.y, endPoint.x, endPoint.y);

    if (endPoint.x > startPoint.x) { //horizontal line
        if (endArrowHead) {// right arrowhead
            cxt.drawPath(endPoint.x, endPoint.y + DELTA, endPoint.x, endPoint.y - DELTA, endPoint.x + DELTA, endPoint.y, {
                type: 'fill',
                color: '#000000'
            });
        } else {// left arrowhead
            cxt.drawPath(startPoint.x, startPoint.y + DELTA, startPoint.x, startPoint.y - DELTA, startPoint.x - DELTA, startPoint.y, {
                type: 'fill',
                color: '#000000'
            });
        }

    } else {//vertical line
        if (endArrowHead) { //up arrowhead
            cxt.drawPath(endPoint.x + DELTA, endPoint.y, endPoint.x - DELTA, endPoint.y, endPoint.x, endPoint.y + DELTA, {
                type: 'fill',
                color: '#000000'
            });
        } else { //down arrowhead
            cxt.drawPath(startPoint.x + DELTA, startPoint.y, startPoint.x - DELTA, startPoint.y, startPoint.x, startPoint.y - DELTA, {
                type: 'fill',
                color: '#000000'
            });
        }
    }
}

app.listen(3000);