-
Notifications
You must be signed in to change notification settings - Fork 53
/
custom_triangle_view.dart
154 lines (132 loc) · 4.02 KB
/
custom_triangle_view.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
/**
* desc:自定义view
* author: xiedong
* date: 2021/9/2
**/
void main() {
runApp(MaterialApp(
// home: CustomTriangleView(),
home: AutoChangeColorCircleView(),
));
}
class AutoChangeColorCircleView extends StatefulWidget {
@override
State<StatefulWidget> createState() => ViewState();
}
class ViewState extends State<AutoChangeColorCircleView> {
var _colorArr = [
Colors.amberAccent,
Colors.blue,
Colors.deepOrange,
Colors.cyan,
Colors.black,
Colors.deepPurple,
];
var _color;
@override
void initState() {
super.initState();
int count = 0;
var period = Duration(seconds: 1);
// print('currentTime='+DateTime.now().toString());
Timer.periodic(period, (timer) {
print('----颜色值改变---');
this.setState(() {
_color = _colorArr[Random().nextInt(4)];
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("自定义VIEW"),
),
body: CustomPaint(
painter: AutoChangeColorCircle(_color),
),
);
}
}
class AutoChangeColorCircle extends CustomPainter {
var _paint;
AutoChangeColorCircle(_color) {
_paint = Paint()
..color = _color //画笔颜色
..strokeCap = StrokeCap.round //画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..blendMode = BlendMode.exclusion //颜色混合模式
..style = PaintingStyle.fill //绘画风格，默认为填充
..colorFilter = ColorFilter.mode(Colors.blueAccent,
BlendMode.exclusion) //颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0) //模糊遮罩效果，flutter中只有这个
..filterQuality = FilterQuality.high //颜色渲染模式的质量
..strokeWidth = 15.0; //画笔的宽度
}
@override
void paint(Canvas canvas, Size size) {
//利用path绘制三角形
// Path path = Path();
// path.lineTo(100, 0);
// path.lineTo(0, 100);
// path.close();
// canvas.drawPath(path, _paint);
//利用drawCircle圆心坐标点为（100, 100），半径为50的实心圆
print('----------图像被重绘制');
canvas.drawCircle(Offset(100, 100), 50, _paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
/**
* 静态view shouldRepaint返回false
*/
class CustomTriangleView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("自定义VIEW"),
),
body: CustomPaint(
painter: TriangleView(),
),
);
}
}
class TriangleView extends CustomPainter {
var _paint;
TriangleView() {
_paint = Paint()
..color = Colors.blueAccent //画笔颜色
..strokeCap = StrokeCap.round //画笔笔触类型
..isAntiAlias = true //是否启动抗锯齿
..blendMode = BlendMode.exclusion //颜色混合模式
..style = PaintingStyle.fill //绘画风格，默认为填充
..colorFilter = ColorFilter.mode(Colors.blueAccent,
BlendMode.exclusion) //颜色渲染模式，一般是矩阵效果来改变的,但是flutter中只能使用颜色混合模式
..maskFilter = MaskFilter.blur(BlurStyle.inner, 3.0) //模糊遮罩效果，flutter中只有这个
..filterQuality = FilterQuality.high //颜色渲染模式的质量
..strokeWidth = 15.0; //画笔的宽度
}
@override
void paint(Canvas canvas, Size size) {
//利用path绘制三角形
// Path path = Path();
// path.lineTo(100, 0);
// path.lineTo(0, 100);
// path.close();
// canvas.drawPath(path, _paint);
//利用drawCircle圆心坐标点为（100, 100），半径为50的实心圆
canvas.drawCircle(Offset(100, 100), 50, _paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}