{"id":19273071,"url":"https://github.com/fluttercandies/dash_painter","last_synced_at":"2025-09-07T20:08:20.104Z","repository":{"id":66181139,"uuid":"365878090","full_name":"fluttercandies/dash_painter","owner":"fluttercandies","description":"a package for flutter canvas paint dash line path easily.","archived":false,"fork":false,"pushed_at":"2024-06-24T09:23:10.000Z","size":8,"stargazers_count":27,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-21T22:36:27.892Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fluttercandies.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-10T00:44:32.000Z","updated_at":"2025-04-04T04:07:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"2d20cabb-c7f4-46d3-9ef5-2322bb898d46","html_url":"https://github.com/fluttercandies/dash_painter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fluttercandies/dash_painter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fdash_painter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fdash_painter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fdash_painter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fdash_painter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluttercandies","download_url":"https://codeload.github.com/fluttercandies/dash_painter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercandies%2Fdash_painter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274088625,"owners_count":25220260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T20:40:42.426Z","updated_at":"2025-09-07T20:08:20.075Z","avatar_url":"https://github.com/fluttercandies.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dash_painter\n\na package for flutter canvas paint dash line path easily.\n\n#### 1. `DashPainter` 如何使用\n\n`DashPainter` 只负责对 `路径 Path` 的虚线化绘制，不承担组件职能。\n一般用在拥有 `Canvas` 对象的回调方法中，比如自定义的 `CustomPainter`、`Decoration`。\n具体使用案例见 demo\n\n![](https://gitee.com/toly1994/toly_blog_pic/raw/master/image-20210509210035976.png)\n\n```dart\nconst DashPainter(span: 4, step: 9).paint(canvas, path, paint);\n```\n\n对于所有的路径都是使用的，如下的 `圆角矩形` 和 `圆形`；\n\n| 圆角矩形                                                     | 圆形                                                         |\n| ------------------------------------------------------------ | ------------------------------------------------------------ |\n| ![](https://gitee.com/toly1994/toly_blog_pic/raw/master/image-20210510070700102.png) | ![](https://gitee.com/toly1994/toly_blog_pic/raw/master/image-20210509211922128.png) |\n\n---\n\n#### 2. 点划线的使用\n\n\n除了虚线，还可以绘制`点划线` , `pointCount` 和 `pointWidth`两个属性，分别表示`点划线数`和`点划线长`。\n\n```dart\nconst DashPainter(\n    span: 4, // 空格长\n    step: 10, // 实线长\n    pointCount: 2, // 点划线个数\n    pointWidth: 2 // 点划线长\n).paint(canvas, path, paint);\n```\n\n- `单点划线`：\n\n![](https://gitee.com/toly1994/toly_blog_pic/raw/master/image-20210510070923020.png)\n\n- `双点划线`：\n\n![](https://gitee.com/toly1994/toly_blog_pic/raw/master/image-20210510071049769.png)\n\n- `三点划线`：\n\n![](https://gitee.com/toly1994/toly_blog_pic/raw/master/image-20210510071131986.png)\n\n---\n\n`点画线圆`：\n\n![](https://gitee.com/toly1994/toly_blog_pic/raw/master/image-20210510072143441.png)\n\n---\n\n#### `DashPainter`\n\n可能很多人不会自定义画板自己绘制，或只想简单地使用。其实除了 `CustomPainter` 还有其他地方有 `canvas`。比如 `Decoration` 。\n这里提供了 `DashDecoration` 的装饰，方便使用。如下实现一个`渐变的单点画线圆角虚线框`。\n\n![](https://gitee.com/toly1994/toly_blog_pic/raw/master/image-20210510091605411.png)\n\n```dart\nContainer(\n  width: 100,\n  height: 100,\n  decoration: DashDecoration(\n      pointWidth: 2,\n      step: 5,\n      pointCount: 1,\n      radius: Radius.circular(15),\n      gradient: SweepGradient(colors: [\n        Colors.blue,\n        Colors.red,\n        Colors.yellow,\n        Colors.green\n      ])),\n  child: Icon(\n    Icons.add,\n    color: Colors.orangeAccent,\n    size: 40,\n  ),\n),\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fdash_painter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluttercandies%2Fdash_painter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercandies%2Fdash_painter/lists"}