Flutter 绘制虚线

Flutter 没有自带的虚线绘制工具,需要自己绘制,下面提供一个方法来绘制吧,可以作为Paint的扩展,也可以直接用这个方法绘制。上代码。

Dart 复制代码
void dashPaint(
      Canvas canvas, startdx, startdy, enddx,enddy, dashWidth, gapWidth, Paint paint) {
    // 使用循环来模拟虚线效果
// dashWidth 虚线的宽度,gapWidth的宽度, start起点坐标,end终点坐标
    double currentX = startdx;
    double currentY = startdy;
    double d= sqrt((enddx- startdx)*(enddx- startdx)+(enddy- startdy)*(enddy- startdy)); //计算线段长度
    // sin
    double sin = (enddy - startdy) /d;
    double cos = (enddx - startdx) /d;
    while ((sin>0&&currentY < enddy) ||(sin<0&&currentY > enddy)){
      canvas.drawLine(
        Offset(currentX, currentY),
        Offset(currentX+ dashWidth* cos, currentY + dashWidth * sin ),
        paint,
      );
      currentX += (dashWidth + gapWidth)* cos;
      currentY += (dashWidth + gapWidth)* sin;
    }
  }
相关推荐
SoaringHeart5 小时前
Flutter调试组件:打印任意组件尺寸位置信息 NRenderBox
前端·flutter
程序猿的程8 小时前
开源一个 React 股票 K 线图组件,传个股票代码就能画图
前端·javascript
大雨还洅下9 小时前
前端JS: 虚拟dom是什么? 原理? 优缺点?
javascript
唐叔在学习9 小时前
[前端特效] 左滑显示按钮的实现介绍
前端·javascript
青青家的小灰灰10 小时前
深入理解事件循环:异步编程的基石
前端·javascript·面试
九狼10 小时前
Flutter URL Scheme 跨平台跳转
人工智能·flutter·github
前端Hardy11 小时前
HTML&CSS&JS:打造丝滑的3D彩纸飘落特效
前端·javascript·css
前端Hardy11 小时前
HTML&CSS&JS:丝滑无卡顿的明暗主题切换
javascript·css·html
_squirrel12 小时前
记录一次 Flutter 升级遇到的问题
flutter
UIUV12 小时前
node:child_process spawn 模块学习笔记
javascript·后端·node.js