View the directory –>

Intuitive understanding

Path is the line Path of the shape you want to draw, as you can imagine using strokes:

  • Choose the point on the paper
  • Draw from the starting point to the other points
    • Draw a straight line
    • Draw the curve
    • Draw a shape
  • Once a shape is drawn, you can move the pen to another point and continue drawing.
  • When you get to the end of the line, the last point, you can see if the last point is consistent with the first point of the current line, whether it’s consistent or not

Path is the Path record of the process you draw.

Methods summarize

Choose the starting point:

After calling move, note that after lifting the pen, directly go to two points without connecting them:

  • MoveTo (double x, double y), the starting point of a line. The argument is absolute position
  • RelativeMoveTo (double dx, double dy), reposition it at (dx, dy) relative to the current position
Draw a straight line:
  • LineTo (double x, double y), draw a lineTo(x,y)
  • RelativeLineTo (double dx, double dy), draw a line relative to the current position (x,y) to the current position (dx, dy), absolute position, which is x+dx,y+dy.

void _testMove(Canvas canvas, Size size) { Paint paint = new Paint(); paint .. color = Colors.redAccent[200] .. style = PaintingStyle.stroke .. strokeCap = StrokeCap.round .. strokeWidth = 4; Path path = Path(); Path. The moveTo (0, 0); path.lineTo(80, 80); path.relativeLineTo(0, -80); path.close(); path.relativeMoveTo(-80,-160); path.lineTo(80, -80); path.relativeLineTo(0, -80); canvas.drawPath(path, paint); }Copy the code
Draw arc
  • Void arcTo(Rect Rect, double startAngle, double sweepAngle, bool forceMoveTo); void arcTo(Rect Rect, double startAngle, double sweepAngle, bool forceMoveTo)
    • ForceMoveTo, the way that the end of the path is joined to the new arc, false means that the path is joined to the new arc, true means that the path is moved to the new arc. The arc determined by the parameter is an independent line with its own starting point. The end of the path may not always be the beginning of the arc, so this field is used to determine whether the two are connected.

void _drawArtto(Canvas canvas, Size size) { Paint paint = new Paint(); paint .. color = Colors.redAccent[200] .. style = PaintingStyle.stroke .. strokeCap = StrokeCap.round .. strokeWidth = 4; Rect rect = Rect.fromCenter(center: Offset(0, 0), width: 300, height: 200); Path path = Path(); path.moveTo(0, 0); path.lineTo(40, 40); Path. arcTo(rect,0, PI * 1.2, false); canvas.drawPath(path, paint); canvas.translate(0, -200); path.reset(); path.moveTo(0, 0); path.lineTo(40, 40); Path. arcTo(rect,0, PI * 1.2, true); canvas.drawPath(path, paint); }Copy the code
  • Zero, double rotation = 0.0, bool largeArc = false, Bool clockwise = true,}) Specify a point of absolute position by drawing an arc from the end of the current path to that point – largeArc, whether to use superior arc, true superior arc, – These two parameters are understood together – clockwise for an inferior arc, clockwise for an excellent arc, counterclockwise for an inferior arc, counterclockwise for an excellent arc

void _drawArttoPoint(Canvas canvas, Size size) { Paint paint = new Paint(); paint .. color = Colors.redAccent[200] .. style = PaintingStyle.stroke .. strokeCap = StrokeCap.round .. strokeWidth = 2; canvas.translate(0, -300); Path path = Path(); path.moveTo(0, 0); path.lineTo(80, -40); path.arcToPoint(Offset(80, 40), radius: Radius.circular(60), largeArc: false, clockwise: false); canvas.drawPath(path, paint); canvas.translate(0, 150); path.reset(); path.moveTo(0, 0); path.lineTo(80, -40); path.arcToPoint(Offset(80, 40), radius: Radius.circular(60), largeArc: true, clockwise: false); canvas.drawPath(path, paint); canvas.translate(0, 150); path.reset(); path.moveTo(0, 0); path.lineTo(80, -40); path.arcToPoint(Offset(80, 40), radius: Radius.circular(60), largeArc: false, clockwise: true); canvas.drawPath(path, paint); canvas.translate(0, 150); path.reset(); path.moveTo(0, 0); path.lineTo(80, -40); path.arcToPoint(Offset(80, 40), radius: Radius.circular(60), largeArc: true, clockwise: true); canvas.drawPath(path, paint); }Copy the code
  • Void relativeArcToPoint(Offset arcEndDelta, {Radius Radius = Radius. Zero, double rotation = 0.0, Bool largeArc = false, bool clockwise = true,}) Specify a position point relative to the current point, draw an arc from the end of the current path to that point – largeArc, whether to use superior arc, true superior arc, – These two parameters are understood together – clockwise for an inferior arc, clockwise for an excellent arc, counterclockwise for an inferior arc, counterclockwise for an excellent arc

void _drawRelativeArttoPoint(Canvas canvas, Size size) { Paint paint = new Paint(); paint .. color = Colors.redAccent[200] .. style = PaintingStyle.stroke .. strokeCap = StrokeCap.round .. strokeWidth = 2; canvas.translate(0, -300); Path path = Path(); path.moveTo(0, 0); path.lineTo(80, -40); path.relativeArcToPoint(Offset(0, 80), radius: Radius.circular(60), largeArc: false, clockwise: false); canvas.drawPath(path, paint); canvas.translate(0, 150); path.reset(); path.moveTo(0, 0); path.lineTo(80, -40); path.relativeArcToPoint(Offset(0, 40), radius: Radius.circular(60), largeArc: true, clockwise: false); canvas.drawPath(path, paint); canvas.translate(0, 150); path.reset(); path.moveTo(0, 0); path.lineTo(80, -40); path.relativeArcToPoint(Offset(0, 40), radius: Radius.circular(60), largeArc: false, clockwise: true); canvas.drawPath(path, paint); canvas.translate(0, 150); path.reset(); path.moveTo(0, 0); path.lineTo(80, -40); path.relativeArcToPoint(Offset(0, 40), radius: Radius.circular(60), largeArc: true, clockwise: true); canvas.drawPath(path, paint); }Copy the code
Bessel line segment

Adds a Bezier line segment from the current point to the curve.

  • Void conicTo(double x1, double y1, double x2, double y2, double w) void conicTo(double x1, double y1, double x2, double y2, double w)
    • If the weight is greater than 1, the curve is hyperbolic;
    • If the weight is equal to one, it’s a parabola;
    • If it’s less than 1, it’s an ellipse.

Equivalent to the current path end, (x1,y1), (x2 y2) and w, together control the generation of a curve. The bigger the w, the sharper the curve.

void _drawAconicTo(Canvas canvas, Size size) { final Offset p1 = Offset(80, -150); final Offset p2 = Offset(160, 0); Path path = Path(); Paint paint = Paint() .. color = Colors.purpleAccent .. strokeWidth = 2 .. style = PaintingStyle.stroke; path.moveTo(0, 0); path.lineTo(0, -50); // para.conicto (p1.dx, p1.dy, p2.dx, p2.dy, 3); // Para.conicto (p1.dx, p2.dy, 3); canvas.translate(0, -150); canvas.drawPath(path, paint); path.reset(); path.moveTo(0, 0); path.lineTo(0, -50); path.conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 1); canvas.translate(0, 150); canvas.drawPath(path, paint); path.reset(); path.moveTo(0, 0); path.lineTo(0, -50); Path. conicTo(p1.dx, p1.dy, p2.dx, p2.dy, 0.5); canvas.translate(0, 150); canvas.drawPath(path, paint); }Copy the code
  • Void relativeConicTo(double x1, double y1, double x2, double y2, double w)
Draw bezier curves
  • Void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3) add a cubic Bezier curve from the current point to the given point (x3, y3) Y1 and x2, y2.
  • Void relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3
  • Void quadraticBezierTo(double x1, double y1, double x2, double y2) adds the quadratic Bessel segment from the current point to the given point (x2, y2) using the control point (x1, y1).
  • Void relativeQuadraticBezierTo (double x1, double y1, double x2, double y2) quadratic bezier curve relative position

void _testCubicTo(Canvas canvas, Size size) { final Offset p1 = Offset(80, -150); final Offset p2 = Offset(160, 0); final Offset p3 = Offset(160, -160); Path path = Path(); Paint paint = Paint() .. color = Colors.purpleAccent .. strokeWidth = 2 .. style = PaintingStyle.stroke; path.moveTo(0, 0); path.lineTo(0, -50); // quadraticBezierTo(p1.dx, p1.dy, p2.dx, p2.dy); canvas.translate(0, -150); canvas.drawPath(path, paint); path.reset(); path.moveTo(0, 0); path.lineTo(0, -50); path.cubicTo(p1.dx, p1.dy, p2.dx, p2.dy,p3.dx,p3.dy); canvas.translate(0, 250); canvas.drawPath(path, paint); }Copy the code
Draw the shape

After a path is added to a shape, there is no connection with the current path. The shapes added are independent shapes.

  • Void addArc(Rect oval, Double startAngle, double sweepAngle) adds an arc
  • Void addOval(Rect oval) adds an oval
  • void addPath(Path path, Offset offset, {Float64List? Matrix4}) adds a new subpath consisting of the given “path” offset and the given “offset”. If “matrix4” is specified, the path will be converted by the matrix after the matrix is converted to the given offset. A matrix is a 4×4 matrix stored in column primary order.
  • void extendWithPath(Path path, Offset offset, {Float64List? Matrix4}) adds another path at the end of the path
  • Void addPolygon(List points, bool close) Adds a polyline
  • Void addRect(Rect Rect) Adds a rectangle
  • Void addRRect(RRect RRect) adds a rounded rectangle

void _testAdd(Canvas canvas, Size size) { Path path = Path(); Paint paint = Paint() .. color = Colors.purpleAccent .. strokeWidth = 2 .. style = PaintingStyle.stroke; path.moveTo(0, 0); path.lineTo(0, -50); Path. AddRect (the Rect. FromPoints (Offset (50, 50), Offset (100100))); Path. AddRRect (RRect. FromRectXY (the Rect. FromPoints (Offset (50-150), Offset (100-50)), 10, 10)); Path. AddOval (the Rect. FromPoints (Offset (150, 50), Offset (180100))); Path path2 = Path(); path2.moveTo(0, 0); Path2. AddArc (the Rect. FromPoints (Offset (0, 0), Offset (180180)), 0, PI); Path. AddPath (path2, Offset (0100)); // canvas.translate(-150, -150); canvas.drawPath(path, paint); }Copy the code
Matrix processing

Note that the method returns a new path, unchanged:

  • Path Transform (Float64List Matrix4) Returns a new Path, which is the same as the original Path.
  • Path shift(Offset Offset) Returns a new Path that has been shifted. Think of it as a panning shortcut for TrasForm

void _testTransform(Canvas canvas, Size size) { Path path = Path(); Paint paint = Paint() .. color = Colors.purpleAccent .. strokeWidth = 2 .. style = PaintingStyle.stroke; path.moveTo(0, 0); path.lineTo(0, -50); path.lineTo(-50, -50); Path path2 = path.transform(Float64List.fromList([ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -100, -100, 0, 1, ])); canvas.drawPath(path, paint); canvas.drawPath(path2, paint); }Copy the code
Path to the operation
  • Close () joins the start and end points of the path together
  • Reset () Clears the path
  • PathMetrics computeMetrics({bool forceClosed = false}) computeMetrics refers to the various operations from the first stroke to the last stroke of the path, such as lineto addArc, etc. MoveTo doesn’t count. You can think of it as a collection of operations. Traversal can be performed, and each item traversal is the description of an operation
    • After foreach, each item is a PathMetric
    • PathMetric
      • Pathmetry. length: total length of the current path
      • PathMetric. GetTangentForOffset (), access to specific points on the path to a certain operation information, the parameter value range 0 – PathMetric. Length;
      • Tangent t = pm.gettangentForoffset (pm.length * 0.5) Tangent is information about a point in the current path
        • Position: Indicates the position of a point
        • Angle: Information about the Angle of a point
  • Bool contains(Offset point) Determines whether a point is on a path
  • Rect getBounds() returns the outermost rectangle of the current path

The PathMetrics example draws a point halfway down the path of each action, and there are four actions below, so there are four points:

void _testComputeMetrics(Canvas canvas, Size size) { Path path = Path(); Paint paint = Paint() .. color = Colors.purpleAccent .. strokeWidth = 2 .. style = PaintingStyle.stroke; path.moveTo(0, 0); path.lineTo(0, -50); Path. AddRect (the Rect. FromPoints (Offset (50, 50), Offset (100100))); Path. AddRRect (RRect. FromRectXY (the Rect. FromPoints (Offset (50-150), Offset (100-50)), 10, 10)); Path. AddOval (the Rect. FromPoints (Offset (150, 50), Offset (180100))); PathMetrics pms = path.computeMetrics(forceClosed: false); PMS. ForEach ((PM) {Tangent t = pm.gettangentforoffset (pm.length * 0.5); canvas.drawCircle( t.position, 5, Paint().. color = Colors.black); }); canvas.drawPath(path, paint); }Copy the code

A messy shape,🤦

Focus on the following code use, shape calculate, shame!!

void _drawPath(Canvas canvas, Size size) { Paint paint = new Paint(); paint .. color = Colors.redAccent[200] .. style = PaintingStyle.stroke .. strokeCap = StrokeCap.round .. strokeWidth = 4; Path path = Path(); path.moveTo(0, 0); path.lineTo(80, 80); path.relativeLineTo(0, -80); path.arcTo(Rect.fromPoints(Offset(0,-50), Offset(100,-80)), 0, pi/2, false); path.arcToPoint(Offset(0,-100),largeArc: true); path.relativeArcToPoint(Offset(90,-90)); path.conicTo(200, -200, 100, -100, 1); path.relativeConicTo(200, -200, 100, -100, 1); path.cubicTo(0, -100, -100, 0, -100, 100); path.relativeCubicTo(0, -100, -100, 0, -100, 100); path.quadraticBezierTo(100, 100, 200, 100); path.relativeQuadraticBezierTo(-100, 100, 0, 100); path.addArc(Rect.fromPoints(Offset(0,-50), Offset(100,-80)), 0, pi); path.addOval(Rect.fromPoints(Offset(0,-50), Offset(100,-80))); path.addPath(Path().. lineTo(100, 100), Offset.zero); Path. AddPolygon ([Offset (0, 0), Offset (100100)], false); path.addRect(Rect.fromPoints(Offset(0,-50), Offset(100,-80))); path.addRRect(RRect.fromRectXY(Rect.fromPoints(Offset(0,-50), Offset(100,-80)), 100, 200)); PathMetrics pm = path.computeMetrics(); Bool iscontaint = path. The contains (Offset (0, 0)); print("iscontain = "+iscontaint.toString()); path.extendWithPath(Path().. moveTo(-100, -200).. LineTo (100100), the Offset. Zero); path.close(); canvas.drawPath(path, paint); Rect bound = path.getBounds(); canvas.drawRect(bound, paint); canvas.drawPath(path.transform(Float64List.fromList([ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -200, 0, 1, ])), paint); Canvas. DrawPath (path. The shift (Offset (100, 0)), paint); // path // .. relativeMoveTo(0, 0) // .. relativeLineTo(100, 120) // .. relativeLineTo(-10, -60) // .. relativeLineTo( // 60, // -10, // ) // .. close(); // canvas.drawPath(path, paint); // path.reset(); // path // .. relativeMoveTo(-200, 0) // .. relativeLineTo(100, 120) // .. relativeLineTo(-10, -60) // .. relativeLineTo( // 60, // -10, // ) // .. close(); // // canvas.drawPath(path, paint); }Copy the code