从中心javascript绘制四边形

Question

我正在尝试使用p5.js库在画布上绘制四边形。 我这样做是通过创建自定义顶点形状。请参阅下面的代码。

var tr;

function setup(){
    createCanvas(window.innerWidth, window.innerHeight);
    tr = new surface_triangle(width/2, height/2, 100, 90, "a", 12334);
}

function draw(){
    background(0);
    tr.draw_triangle();
}

class surface_triangle{

    constructor(x, y, size, rotation, properties, id){
        this.size = size;
        this.h = size * (Math.sqrt(3)/2);
        this.x = x;
        this.y = y;
    }

    draw_triangle(){
        beginShape();
            fill(255,0,0);
            vertex(this.x, this.y - this.h/2);
            vertex(this.x - this.size/2, this.y + this.h/2);
            vertex(this.x + this.size/2, this.y + this.h/2);
        endShape(CLOSE)

        fill(255);
        ellipse(this.x, this.y, 10, 10);

    }
}

如你所见，我设法绘制三角形，但中心点不正确。我不知道为什么我的中心点已关闭？见下图：

@kevingworkman完全正确的答案，但我试图从中心点绘制三角形。所以我将有一个centerx和一个centery现在我需要计算相对于这个中心点的三角形的3个点。喜欢这张图片 - ＆gt;。

我将如何做到这一点？由于我之前的代码清楚地从不同的角度提取。

非常感谢所有提示和建议！

Answer 1

这是一种视错觉。广场位于＆＃34;中心＆＃34;三角形的顶部和底部。放大图像并计算圆圈边缘上方和下方的像素。你会发现圆圈上方有75个像素，下方有75个像素（由于抗锯齿而给出或接受一些）。

您还可以通过绘制一个与三角形具有相同顶部和底部的正方形来看到这一点。

这对我们的人眼看起来很奇怪，因为我们希望中心位于所有三个点之间，而不仅仅是顶部和底部。

你可以通过取所有三个点的平均值来找到三角形的中心来解决这个问题。

编辑：如果您希望所提供的中心成为所有三个点的真实中心，那么您必须更改计算三个点的方式。您可以使用基本的trig（cos()和sin()函数）。