I. Preface: With the acceleration of technological progress and ever-changing market demand, in the development process will obviously feel the system to provide the basis of the UI components/control can’t satisfy the needs of the present, especially the animation effects, and the demand of some graphs, find some others write good wheels, total felling have differences, always feel what also almost, not absolutely meet your needs. This shows that it is necessary to understand the essence of drawing, master the ability of drawing, all changes are inseparable from it, how to paint how to paint, how to love the demand of how to out. Learn here at juejin.cn/book/684473… Two, needs: learning drawing ability, record the learning process, is actually learning API, learning some thinking logic learning demo has been uploaded to Github, github.com/yj229201093… Dart: A continuous process of learning and recording. There are many points in the demo, and each point has a package, and each package has main.dart. 1. Basic elements of drawing: paper, pen, shape and color, just like eating with hands, chopsticks and bowls.
Paper: Canvas Canvas Object Pen: Paint Brush Object Shape: Path Path object Color: Color Color objectCopy the code2. Set up the stage of painting
The CustomPaint component the CustomPaint component can be used to display what is drawn. You need to pass in the CustomPainter object. Custom PaperPainter class inherits from CustomPainter. The Canvas is available in the paint method.Copy the codeDraw a circle
void main(a) {
WidgetsFlutterBinding.ensureInitialized(); // Confirm initialization
SystemChrome.setPreferredOrientations(// Display the device in landscape mode
[DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
SystemChrome.setEnabledSystemUIOverlays([]); // Full screen display
runApp(Paper());
}
Copy the code/ / / position p01 s01_pure/paper. Dart
import 'package:flutter/material.dart';
class Paper extends StatelessWidget {
@override
Widget build(BuildContext context) {
returnContainer( color: Colors.white, child: CustomPaint( painter: PaperPainter(), ), ); }}/// Inherit the CustomPainter class
class PaperPainter extends CustomPainter {
@override / / paint method
void paint(Canvas canvas, Size size) {
// TODO: implement paint
/// brush object
final Paint paint = Paint();
/// Draw a circle on the canvas. The drawCircle method draws a circle with three parameters: center
, radius <10>, and paint brush
canvas.drawCircle(Offset(100.100), 10, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false; }}Copy the codeThe effect
3. Briefly understand the drawing object API
[1]. Get an overview of Canvas's drawing API [2]. Look at the settable properties of the [Paint] object [3]. Get an overview of the operations that the [Path] object can performCopy the codeCanvas method:
---->[Canvas state]----void save(a)
void saveLayer(Rect bounds, Paint paint)
void restore(a)
int getSaveCount(a)---->[Canvas transform]----void skew(double sx, double sy)
void rotate(double radians)
void scale(double sx, [double sy])
void translate(double dx, double dy)
void transform(Float64List matrix4)---->[Canvas cropping]----void clipRect(Rect rect, { ClipOp clipOp = ClipOp.intersect, bool doAntiAlias = true })
void clipRRect(RRect rrect, {bool doAntiAlias = true})
void clipPath(Path path, {bool doAntiAlias = true})---->[Canvas drawing -- point related]----void drawPoints(PointMode pointMode, List<Offset> points, Paint paint)
void drawRawPoints(PointMode pointMode, Float32List points, Paint paint)
void drawLine(Offset p1, Offset p2, Paint paint)
void drawVertices(Vertices vertices, BlendMode blendMode, Paint paint)---->[Canvas drawing -- rectangle related]----void drawRect(Rect rect, Paint paint)
void drawRRect(RRect rrect, Paint paint)
void drawDRRect(RRect outer, RRect inner, Paint paint)---->[Canvas drawing -- circle like related]----void drawOval(Rect rect, Paint paint)
void drawCircle(Offset c, double radius, Paint paint)
void drawArc(Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint)---->[Canvas drawing - image related]----void drawImage(Image image, Offset p, Paint paint)
void drawImageRect(Image image, Rect src, Rect dst, Paint paint)
void drawImageNine(Image image, Rect center, Rect dst, Paint paint)
void drawAtlas(Image atlas,List<RSTransform> transforms,List<Rect> rects,List<Color> colors,BlendMode blendMode,Rect cullRect,Paint paint)
void drawRawAtlas(Image atlas,Float32List rstTransforms,Float32List rects,Int32List colors,BlendMode blendMode,Rect cullRect,Paint paint)---->[Canvas rendering - text]----void drawParagraph(Paragraph paragraph, Offset offset)---->[Canvas rendering -- others]----void drawColor(Color color, BlendMode blendMode)
void drawPath(Path path, Paint paint)
void drawPaint(Paint paint)
void drawShadow(Path path, Color color, double elevation, bool transparentOccluder)
void drawPicture(Picture picture)
Copy the code2. Paint property
isAntiAlias(Anti-aliasing)color(color)blendMode(Mixed mode)style(Brush Style)strokeWidth(linewidth)strokeCap(Wire cap type)strokeJoin(Wire connection type)strokeMiterLimit(Miter limit)maskFilter(Mask filter)shader(Shader)colorFilter(Color filter)imageFilter(Image filter)invertColors(Invert color)filterQuality(Filter quality)Copy the code3, Path method
---->[absolute path move]----void moveTo(double x, double y)
void lineTo(double x, double y)
void quadraticBezierTo(double x1, double y1, double x2, double y2)
void cubicTo(double x1, double y1, double x2, double y2, double x3, double y3)
void conicTo(double x1, double y1, double x2, double y2, double w)
void arcTo(Rect rect, double startAngle, double sweepAngle, bool forceMoveTo)
void arcToPoint(Offset arcEnd, {Radius radius = Radius.zero, double rotation = 0.0.bool largeArc = false.bool clockwise = true,})---->[Path relative move]----void relativeMoveTo(double dx, double dy)
void relativeLineTo(double dx, double dy)
void relativeQuadraticBezierTo(double x1, double y1, double x2, double y2)
void relativeCubicTo(double x1, double y1, double x2, double y2, double x3, double y3)
void relativeConicTo(double x1, double y1, double x2, double y2, double w)
void relativeArcToPoint(Offset arcEndDelta, { Radius radius = Radius.zero, double rotation = 0.0.bool largeArc = false.bool clockwise = true,})---->[Path addition]----void addRect(Rect rect)
void addRRect(RRect rrect)
void addOval(Rect oval)
void addArc(Rect oval, double startAngle, double sweepAngle)
void addPolygon(List<Offset> points, bool close)
void addPath(Path path, Offset offset, {Float64List matrix4})
void extendWithPath(Path path, Offset offset, {Float64List matrix4})---->[Path operation]----void close(a)
void reset(a)
bool contains(Offset point)
Path shift(Offset offset)
Path transform(Float64List matrix4)
Rect getBounds(a)
set fillType(PathFillType value)
static Path combine(PathOperation operation, Path path1, Path path2)
PathMetrics computeMetrics({bool forceClosed = false})
Copy the code/ / / position p02 s02_simple/paper. Dart
import 'package:flutter/material.dart';
class Paper extends StatelessWidget {
@override
Widget build(BuildContext context) {
returnContainer( color: Colors.white, child: CustomPaint( painter: PaperPainter(), ), ); }}class PaperPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
final Paint paint = Paint();
/// brush Settingspaint .. color = Colors.blue// Color blue
..strokeWidth = 4 / / line width 4
..style = PaintingStyle.stroke; / / style
/// Draw line two points and brush Settings
canvas.drawLine(Offset(0.0), Offset(100.100), paint);
Path path = Path(); / / way
path.moveTo(100.100);
path.lineTo(200.0);
/// Draw the pathcanvas.drawPath(path, paint.. color = Colors.red); } @override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false; }}Copy the codeEffect: