Javascript 画一个箭头
如何在hummusJS中绘制箭头? 我正在使用hummus以pdf格式绘制。我需要画一个pdf格式的箭头。我能划清界限。但是我怎样才能画箭头呢? 我尝试了以下方法Javascript 画一个箭头,javascript,node.js,hummus.js,Javascript,Node.js,Hummus.js,如何在hummusJS中绘制箭头? 我正在使用hummus以pdf格式绘制。我需要画一个pdf格式的箭头。我能划清界限。但是我怎样才能画箭头呢? 我尝试了以下方法 if(x2 > y2) { a1 = x2-5; b1 = y2-5; a2 = x2-5; b2 = y2+5; a3 = x2+5;
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'})
但这并不是在正确的位置绘制箭头
这是一个使用函数
drawArrow
在PDF上绘制箭头的示例。PDF是通过浏览器访问生成的。
它可以绘制水平和垂直箭头,并将箭头置于起点或终点。
您可以排练输入变量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);
基于此问题的答案: 特别是公认的: 可以使用矢量算法计算所需的坐标:
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'});
你能分享完整的代码吗?如何绘制箭头(水平/垂直和箭头方向左/右)?箭头由用户绘制。水平/垂直方向将是左或右。我试过这个。我得到正确的箭头只为右侧。我在问题中附上了图片。对于其他方面,箭头是不正确的。我更新了我的帖子,并附加了一个输出图像和更多的例子。即使是左侧和垂直箭头,一切看起来都很好。。。