dart 如何画三角形的圆角？

t1qtbnec 于 2023-11-14 发布在其他

关注(0)|答案(1)|浏览(137)

我试着从这个图像复制光标，但是我在创建圆角时遇到了一个小问题。我似乎不能正确地完成它。

的数据
我与你分享我的代码（如果你愿意，你可以在DartPad中运行它）。我被困在我需要圆角的地方。我已经尝试了几种方法，但它似乎不起作用。从我大致了解的情况来看，它应该使用drawRRect完成。

import 'package:flutter/material.dart';
import 'dart:math';
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Cursor'),
        ),
        body: Center(
          child: Transform.rotate(
            angle: pi,
            child: CustomPaint(
                size: const Size(60, 70),
                painter: CursorPainter()
            )
          )
        ),
      ),
    )
  );
}
class CursorPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;
    
    canvas.drawPath(drawPath(size.width, size.height), paint);
  }
  
  Path drawPath(double x, double y) => Path()
      ..moveTo(x / 2, 0)
      ..lineTo(0, y)
      ..quadraticBezierTo(x / 2, y + 15, x, y)
      ..close();
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

字符串
这是它目前的样子

的
如果有人有想法

dart

来源：https://stackoverflow.com/questions/77424331/how-to-round-the-corners-of-a-drawing-triangle

1条答案

按热度按时间

rpppsulh1#

这将是代码，我会实现做这样的事情，玩一点的值，这样你就可以自定义它更符合你的喜好，我认为transform.rotate是没有必要的，如果你有时间，阅读下面的文章，它会帮助你很多，祝你好运！
https://medium.com/flutter-community/paths-in-flutter-a-visual-guide-6c906464dcd0

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: const Text('Cursor'),
        ),
        body: Center(
            child:
              CustomPaint(size: const Size(50, 70), painter: CursorPainter()),
        )),
  ));
}
class CursorPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;
    canvas.drawPath(drawPath(size.width, size.height), paint);
  }
  Path drawPath(double x, double y) => Path()
    
    ..moveTo(x * 0.05, y * 0.1)
    ..quadraticBezierTo(x / 2, -x * 0.10, x * 0.95, y * 0.1)
      //borther right
    ..quadraticBezierTo(x, y * 0.12, x * 0.95, y * 0.2)
    ..lineTo(x * 0.5 + (x * 0.1), y * 0.9)
    //borther bottom
    ..quadraticBezierTo(x * 0.5, y * 1.08, x * 0.40, y * 0.9)
    ..lineTo(x * 0.05, y * 0.2)
       //borther left
    ..quadraticBezierTo(0, y * 0.12, x * 0.05, y * 0.1)
    ..close();
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

字符串

展开查看全部

赞(0）回复(0）举报 2023-11-14

我来回答

dart 如何画三角形的圆角？

1条答案

相关问题

热门标签

最新问答