Javascript 拉斐尔三角形中心 我们需要把一个文本放在三角形区域的中间。 我可以使用getBBox（）计算三角形中心的坐标：

这将导致坐标（50，25）始终位于三角形的长边上。 如何确保计算出的“中间”位于三角形内

正确的坐标应大约为：（75,25）

---

代码当然应该独立于这个特定的示例，它应该适用于任何类型的形状。

此代码片段将通过平均顶点来计算任何多边形的中心

var-paper=Raphael（0,032200）；
var triangle=“M0,0 L100,0 100,50 z”；
var tri=纸张路径（三角形）；
三个属性（“填充”、“蓝色”）；
var中心=拉斐尔帕斯中心（tri）；
变量圆=纸张圆（中心x，中心y，5）；
圆圈.attr（“填充”，“#f00”）；
圆圈.attr（“笔划”，“#fff”）；
函数raphaelPathCenter（路径）{
path.getBBox（）；//强制跟踪路径，使realPath不为null。
var顶点=parseSVGVertices（path.realPath）；
变量中心=顶点。减少（函数（上、下）{
返回{x:prev.x+cur.x，y:prev.y+cur.y}
}，{x:0，y:0}）；
中心.x/=顶点.length；
center.y/=顶点.length；
返回中心；
}
函数解析svgVertices（svgPath）
{
var顶点=[]；
对于（var i=0；i-1）//检查SVG命令
push（{x:vertex[1]，y:vertex[2]}）；
}  
返回顶点；
}

---

我在这个主题上做了更多的研究，并遵循我在这里得到的另一个列表中的建议：

有一种算法可以计算不规则多边形的质心，我已经将其转换为以下代码：

function getCentroid(path) {
    var x = new Array(11);
    var y = new Array(11);
    var asum = 0, cxsum = 0, cysum = 0;
    var totlength = path.getTotalLength();
    for (var i = 0; i < 11; i++) {
        var location = path.getPointAtLength(i*totlength/10);
        x[i] = location.x;
        y[i] = location.y;

        if (i > 0) {
            asum += x[i - 1]*y[i] - x[i]*y[i - 1];
            cxsum += (x[i - 1] + x[i])*(x[i - 1]*y[i] - x[i]*y[i - 1]);
            cysum += (y[i - 1] + y[i])*(x[i - 1]*y[i] - x[i]*y[i - 1]);
        }
    }

    return({x: (1/(3*asum))*cxsum, y: (1/(3*asum))*cysum});

}

我已经用很多其他形状测试过了，效果非常好

---

希望它能帮助一些人。

这个解决方案很聪明，但我一直在寻找与SVG相关的东西，更准确地说是与Raphael.js相关的东西。此外，它应该适用于任何形状，三角形只是一个例子来说明问题……嗯，向量坐标与SVG相关；您的代码不会运行，因为字符串没有

getBBox（）

method；-）但是，对于任何形状都没有这样的公式；你必须考虑你想要什么样的中心，你没有指定，以及形状是凸的还是凹的。对于凸面形状，平均顶点将始终位于形状内部；凹面形状不是这样。哦，你是对的。。。我太快了，没能把密码发出去。当然，正确的行是：var BBox=paper.path（triangle.getBBox（）；它只是一个不规则的多边形。不是凸的，不是凹的，只是不规则的。我想你不明白。看；看到右下角的多边形了吗？那个是凹面的。如果平均坐标，则中心可能正好落在多边形曲面内。但只要左上角或右上角顶点稍微高一点，中心就不会在多边形曲面内。更新了答案。我希望这就是你想要的。

function getCentroid(path) {
    var x = new Array(11);
    var y = new Array(11);
    var asum = 0, cxsum = 0, cysum = 0;
    var totlength = path.getTotalLength();
    for (var i = 0; i < 11; i++) {
        var location = path.getPointAtLength(i*totlength/10);
        x[i] = location.x;
        y[i] = location.y;

        if (i > 0) {
            asum += x[i - 1]*y[i] - x[i]*y[i - 1];
            cxsum += (x[i - 1] + x[i])*(x[i - 1]*y[i] - x[i]*y[i - 1]);
            cysum += (y[i - 1] + y[i])*(x[i - 1]*y[i] - x[i]*y[i - 1]);
        }
    }

    return({x: (1/(3*asum))*cxsum, y: (1/(3*asum))*cysum});

}

Object {x: 65.32077336966377, y: 16.33111549955705}