用CustomPainter绘制心形图
用CustomPainter绘制心形图
提问于 2019-09-02 20:07:59
我想知道是否有人有任何关于如何开始使用CustomPainter绘制心形的建议。我已经画出了像三角形和正方形这样的东西，或者是一个基本的圆，但是心当然有直线和曲线。
我用这个画了一个三角形，看起来有点像一颗心，但不知道如何画出心所需的曲线。
class Heart extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: CustomPaint(
painter: TrianglePainter(
strokeColor: Color(0xFFF27788),
paintingStyle: PaintingStyle.fill,
),
child: Container(
height: 60 * Dep.hr,
width: 60 * Dep.hr,
),
),
);
}
}
class TrianglePainter extends CustomPainter {
final Color strokeColor;
final PaintingStyle paintingStyle;
final double strokeWidth;
TrianglePainter({this.strokeColor, this.strokeWidth = 3, this.paintingStyle = PaintingStyle.stroke});
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = strokeColor
..strokeWidth = strokeWidth
..style = paintingStyle;
canvas.drawPath(getTrianglePath(size.width, size.height), paint);
}
Path getTrianglePath(double x, double y) {
return Path()
..moveTo(y, 0)
..lineTo(0, 0)
..lineTo(x / 2, y);
}
@override
bool shouldRepaint(TrianglePainter oldDelegate) {
return oldDelegate.strokeColor != strokeColor ||
oldDelegate.paintingStyle != paintingStyle ||
oldDelegate.strokeWidth != strokeWidth;
}
}此外，这只是一个颜色块，但我真的需要一个边界周围的形状。这是我的预期输出，不确定它是否是如意算盘。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-09-02 21:01:22
试试这个：
class HeartWidget extends StatefulWidget {
@override
_HeartWidgetState createState() => _HeartWidgetState();
}
class _HeartWidgetState extends State<HeartWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Testing'),
),
body: Center(
child: CustomPaint(
size: Size(70, 80),
painter: HeartPainter(),
),
),
);
}
}
class HeartPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
Paint paint = Paint();
paint
..color = Colors.black
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeWidth = 6;
Paint paint1 = Paint();
paint1
..color = Colors.red
..style = PaintingStyle.fill
..strokeWidth = 0;
double width = size.width;
double height = size.height;
Path path = Path();
path.moveTo(0.5 * width, height * 0.35);
path.cubicTo(0.2 * width, height * 0.1, -0.25 * width, height * 0.6,
0.5 * width, height);
path.moveTo(0.5 * width, height * 0.35);
path.cubicTo(0.8 * width, height * 0.1, 1.25 * width, height * 0.6,
0.5 * width, height);
canvas.drawPath(path, paint1);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57756692
复制相关文章
相似问题
腾讯云开发者
