javascript - 画一个箭头 HummusJS

Question

如何在hummusJS中绘制箭头？我正在使用鹰嘴豆泥在 pdf 中绘图。我需要在pdf中画一个箭头。我能够划清界限。但是我怎样才能画一个箭头呢？我尝试了以下

if(x2 > y2)
            {
                a1 = x2-5;
                b1 = y2-5;
                a2 = x2-5;
                b2 = y2+5;
                a3 = x2+5;
                b3 = y2;
            }
            else
            {
                a1 = x2-5;
                b1 = y2+5;
                a2 = x2+5;
                b2 = y2+5;
                a3 = x2;
                b3 = y2-5;                
            }

 cxt.drawPath(a1,b1,a2,b2,a3,b3,{type: 'fill',
            color: '#000000'})

我也试过这样

      var d =5;
            a1 = x2-d*Math.sin(45);
            b1 = y2-d*Math.cos(45);
            a2 = x2+d*Math.sin(45);
            b2 = y2+d*Math.cos(45);
cxt.drawPath(x2,y2,a1,b1,{type: 'fill',
                color: '#000000'})
cxt.drawPath(x2,y2,a2,b2,{type: 'fill',
                color: '#000000'})

但这不是在正确的位置绘制箭头这里是图像

标签： javascriptnode.jshummus.js

Answer 1

这是一个使用函数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);