Flutter 的画布和Android的几乎一致。写了下小练习。记录一下
import 'dart:math';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Paper extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: CustomPaint(
painter: PaperPainter(),
),
);
}
}
class PaperPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// canvasCircle(canvas);
// aboutPaint(canvas);
// drawStrokeJoin(canvas);
canvasTranslate(canvas, size);
// canvasGrid(canvas, size);
canvasBottomRight(canvas, size);
drawDot(canvas);
drawPoint(canvas);
drawCoordinate(canvas, size);
// drawRect(canvas);
// drawRRect(canvas);
// drawDRRect(canvas);
// drawFill(canvas);
// drawArcDetail(canvas);
drawPaint(canvas, size);
// drawShadow(canvas);
// drawPath(canvas);
clipCanvas(canvas);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
///画圆
canvasCircle(Canvas canvas) {
final Paint paint = Paint();
canvas.drawCircle(
Offset(180, 180),
150,
paint
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeWidth = 50);
canvas.drawCircle(
Offset(180 + 360.0, 180),
150,
paint
..color = Colors.red
..style = PaintingStyle.fill
..strokeWidth = 50
..isAntiAlias = false);
}
///画笔
///StrokeCap.butt - 不出头
//StrokeCap.round - 圆头
//StrokeCap.square - 方头
void aboutPaint(Canvas canvas) {
Paint paint = Paint();
paint
..style = PaintingStyle.stroke
..strokeWidth = 20
..color = Colors.red;
canvas.drawLine(
Offset(50, 50), Offset(50, 150), paint..strokeCap = StrokeCap.butt);
canvas.drawLine(Offset(50 + 50.0, 50), Offset(50 + 50.0, 150),
paint..strokeCap = StrokeCap.round);
canvas.drawLine(Offset(50 + 50.0 * 2, 50), Offset(50 + 50.0 * 2, 150),
paint..strokeCap = StrokeCap.square);
}
///线接类型
///StrokeJoin.bevel - 斜角、
//StrokeJoin.miter - 锐角、
//StrokeJoin.round - 圆角
void drawStrokeJoin(Canvas canvas) {
Paint paint = Paint();
Path path = Path();
paint
..style = PaintingStyle.stroke
..color = Colors.blue
..strokeWidth = 20;
path.moveTo(50, 50);
path.lineTo(50, 100);
path.relativeLineTo(100, -50);
path.relativeLineTo(0, 100);
// canvas.drawPath(path, paint..strokeJoin = StrokeJoin.bevel);
// canvas.drawPath(path, paint..strokeJoin = StrokeJoin.miter);
canvas.drawPath(path, paint..strokeJoin = StrokeJoin.round);
}
///Canvas 画布变换和状态
void canvasTranslate(Canvas canvas, Size size) {
var paint = Paint()
..style = PaintingStyle.fill
..color = Colors.blue;
//画布起点移动到屏幕中心
canvas.translate(size.width / 2, size.height / 2);
// canvas.drawCircle(Offset(0, 0), 50, paint);
canvas.drawLine(
Offset(20, 20),
Offset(50, 50),
paint
..color = Colors.red
..strokeWidth = 5
..strokeCap = StrokeCap.round);
}
///Canvas 缩放变换
void canvasGrid(Canvas canvas, Size size) {
Paint gridPait; //画笔
final double step = 20; //小格边长
final double strokeWidth = .5; //线宽
final Color color = Colors.grey; //线颜色
gridPait = Paint()
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth
..color = color;
canvas.save();
for (int i = 0; i < size.height / 2 / step; i++) {
canvas.drawLine(Offset(0, 0), Offset(size.width / 2, 0), gridPait);
canvas.translate(0, step);
}
canvas.restore();
canvas.save();
for (int i = 0; i < size.width / 2 / step; i++) {
canvas.drawLine(Offset(0, 0), Offset(0, size.height / 2), gridPait);
canvas.translate(step, 0);
}
canvas.restore();
}
///画网格 todo 记得先把原点移动到中心位置
void canvasBottomRight(Canvas canvas, Size size) {
canvasGrid(canvas, size);
///沿X轴镜像
canvas.save();
canvas.scale(1, -1);
canvasGrid(canvas, size);
canvas.restore();
///沿Y轴镜像
canvas.save();
canvas.scale(-1, 1);
canvasGrid(canvas, size);
canvas.restore();
///原点镜像
canvas.save();
canvas.scale(-1, -1);
canvasGrid(canvas, size);
canvas.restore();
}
///画一圈太阳光 2* pi 是一圈的弧度
void drawDot(Canvas canvas) {
Paint paint = Paint()
..color = Colors.orangeAccent
..strokeWidth = 10
..style = PaintingStyle.stroke;
canvas.save();
for (int i = 0; i < 12; i++) {
canvas.drawLine(Offset(80, 0), Offset(100, 0), paint);
//旋转是按照弧度来的
canvas.rotate(2 * pi / 12);
}
canvas.restore();
}
final List<Offset> points = [
Offset(-120, -20),
Offset(-80, -80),
Offset(-40, -40),
Offset(0, -100),
Offset(40, -140),
Offset(80, -160),
Offset(120, -100),
];
///绘制点
///【1】 绘点: drawPoints
///PointMode.lines : 线段模式 线段模式下：每两个点一对形成线段。如果点是奇数个，那么最后一个点将没有用。
///PointMode.polygon : 多边形连线模式
void drawPoint(Canvas canvas) {
Paint paint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 10
..strokeCap = StrokeCap.round;
canvas.drawPoints(ui.PointMode.polygon, points, paint);
}
///绘制坐标点
void drawCoordinate(Canvas canvas, Size size) {
//斜线长度
double lineWidth = 8;
Paint paint = Paint()..color = Colors.orange;
paint.strokeWidth = 1.5;
canvas.drawLine(Offset(0, 0), Offset(size.width / 2, 0), paint);
canvas.drawLine(Offset(0, 0), Offset(0, size.height / 2), paint);
canvas.drawLine(Offset(0, 0), Offset(-size.width / 2, 0), paint);
canvas.drawLine(Offset(0, 0), Offset(0, -size.height / 2), paint);
canvas.drawLine(Offset(size.width / 2 - lineWidth, -lineWidth),
Offset(size.width / 2, 0), paint);
canvas.drawLine(Offset(size.width / 2 - lineWidth, lineWidth),
Offset(size.width / 2, 0), paint);
canvas.drawLine(Offset(-lineWidth, size.height / 2 - lineWidth),
Offset(0, size.height / 2), paint);
canvas.drawLine(Offset(lineWidth, size.height / 2 - lineWidth),
Offset(0, size.height / 2), paint);
}
///绘制矩形
void drawRect(Canvas canvas) {
Paint paint = Paint()
..color = Colors.green
..strokeWidth = 1.5;
//左上右下
Rect rectFromLTRB = Rect.fromLTRB(-120, -120, -80, -80);
canvas.drawRect(rectFromLTRB, paint);
//矩形中心
Rect rect = Rect.fromCenter(center: Offset(0, 0), width: 160, height: 160);
canvas.drawRect(rect, paint..color = Colors.blue);
//左定点和宽高
Rect rectFromLTWH = Rect.fromLTWH(-120, 80, 40, 40);
canvas.drawRect(rectFromLTWH, paint..color = Colors.amber);
//中心 内切圆
Rect rectCircle = Rect.fromCircle(center: Offset(100, -100), radius: 20);
canvas.drawRect(rectCircle, paint..color = Colors.grey);
Rect rectPoint = Rect.fromPoints(Offset(80, 80), Offset(120, 120));
canvas.drawRect(rectPoint, paint..color = Colors.red);
}
///绘制圆角矩形
void drawRRect(Canvas canvas) {
Paint paint = Paint();
paint
..color = Colors.blue
..strokeWidth = 1.5;
//圆角矩形fromRectXY
Rect rect = Rect.fromCenter(center: Offset(0, 0), width: 160, height: 160);
//每个角横向给40px的弯曲度，纵向给20px的弯曲度
RRect rRect = RRect.fromRectXY(rect, 40, 20);
canvas.drawRRect(rRect, paint);
//绘制一个矩形，每一个x，y都是10
canvas.drawRRect(RRect.fromLTRBXY(-120, -120, -80, -80, 10, 10), paint);
//绘制一个矩形，使用半径为10
canvas.drawRRect(RRect.fromLTRBR(120, 120, 80, 80, Radius.circular(10)),
paint..color = Colors.red);
//绘制一个矩形，使每一个角落都设置特定的radius
canvas.drawRRect(
RRect.fromLTRBAndCorners(80, 80, 120, 120,
topRight: Radius.elliptical(20, 10),
bottomRight: Radius.elliptical(10, 10)),
paint..color = Colors.green);
Rect rectPoint = Rect.fromPoints(Offset(-120, 80), Offset(-80, 120));
canvas.drawRRect(
RRect.fromRectAndCorners(rectPoint, bottomRight: Radius.circular(10)),
paint..color = Colors.orange);
}
///绘制两个圆角矩形差阈 核心是找到两个圆角的区域，前者减去后者。
void drawDRRect(Canvas canvas) {
Paint paint = Paint()
..color = Colors.blue
..strokeWidth = 1.5;
Rect outRect =
Rect.fromCenter(center: Offset(0, 0), width: 160, height: 160);
Rect inRect =
Rect.fromCenter(center: Offset(0, 0), width: 100, height: 100);
///绘制一个外矩形扣 去一个内矩形的环
canvas.drawDRRect(RRect.fromRectXY(outRect, 20, 20),
RRect.fromRectXY(inRect, 20, 20), paint);
Rect outRect2 =
Rect.fromCenter(center: Offset(0, 0), width: 60, height: 60);
Rect inRect2 = Rect.fromCenter(center: Offset(0, 0), width: 40, height: 40);
///绘制一个外矩形扣 去一个内矩形的环
canvas.drawDRRect(RRect.fromRectXY(outRect2, 10, 10),
RRect.fromRectXY(inRect2, 10, 10), paint..color = Colors.green);
}
///绘制圆 一个中心点Offset和半径组成，椭圆由一个矩形域确定
void drawFill(Canvas canvas) {
Paint paint = Paint();
canvas.save();
canvas.translate(-200, 0);
canvas.drawCircle(Offset(0, 0), 60, paint);
canvas.restore();
//画椭圆
Rect rect = Rect.fromCenter(center: Offset(0, 0), height: 100, width: 120);
canvas.drawOval(rect, paint);
//画矩形区域
canvas.save();
canvas.translate(200, 0);
//drawArc(矩形区域，起始弧度，扫描弧度，是否连接中心，画笔)
//连接中心就是完整的封闭图形，不连接就是开口的
canvas.drawArc(rect, 0, pi / 2 * 3, false, paint);
canvas.restore();
}
///画弧线
void drawArcDetail(Canvas canvas) {
Rect rect = Rect.fromCenter(center: Offset(0, 0), height: 100, width: 100);
Paint paint = Paint()
..strokeWidth = 2
..style = PaintingStyle.stroke;
canvas.save();
canvas.translate(-200, 0);
canvas.drawArc(rect, 0, pi / 2 * 3, false, paint);
canvas.restore();
canvas.drawArc(rect, 0, pi / 2 * 3, true, paint);
canvas.save();
canvas.translate(200, 0);
var a = pi / 8;
canvas.drawArc(
rect,
a,
2 * pi - a.abs() * 2,
true,
paint
..color = Colors.yellowAccent
..style = PaintingStyle.fill);
canvas.translate(40, 0);
canvas.drawCircle(Offset(0, 0), 6, paint);
canvas.translate(25, 0);
canvas.drawCircle(Offset(0, 0), 6, paint);
canvas.restore();
}
///绘制画笔 todo 看下什么原因
void drawPaint(Canvas canvas, Size size) {
var colors = [
Color(0xFFF60C0C),
Color(0xFFF3B913),
Color(0xFFE7F716),
Color(0xFF3DF30B),
Color(0xFF0DF6EF),
Color(0xFF0829FB),
Color(0xFFB709F4),
];
var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
Paint paint = Paint();
paint
..shader = ui.Gradient.linear(
Offset(0, 0), Offset(size.width, 0), colors, pos, TileMode.clamp)
..blendMode = BlendMode.lighten;
canvas.drawPaint(paint);
}
///绘制阴影 drawShadow
void drawShadow(Canvas canvas){
Path path = Path();
path.lineTo(80, 80);
path.lineTo(-80, 80);
///true 表示内部涂色
canvas.drawShadow(path, Colors.red, 3, true);
canvas.translate(200, 0);
canvas.drawShadow(path, Colors.red, 3, false);
}
void drawPath(Canvas canvas){
Path path = Path();
path.lineTo(60, 60);
path.lineTo(-60, 60);
path.lineTo(60, -60);
path.lineTo(-60, -60);
path.close();
Paint paint = Paint();
canvas.drawPath(path, paint);
canvas.translate(140, 0);
canvas.drawPath(path, paint..style = PaintingStyle.stroke
..strokeWidth = 2);
}
///画布的裁剪
///画布裁剪后，只有裁剪部分才会生效画的内容
void clipCanvas(Canvas canvas){
var rect = Rect.fromCenter(center: Offset.zero,width: 360,height: 240);
canvas.clipRect(rect,doAntiAlias: true,clipOp: ui.ClipOp.intersect);
var colors = [Color(0xFFF60C0C),
Color(0xFFF3B913),
Color(0xFFE7F716),
Color(0xFF3DF30B),
Color(0xFF0DF6EF),
Color(0xFF0829FB),
Color(0xFFB709F4),];
var pos = [1.0 / 7, 2.0 / 7, 3.0 / 7, 4.0 / 7, 5.0 / 7, 6.0 / 7, 1.0];
Paint paint = Paint();
paint.shader = ui.Gradient.linear(rect.centerLeft, rect.centerRight, colors,pos,TileMode.clamp);
paint.blendMode = BlendMode.lighten;
canvas.drawPaint(paint);
}
}
网友评论