Basics | draw arcs in the physics engine

author ｜zzbozheng

original text ｜http://imweb.io/topic/5959aee62536e43f14da1a68

Because of the demand , To use quarter arcs in the physics engine , Let's see how to draw a quarter arc in the physics engine ,

Draw arcs in the physics engine

Generally speaking , Physical engines provide general drawing methods , such as ：circle（ round ）、polygon（ Irregular polygon ）、rectangle( rectangular ) Isograph , But if you need to draw flexible and irregular figures , Then we need to use svg Support for . Let's discuss how to realize quarter arc ： Let's take a look svg Medium path Label available parameters ：

Instructions	Parameters	explain
M	x y	Move the brush to the point (x,y)
L	x y	The brush draws a line segment from the current point to the point (x,y)
H	x	The brush draws a horizontal line segment from the current point to the point (x,y0)
V	y	The brush draws a vertical line segment from the current point to the point (x0,y)
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	The brush draws an arc from the current point to the point (x,y)
C	x1 y1, x2 y2, x y	The brush draws a cubic Bezier curve from the current point to the point (x,y)
S	x2 y2, x y	A special version of the cubic Bezier curve ( Omit the first control point )
Q	x1 y1, x y	Draw a quadratic Bezier curve to a point (x,y)
T	x y	A special version of the quadratic Bezier curve ( Omit control points )
Z	No parameter	Draw a closed graph , If d Property does not specify Z command , Then draw a line segment , Instead of closed graphics .

You can see path The instructions of the tag are very rich and powerful , If you need to draw an arc , Then you need to use A The instructions are most appropriate . Draw arc command ：A rx ry x-axis-rotation large-arc-flag sweep-flag x y

It can be understood as ：

• Draw a paragraph to (x,y) Ellipse arc of . The shape of an elliptical arc x, y The radii of the axes are rx,ry.
• The ellipse is relative to x Shaft rotation x-axis-rotation degree .
• large-arc=0 Indicates that the arc is less than 180 degree ,large-arc=1 It means that the arc is greater than 180 degree .
• sweep=0 Indicates that the arc rotates counterclockwise , sweep=1 Indicates that the arc rotates in time .

It's more abstract , Let's take a look at the figure below

：

If you want to draw a quarter arc in the lower left corner ：

The results of ：

• M80 80 Represents from the canvas x:80 y:80 Start drawing
• A45 45 Representing an ellipse x The radius length is 45px ,y The radius length is 45px.（ It's all about 45, So it's a circle ）
• 0 0 0 first 0 Means relative to x The shaft does not rotate , the second 0 Indicates that only the arc less than 180 The period of , Third 0 It means the part drawn counterclockwise
• 125 125 Represents the end of the arc .
• L 128 80 Z Means draw a straight line to x: 128 y: 80,Z Indicates the automatic closing path .

It looks like a convex arc from the appearance , So if you need a concave arc, how do you achieve it ？ First, you need to have such a picture in your mind or on paper ：

We can use the above example to make some modifications , The arc is still the arc we need , But the connection points of straight lines are different , Then we just need to modify the connection point

If you want a small arc in the upper right corner ？ In fact, you need a small clockwise arc , So put the code above sweep-flag Part to 1 That's all right. .

SVG Conversion to the physical engine

Because what we use here is matter.js So you can go through matter.js Methods provided Svg.pathToVertices Come and take svg Convert to canvas route .

Scan the QR code below the code ,

Follow more front-end dry goods articles at any time ！

▼

WeChat ：IMWebTech