Flutter DoodlePainter canvas画布涂鸦
变量
List<Path> paths = []; //坐标路径
List<Paint> paints = []; //样式属性
DIV设置
Stack(
children: [
//画布底层背景
Container(
height: 358,//必须
padding: const EdgeInsets.fromLTRB(12, 0, 12, 0),
child: Text("画布底层背景"),
),
//手势
GestureDetector(
onPanDown: (details) {
path = Path();
//Path 必须单独外部设置,不然不生效
var paint = Paint();
paint.color = isColor; //颜色
paint.style = PaintingStyle.stroke; //笔画模式
paint.strokeWidth = stroke; //笔画宽度
paint.blendMode = BlendMode.src; //颜色混合模式
path.moveTo(details.localPosition.dx, details.localPosition.dy);
paths.add(path);
paints.add(paint);
setState(() {});//通知DOM更新
},
onPanUpdate: (details) {
paths.last.lineTo(details.localPosition.dx, details.localPosition.dy);
setState(() {});//通知DOM更新
},
//涂鸦
child: CustomPaint(
painter: _DoodlePainter(
paths: paths,
paints: paints,
),
isComplex: true,
willChange: true,
size: Size(double.infinity,356),
),
),
],
),
涂鸦绘制类
//涂鸦绘制类
class _DoodlePainter extends CustomPainter {
List<Path> paths;
List<Paint> paints;
_DoodlePainter({
required this.paths,
required this.paints,
});
@override
void paint(Canvas canvas, Size size) {
for (var i = 0; i < paths.length; i++) {
canvas.drawPath(paths[i], paints[i]); // 绘制
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}