Canvas 有什么办法可以算出一段 path 路径的中心点吗？

Question

假设有这样一段path路径

"M 10,30A 20,20 0,0,1 50,30A 20,20 0,0,1 90,30Q 90,60 50,90Q 10,60 10,30 z"

绘制出来是这样

那么，有什么办法可以算出中心点吗

Answer 1

不太清楚具体的条件，假设

• 图形一定是封闭的
• 你所说的中心点指的是重心

如果是比较复杂的图形，也许只能用近似的方法吧？

先画到 canvas 上，取出图形内部所有点，取平均坐标，就是近似的重心了。

---

如果

• 中心点指的是整个图形边界框的中心

可以分别求每一条曲线的最大、最小坐标。path 中有圆弧、椭圆弧、二次/三次贝塞尔曲线。这些曲线的边界框都是有很成熟的求法的。

近似的做法，还是先画下来，取内部像素中坐标的最大、最小。

参考资料：https://stackoverflow.com/que...（适用于 SVG path）

You can use the method getBBox or alternatively getBoundingClientRect. Both methods give you an object with the properties x, y, width, height, which you can use to calculate your center.

node = document.getElementById('myEl').getBBox()

根据我的理解，当你用这个方法拿到了边界框，算出 (x + width / 2, y + height / 2) 就是你想要的中心坐标

Answer 2

之前有写过一篇文章：常用空间分析函数

里面方法3.4就是获取多边形中心，先使用bbox获取多边形范围，再获取中心点

除了中心点，还可以参考3.5获取多边形重心和3.6获取多边形质心