如何绘制这样的自定义颤动边框?

2024-04-11

我想要有关如何实现自定义边框的想法,如下图所示。


我制造了一个CustomPainter绘制形状:

class MyPainter extends CustomPainter {
  Color color;
  MyPainter({@required this.color});
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    var path = Path();
    final double startPoint = size.width * 0.2;
    final double rheight = 30;
    path.moveTo(startPoint, rheight);
    path.lineTo(startPoint + 20, 0);
    path.lineTo(startPoint + 40, rheight);
    path.moveTo(0, rheight);
    path.lineTo(startPoint, rheight);
    path.moveTo(startPoint + 40, rheight);
    path.lineTo(size.width, rheight);
    path.lineTo(size.width, size.height);
    path.moveTo(0, rheight);
    path.lineTo(0, size.height);
    path.moveTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Usage:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: CustomPaint(
            painter: MyPainter(color: Colors.black.withOpacity(0.2)),
            child: Container(
              height: 300,
            )
          ),
        ),
      ),
    );
  }

Result:

Update:这是弯曲边缘版本:

class MyPainter extends CustomPainter {
  Color color;
  MyPainter({@required this.color});
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = color
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    var path = Path();
    final double startPoint = size.width * 0.2;
    final double rheight = 30;
    path.moveTo(startPoint, rheight);
    path.lineTo(startPoint + 20, 5);
    path.cubicTo(startPoint + 23, 0, startPoint + 26, 0,
      startPoint + 29, 0);
    path.lineTo(startPoint + 50, rheight);
    path.moveTo(10, rheight);
    path.lineTo(startPoint, rheight);
    path.moveTo(startPoint + 50, rheight);
    path.lineTo(size.width - 10, rheight);
    path.cubicTo(size.width, rheight + 5, size.width, rheight + 10,
        size.width, rheight + 15);
    path.lineTo(size.width, size.height - 15);
    path.moveTo(10, rheight);
    path.cubicTo(0, rheight + 5, 0, rheight + 10,
        0, rheight + 15);
    path.lineTo(0, size.height - 10);
    path.cubicTo(5, size.height, 10, size.height,
        15, size.height);
    path.moveTo(15, size.height);
    path.lineTo(size.width - 10, size.height);
    path.cubicTo(size.width, size.height - 5, size.width, size.height - 10,
        size.width, size.height - 15);
    path.moveTo(size.width - 5, size.height);
    path.close();
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Result:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何绘制这样的自定义颤动边框? 的相关文章

  • JButton 在其边框和按钮本身之间有填充

    我有一个 JButton 其背景为绿色 边框为 LineBorder 我想在按钮和边框之间插入一个空格 一种填充 我尝试过 setMargin new Insets x y t z 但它似乎不起作用 这是我的一段代码 JButton JBt
  • 禁用向下拖动以关闭 showModalBottomSheet

    如何在底部表单模态中禁用 转义向下拖动手势 以便用户可以在模态中进行交互而不会意外关闭模态 下面用实际的模态底部表进行了更新 return showModalBottomSheet context context builder Build
  • 有没有办法为 CSS3 边框图像的每一侧使用不同的图像?

    在 Firefox 和 Safari 上 我可以通过以下 CSS 使用图像作为边框 moz border image url shadow left png 0 7 0 7 round round webkit border image u
  • Flutter:如何在 Web 视图中启用手势?

    我想在 Flutter 中通过捏合和张开来放大我的网页视图页面 我在网上做了一些研究 我在某处发现了这个 虽然 WebView Android 和 UIWebView iOS 内置了捏合和缩放功能 但它们需要 打开 在Android中 插件
  • JPanel 上的圆形边框

    我这里得到的是一个带有圆形边框的 JPanel 其设置如下 panel setBorder new LineBorder PanelColor 5 true 问题是 在每个角上都有 2 条从外角到内角的对角不透明线 即边框的长度 边界后面的
  • 未为“AudioCache”类型定义“play”方法

    问题 未为 AudioCache 类型定义 play 方法 导入 包 flutter material dart 导入 包 audioplayers src audio cache dart void main runApp Xylopho
  • flutter run 无法在 iOS 模拟器上运行,但 Xcode 可以构建

    在我的 Flutter 项目中 flutter run命令无法将项目构建到 iOS 模拟器 但在 Xcode 中 当我单击构建按钮时 Xcode 可以毫无问题地构建它 我正在使用 AgoraRTC 库 添加 Flutter Quill 后就
  • Flutter 为什么环绕行时 Wrap 不起作用?

    我试图将一些内容包装在 flutter 中 但没有成功 我发现我无法像使用芯片或文本小部件那样换行 有人知道为什么吗 这是三组 Rows 每组都有一个图标和一个文本 并排放置 但在较小的屏幕中它会溢出 因为没有足够的空间 宽度 我希望当当前
  • Flutter:未捕获的 ReferenceError:firebase 未定义

    我在 Flutter Web 应用程序中使用 Firebase 服务 但在加载 Firebase 脚本时遇到问题 当我使用扑动时运行 d chrome我看到有错误的空白页面 重新加载页面后加载正常 当我进行 flutter build we
  • CustomPainter 使用 Listenable 重绘

    CustomPainter 类似乎有几种触发重绘的方法 我让我的画家使用 shouldRepaint 方法 但是 我希望我的画家对可监听中的更改做出反应 而不是轮询更改 Flutter 文档指出 触发重绘的最有效方法是 扩展此类并向 Cus
  • 如何在 Flutter/Dart 中使用带有基类的 Provider

    我有这样的基类和派生类 abstract class A extends ChangeNotifier class B extends A 我正在使用这样的提供者 ChangeNotifierProvider b create contex
  • Internet Explorer 9 中图像地图周围的蓝色边框

    我遇到了以下问题 我在网站上使用图像地图 在 Internet Explorer 9 IE8 很好 中 当我单击链接 区域标签 时 它周围会出现蓝色边框 如何摆脱它 我试过了 map map area border none importa
  • 是否可以在flutter中开发移动键盘应用程序

    我们想要开发具有一些独特功能 例如在键盘上翻译 的移动键盘应用程序 第三方键盘 我们想知道是否有一种方法可以同时为 IOS 和 Android 开发一次 使用 Flutter 或者其他解决方案 对此有一个长的和一个短的答案 简短的回答基本上
  • 如何在 WPF 中实现虚线或点线边框?

    我有一个ListViewItem我正在申请Style到 我想把灰色虚线作为底部Border 我怎样才能在 WPF 中做到这一点 我只能看到纯色画笔 这在我们的应用程序中效果很好 允许我们使用真正的边框而不是乱用矩形
  • 如何使用 Firebase_Auth 和 Flutter 登录 Twitter

    一个人应该如何编程使用 Twitter 登录特征使用firebase auth https pub dev packages firebase auth和颤动 我看到一些使用的例子flutter twitter login https pu
  • MappedListIterable 不是子类型

    我是 flutter 和 dart 的新手 并尝试从 firestore 作为流获取数据并将其提供给我的 ListView 但我不断收到此错误 type MappedListIterable
  • 删除特定数据表上的所有边框

    我需要使用 PrimeFaces 隐藏一个数据表的所有边框 而不是全部 我尝试了很多事情 但没有人奏效 有谁知道该怎么做 我已将以下样式 单独 应用于ui datatable class border hidden important bo
  • 带有 Firebase 通知的 Flutter Web - subscribeToTopic

    我想在我的 flutter web 应用程序中接收 firebase 通知 我知道 firebase messaging 包不可用于网络 但我已经管理配置我的应用程序以获取令牌 在网络应用程序位于后台时接收并显示消息 并在应用程序位于前台时
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • AppLifeCycleState.detached 未被调用

    import package flutter material dart void main gt runApp MyApp class MyApp extends StatelessWidget override Widget build

随机推荐