在物理引擎中画圆弧
本文作者：IMWeb zzbozheng 原文出处：IMWeb社区 未经同意，禁止转载
因为需求的需要，要使用在物理引擎中使用四分之一圆弧，我们来看看怎么实现在物理引擎中画出四分之一的圆弧，
在物理引擎中绘制圆弧
一般来说，物理引擎都是提供一般的画图方法，比如：circle（圆）、polygon（不规则多边形）、rectangle(矩形) 等图形，但如果需要画出比较灵活又不规则的图形的话，那么就需要使用 svg 提供支持了。下面来探讨一下如何实现四分之一圆弧： 我们来看一下svg中的path标签可用参数：
指令 | 参数 | 说明 |
|---|---|---|
M | x y | 将画笔移动到点(x,y) |
L | x y | 画笔从当前的点绘制线段到点(x,y) |
H | x | 画笔从当前的点绘制水平线段到点(x,y0) |
V | y | 画笔从当前的点绘制竖直线段到点(x0,y) |
A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 画笔从当前的点绘制一段圆弧到点(x,y) |
C | x1 y1, x2 y2, x y | 画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y) |
S | x2 y2, x y | 特殊版本的三次贝塞尔曲线(省略第一个控制点) |
Q | x1 y1, x y | 绘制二次贝塞尔曲线到点(x,y) |
T | x y | 特殊版本的二次贝塞尔曲线(省略控制点) |
Z | 无参数 | 绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。 |
可以们可以看到path标签的指令十分丰富功能也很强大，如果需要画圆弧，那么就是需要使用到A指令最合适不过了。
绘制圆弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y
具体可以理解为：
- 画一段到(x,y)的椭圆弧。 椭圆弧的 x, y 轴半径分别为 rx,ry。
- 椭圆相对于 x 轴旋转 x-axis-rotation 度。
- large-arc=0表明弧线小于180度，large-arc=1表示弧线大于180度。
- sweep=0表明弧线逆时针旋转, sweep=1表明弧线顺时间旋转。
说起来比较抽象，我们来看看下图
假如要画一个左下角的一个四分之一圆弧：
<svg width="100%" height="100%">
<path d="M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z" fill="green"/>
</svg>得出结果：
- M80 80 表示从画布的 x:80 y:80 开始画
- A45 45 表示椭圆的x半径长度为45px ，y 半径长度为45px。（这里都为45，那么就是圆形啦）
- 0 0 0 第一个0表示相对于x轴不旋转，第二个0表示只取弧线小于180那一段，第三个0表示逆时针画的那部分
- 125 125 表示圆弧的结束部分。
- L 128 80 Z 表示画直线到 x: 128 y: 80，Z 表示自动闭合路径。
从外形上来看像是一个外凸的圆弧，那么如果需要一个凹下去的圆弧那应该怎么实现呢？首先需要在脑海或纸上要有这么一幅图：
我们可以用上面的例子来稍作修改，弧还是我们需要的那段弧，只是直线的连接点不一样，那么我们只需要修改连接点可以了
```html<svg width="100%" height="100%">
<path d="M80 80 A 45 45, 0, 0, 0, 125 125 L 80 125 Z" fill="green"/></svg>
如果要向右上角的小圆弧呢？其实就是需要顺时针的小弧，那么把上面的代码的 sweep-flag 部分改为1就可以了。
```javascript<svg width="100%" height="100%">
<path d="M80 80 A 45 45, 0, 0, 1, 125 125 L 80 125 Z" fill="green"/>
</svg>
SVG到物理引擎的转换
因为我们这里使用的是matter.js 那么可以通过 matter.js 提供的方法 Svg.pathToVertices 来把svg转换为canvas路径。
$.get('http://localhost:8002/src//static/svg.svg').done((data) => {
$(data).find('path').each((i, path) => {
let points = Svg.pathToVertices(path, 30);
World.add(world, Bodies.fromVertices(400, 80, [points], {
render: {
fillStyle: '#ffffff',
strokeStyle: '#ffffff',
lineWidth: 1
}
}, true));
});
});