Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Xiao CAI continues to learn about Canvas related methods:

DrawVertices drawVertices

We didn’t fix our drawVertices drawing methods last time. Vertice is the vertex, which is used in 3D models by drawing multiple vertices.

DrawVertices include three parameters. The first is the vertex attribute. The second is the blending mode, that is, the line color and background color of the blending effect; I can’t adjust the thickness of the Paint line.

A B C D E F G H I vertices:

  1. Say, using three split vertices, say, [A B C] [D E F] [G H I].
  2. [A B C] [B C D] [C D E] [D E F] [E F G] [F G H] [G H I]
  3. TriangleFan: [A B C] [A C D] [A D E] [A E F] [A F G] [A G H] [A H I]
canvas.drawVertices( Vertices(VertexMode.triangles, [ Offset(30, 30), Offset(30, 60),Offset(60, 60), Offset(90, 60), Offset(120, 60), Offset(120, 30), Offset(60, 90), Offset(60, 120), Offset(90, 120), ]), BlendMode.colorBurn, Paint().. color = Colors.red); canvas.drawVertices( Vertices(VertexMode.triangleStrip, [ Offset(210, 30), Offset(210, 60), Offset(240, 60), Offset(270, 60), Offset(300, 60), Offset(300, 30), Offset(240, 90), Offset(240, 120), Offset(270, 120), ]), BlendMode.colorBurn, Paint().. color = Colors.green); canvas.drawVertices( Vertices(VertexMode.triangleFan, [ Offset(120, 150), Offset(120, 180), Offset(150, 180), Offset(180, 180), Offset(210, 180), Offset(210, 150), Offset(150, 210), Offset(150, 240), Offset(180, 240), ]), BlendMode.colorBurn, Paint().. color = Colors.blue);Copy the code

The canvas operation

Xiao CAI then introduces the basic operation of canvas, which is similar to Android.

Scale zooming

Scale refers to the scale effect, the scale is the size of the canvas, you can set the scale multiple, and the scale multiple will stack;

canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint().. color = Colors.red .. StrokeWidth = 2.0.. style = PaintingStyle.stroke); / / resized canvas. Scale (2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint().. color = Colors.red .. StrokeWidth = 2.0.. style = PaintingStyle.stroke); / / resized canvas. Scale (0.25); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint().. color = Colors.red .. StrokeWidth = 2.0.. style = PaintingStyle.stroke);Copy the code

Translate translation

Translate is a translation of the canvas, not a neutron element of the canvas. The two parameters are horizontal and vertical distance respectively.

canvas.drawLine( Offset(0, 0), Offset(60, 60), Paint().. color = Colors.red.. strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint().. color = Colors.red .. StrokeWidth = 2.0.. style = PaintingStyle.stroke); // Translate canvas. Translate (30, 90); canvas.drawLine( Offset(0, 0), Offset(0, Screen.height), Paint().. color = Colors.blueGrey.. strokeWidth = 2); canvas.drawLine( Offset(0, 0), Offset(Screen.width, 0), Paint().. color = Colors.blueGrey.. strokeWidth = 2); canvas.drawLine( Offset(0, 0), Offset(60, 60), Paint().. color = Colors.red.. strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint().. color = Colors.red .. StrokeWidth = 2.0.style = paintingstyle.stroke);Copy the code

The rotate rotating

Rotate: the origin is the upper left corner of the screen. Rotate the canvas to the center of the screen. Note that the parameter is not the Angle but the corresponding PI value.

canvas.drawLine( Offset(0, 0), Offset(60, 60), Paint().. color = Colors.red.. strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint().. color = Colors.red .. StrokeWidth = 2.0.. style = PaintingStyle.stroke); Rotate (degToRad(90)); rotate(degToRad(90)); canvas.drawLine( Offset(0, 0), Offset(60, 60), Paint().. color = Colors.green.. strokeWidth = 2); canvas.drawRect( Rect.fromLTWH(60, 60, 90, 50), Paint().. color = Colors.green .. StrokeWidth = 2.0.. style = PaintingStyle.stroke);Copy the code

Skew Angle cutting

Skew refers to the tangent. The two parameters are the tangent value in the horizontal direction and the vertical direction. The value is the tan value in the trigonometric function, that is, the tangent value is 1 at 45 degrees.

canvas.drawRect( Rect.fromLTWH(60, 0, 90, 50), Paint().. color = Colors.red .. StrokeWidth = 2.0.. style = PaintingStyle.stroke); // Canvas. Skew (0.6, 0); canvas.drawRect( Rect.fromLTWH(60, 0, 90, 50), Paint().. color = Colors.green .. StrokeWidth = 2.0.. style = PaintingStyle.stroke);Copy the code

Save /restore Save /restore

Save /savelayer is to save the current canvas, restore is to restore the current canvas, can also be interpreted as empty and redraw; Save /restore can be stored multiple times, on a stack, and can be pushed on/off the stack to when a specific layer; However, when the small dish is tested, it is found that it needs to be paired with save/restore, otherwise the return does not match the abnormal;

canvas.clipRect(Rect.fromLTWH(40, 40, Screen.width - 80, Screen.width - 80)); canvas.drawColor(Colors.green, BlendMode.srcIn); // Save canvas 1 canvas.save(); canvas.clipRect( Rect.fromLTWH(60, 60, Screen.width - 120, Screen.width - 120)); canvas.drawColor(Colors.grey, BlendMode.srcIn); // Save canvas 2 canvas.save(); canvas.clipRect( Rect.fromLTWH(80, 80, Screen.width - 160, Screen.width - 160)); canvas.drawColor(Colors.orange, BlendMode.srcIn); // canvas.save(); // restore canvas 1 canvas.restore(); // restore canvas 2 canvas.restore(); // canvas.restore(); canvas.drawColor(Colors.blue, BlendMode.srcIn);Copy the code

Canvas is very powerful, and there are still many areas that are not thoroughly studied. The side dishes are still learning, please give me more advice if there are any mistakes!

Source: Little Monk A Ce