Javascript 给定三角形向量和笔划宽度，如何计算添加到三角形的边框/笔划？

我有一组三角形坐标。每三个点对应一个向量。在下图中，这个三角形是薄黄色的。我需要在这个向内和向外突出的三角形中添加一个

笔划

或

边框

，以原始黄色三角形线为中心

因此，给定三个三角形

向量

坐标和笔划/边框

宽度

，如何计算

黑色

（笔划/边框）三角形的内外边的

向量

坐标

图像中的

红色

点表示我需要计算的点

三角形可以按宽度或高度缩放，我需要黑色笔划/边框始终保持恒定的给定宽度

虽然我需要分别在

C++

和

javascript

中为

WebGL

实现这一点，但我真正需要的只是数学公式

如果我们想象我在

javascript

中可视化的

变量，原始三角形边界框的左上角点为
（0,0）
，那么我们得到以下结果：

var width = 300;
var height = 200;
var strokeWidth = 20;
var V1 = {x: 0, y: height};
var V2 = {x: width, y: height};
var V3 = {x: width / 2, y: 0);

由此，我需要计算所有六个红色点。提前感谢您的帮助

定义顶点相对于中心的位置时，只需通过规格化它们来获得方向，然后将方向乘以笔划宽度，并将结果添加/减去顶点，以glsl表示，即：

float strokeWidth = 10.;
vec2 vdir = normalize(vertexPosition);
vec2 outer = vertexPosition + vdir * strokeWidth;
vec2 inner = vertexPosition - vdir * strokeWidth;

在没有任何数学库的JS中，它将如下所示：


函数点（x，y）{this.x=x，this.y=y}
var strokeWidth=20；
var V1=新点（-100,50）；
var V2=新点（100,50）；
var V3=新点（0，-100）；
var ctx=triangle.getContext（“2d”），ctxRect=ctx.canvas.getBoundingClientRect（）；
函数支点（）{
ctx.clearRect（0,0，ctxRect.width，ctxRect.height）；
//画起点
ctx.strokeStyle=ctx.fillStyle=“#fa0”；
ctx.fillRect（V1.x+ctxRect.width/2，V1.y+ctxRect.height/2,5,5）；
ctx.fillRect（V2.x+ctxRect.width/2，V2.y+ctxRect.height/2,5,5）；
ctx.fillRect（V3.x+ctxRect.width/2，V3.y+ctxRect.height/2,5,5）；
//画三角线
ctx.beginPath（）；
ctx.moveTo（V1.x+ctxRect.width/2+2，V1.y+ctxRect.height/2+2）；
ctx.lineTo（V2.x+ctxRect.width/2+2，V2.y+ctxRect.height/2+2）；
ctx.lineTo（V3.x+ctxRect.width/2+2，V3.y+ctxRect.height/2+2）；
ctx.lineTo（V1.x+ctxRect.width/2+2，V1.y+ctxRect.height/2+2）；
ctx.closePath（）；
ctx.stroke（）；
//了解方向
var len=Math.sqrt（V1.x*V1.x+V1.y*V1.y）；
var dx=V1.x/len，dy=V1.y/len；
var V1outer=新点（V1.x+dx*行程宽度，V1.y+dy*行程宽度）；
var V1inner=新点（V1.x-dx*冲程宽度，V1.y-dy*冲程宽度）；
console.log（V1outer）；
len=Math.sqrt（V2.x*V2.x+V2.y*V2.y）；
dx=V2.x/len，dy=V2.y/len；
var V2outer=新点（V2.x+dx*行程宽度，V2.y+dy*行程宽度）；
变量V2inner=新点（V2.x-dx*冲程宽度，V2.y-dy*冲程宽度）；
len=Math.sqrt（V3.x*V3.x+V3.y*V3.y）；
dx=V3.x/len，dy=V3.y/len；
var V3outer=新点（V3.x+dx*冲程宽度，V3.y+dy*冲程宽度）；
var V3inner=新点（V3.x-dx*冲程宽度，V3.y-dy*冲程宽度）；
ctx.strokeStyle=ctx.fillStyle=“#F00”；
ctx.fillRect（V1outer.x+ctxRect.width/2，V1outer.y+ctxRect.height/2,5,5）；
ctx.fillRect（V2outer.x+ctxRect.width/2，V2outer.y+ctxRect.height/2,5,5）；
ctx.fillRect（V3outer.x+ctxRect.width/2，V3outer.y+ctxRect.height/2，5,5）；
//画三角线
ctx.beginPath（）；
ctx.moveTo（V1outer.x+ctxRect.width/2+2，V1outer.y+ctxRect.height/2+2）；
ctx.lineTo（V2outer.x+ctxRect.width/2+2，V2outer.y+ctxRect.height/2+2）；
ctx.lineTo（V3outer.x+ctxRect.width/2+2，V3outer.y+ctxRect.height/2+2）；
ctx.lineTo（V1outer.x+ctxRect.width/2+2，V1outer.y+ctxRect.height/2+2）；
ctx.closePath（）；
ctx.stroke（）；
ctx.strokeStyle=ctx.fillStyle=“#0F0”；
ctx.fillRect（V1inner.x+ctxRect.width/2，V1inner.y+ctxRect.height/2,5,5）；
ctx.fillRect（V2inner.x+ctxRect.width/2，V2inner.y+ctxRect.height/2,5,5）；
ctx.fillRect（V3inner.x+ctxRect.width/2，V3inner.y+ctxRect.height/2,5,5）；
ctx.beginPath（）；
ctx.moveTo（V1inner.x+ctxRect.width/2+2，V1inner.y+ctxRect.height/2+2）；
ctx.lineTo（V2inner.x+ctxRect.width/2+2，V2inner.y+ctxRect.height/2+2）；
ctx.lineTo（V3inner.x+ctxRect.width/2+2，V3inner.y+ctxRect.height/2+2）；
ctx.lineTo（V1inner.x+ctxRect.width/2+2，V1inner.y+ctxRect.height/2+2）；
ctx.closePath（）；
ctx.stroke（）；
}
支点（）；
strokeInput.oninput=function（）{strokeWidth=this.value；drawPoints（）}
#三角形{边框：1px黑色虚线；}
笔划宽度：

这个例子实际上不起作用。尝试将
V1.x
设置为
-10
并将
V2.x
设置为
10
，您将看到。我猜你想用每条线的法线生成一条新线，并将其与每条连接线相交？这是一个很好且彻底的答案，但gman是正确的。很近，但恐怕没有雪茄。谢谢你写得很好的回答。你可能会发现。