Javascript 在p5js中绘制箭头

我碰巧在大学的一个图论可视化项目中工作。对于这个项目，我们不能使用任何处理图形存储和算法的现有库（因此我不能使用D3或python的NetworkX之类的东西）。这个项目更多的是关于算法的可视化（BFS、DFS、Dijkstra、着色等），所以我选择了使用p5js作为可视化辅助工具的JavaScript

我面临的问题是，我试图在顶点之间绘制箭头，但结果并不像预期的那样：

编辑1

将问题更改为符合国防部的评论

这是一个

sketch.js

，显示了我如何使它工作：

var x1; //starting vertex
var x2; //ending vertex
var r = 16; //vertex radius


function setup() {
    createCanvas(640, 480);
    x1 = createVector(random(0, width/2), random(0, height/2)); //random position to the upper left
    x2 = createVector(random(width/2, width), random(height/2, height)); //random position to the lower right
}

function draw() {
    background(200);
    stroke(0);
    var offset = r;
    ellipse(x1.x, x1.y, r, r); //starting vertex
    ellipse(x2.x, x2.y, r, r); //ending vertex
    line(x1.x, x1.y, x2.x, x2.y); //draw a line beetween the vertices

    // this code is to make the arrow point
    push() //start new drawing state
    var angle = atan2(x1.y - x2.y, x1.x - x2.x); //gets the angle of the line
    translate(x2.x, x2.y); //translates to the destination vertex
    rotate(angle); //rotates the arrow point
    triangle(-offset*0.5, offset, offset*0.5, offset, 0, -offset/2); //draws the arrow point as a triangle
    pop();
}

---

谢谢你的帮助。：）

旋转设置为0时，箭头指向上，而旋转设置为0时，箭头应指向右侧。一个选项是绘制箭头，以便默认情况下尖端指向东方，否则您只需将角度偏移-90度（

-HALF_PI

弧度）：

请查看：

var-x1//起始顶点
var x2//结束顶点
var r=16//顶点半径
函数设置（）{
createCanvas（640480）；
x1=createVector（随机（0，宽度/2），随机（0，高度/2））；//左上角的随机位置
x2=createVector（随机（宽度/2，宽度），随机（高度/2，高度））；//右下角的随机位置
}
函数绘图（）{
背景（200）；
冲程（0）；
var偏移量=r；
椭圆（x1.x，x1.y，r，r）；//起始顶点
椭圆（x2.x，x2.y，r，r）；//结束顶点
线（x1.x，x1.y，x2.x，x2.y）；//在顶点之间画一条线
//此代码用于使箭头指向
push（）//启动新图形状态
var angle=atan2（x1.y-x2.y，x1.x-x2.x）；//获取直线的角度
平移（x2.x，x2.y）；//平移到目标顶点
旋转（角度半_PI）；//旋转箭头点
三角形（-offset*0.5，offset，offset*0.5，offset，0，-offset/2）；//将箭头点绘制为三角形
pop（）；
}

---

旋转设置为0时，箭头指向上，而旋转为0时，箭头应指向右侧。一个选项是绘制箭头，以便默认情况下尖端指向东方，否则您只需将角度偏移-90度（

-HALF_PI

弧度）：

请查看：

var-x1//起始顶点
var-x2//结束顶点
var r=16//顶点半径
函数设置（）{
createCanvas（640480）；
x1=createVector（随机（0，宽度/2），随机（0，高度/2））；//左上角的随机位置
x2=createVector（随机（宽度/2，宽度），随机（高度/2，高度））；//右下角的随机位置
}
函数绘图（）{
背景（200）；
冲程（0）；
var偏移量=r；
椭圆（x1.x，x1.y，r，r）；//起始顶点
椭圆（x2.x，x2.y，r，r）；//结束顶点
线（x1.x，x1.y，x2.x，x2.y）；//在顶点之间画一条线
//此代码用于使箭头指向
push（）//启动新图形状态
var angle=atan2（x1.y-x2.y，x1.x-x2.x）；//获取直线的角度
平移（x2.x，x2.y）；//平移到目标顶点
旋转（角度半_PI）；//旋转箭头点
三角形（-offset*0.5，offset，offset*0.5，offset，0，-offset/2）；//将箭头点绘制为三角形
pop（）；
}

箭头功能：

函数设置（）{
createCanvas（窗口宽度、窗口高度）；
光标（箭头）；
彩色模式（HSL，100）；
}
函数箭头（x、y、x2、y2、长度、xs、ys、旋转、样式、平面、xshadow、yshadow、txt）{
如果（x==未定义）{
x=0；
}
如果（y==未定义）{
y=0；
}
如果（x==未定义）{
x2=0；
}
如果（y==未定义）{
y2=0；
}
如果（ys==未定义）{
ys=3；
}如果（ys=='0'，则为else）{
ys=0.0001；
}
if（xs==未定义）{
xs=5；
}else if（xs==“0”）{
xs=0.0001；
}
如果（长度==未定义）{
长度=5；
}
var角度=atan2（y2-y，x2-x）；
如果（rotat！=undefined）{//write undefined，调用中不带“”跳过旋转模式
ys=ys*sin（帧数/10）；
}
var rxs=约束（xs，0.0001,9）；
推（）；
翻译（x，y）；
旋转（角度）；
冲程联接（圆形）；
beginShape（）
如果（平面==未定义的| |平面=='2D'| |平面=='2D'| |平面==''）{
如果（样式==“大”）{
顶点（0，-ys/1.5*长度）；
}else if（style='pointy'）{
顶点（0,0）；
}否则如果（样式=‘指示’）{
顶点（0，-ys*长度）；
}否则{
顶点（0，-ys/3*长度）；
}
如果（样式=‘指示’）{
顶点（rxs*长度，-ys*长度）；
}否则{
顶点（rxs*长度，-ys/3*长度）；
}
顶点（rxs*长度，-ys*长度）；
顶点（9*长度，0）；
顶点（rxs*长度，ys*长度）；
如果（样式=‘指示’）{
顶点（rxs*长度，ys*长度）；
}否则{
顶点（rxs*长度，ys/3*长度）；
}
如果（样式==“大”）{
顶点（0，ys/1.5*长度）；
}else if（style='pointy'）{
顶点（0,0）；
}否则如果（样式=‘指示’）{
顶点（0，ys*长度）；
}否则{
顶点（0，ys/3*长度）；
}
}否则，如果（平面='3D'| |平面='3D'）{
var nl=假；
如果（长度<0）{
长度=绝对值（长度）；
旋转（弧度（180））
nl=真；
}
var-shadowx=0；
var-shadowy=0；
if（xshadow！=0 | | xshadow！=未定义）{
shadowx=长度*xshadow；
}
if（xshadow==0 | | xshadow==未定义）{
阴影x=0.0001
}
if（yshadow！=0 | | yshadow！=未定义）{
阴影=长度*阴影；
}
if（yshadow==0 | | yshadow==未定义）{
阴影=0.0001
}
如果（nl==真）{
shadowx=-shadowx
阴影=-阴影
}
var-yp=0；
如果（样式==“大”）{
yp=ys/1.5*长度；
}else if（style='pointy'）{
yp=0；
}否则如果（样式=‘指示’）{
yp=ys*长度；
}否则{
yp=ys/3*长度；
}
var yq=0；
如果（样式=‘指示’）{
yq=ys*长度；
}否则{
yq=ys/3*长度；
}
如果（rotat！=undefined）{//write undefined，调用中不带“”跳过旋转模式
阴影=（abs（shado
// this code is to make the arrow point
    push() //start new drawing state
    var angle = atan2(x1.y - x2.y, x1.x - x2.x); //gets the angle of the line
    translate(x2.x, x2.y); //translates to the destination vertex
    rotate(angle-HALF_PI); //rotates the arrow point
    triangle(-offset*0.5, offset, offset*0.5, offset, 0, -offset/2); //draws the arrow point as a triangle
    pop();