{"id":15495914,"url":"https://github.com/hairyf/u-draw","last_synced_at":"2025-04-13T08:41:13.429Z","repository":{"id":38612130,"uuid":"303141593","full_name":"hairyf/u-draw","owner":"hairyf","description":"Drawing multi terminal poster tool, supporting uni multi terminal and WeChat environment.","archived":false,"fork":false,"pushed_at":"2025-03-13T07:04:16.000Z","size":5783,"stargazers_count":51,"open_issues_count":15,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T00:14:04.271Z","etag":null,"topics":["canvas","ctx","draw","uni"],"latest_commit_sha":null,"homepage":"https://u-draw.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hairyf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-11T14:40:10.000Z","updated_at":"2025-03-04T11:20:49.000Z","dependencies_parsed_at":"2023-11-09T11:51:40.788Z","dependency_job_id":"8f6dc8c4-acc9-4047-b071-bdd74706a8b3","html_url":"https://github.com/hairyf/u-draw","commit_stats":null,"previous_names":["hairyf/u-draw","hairyf/u-draw-poster"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hairyf%2Fu-draw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hairyf%2Fu-draw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hairyf%2Fu-draw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hairyf%2Fu-draw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hairyf","download_url":"https://codeload.github.com/hairyf/u-draw/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248686441,"owners_count":21145490,"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","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":["canvas","ctx","draw","uni"],"created_at":"2024-10-02T08:20:28.118Z","updated_at":"2025-04-13T08:41:13.406Z","avatar_url":"https://github.com/hairyf.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"- 创建绘制海报`canvas`矩形方法，内置了图片绘制，圆角矩形绘制，换行字体绘制等方法。\n- 接近原生开发体验，上手快，只需考虑业务逻辑，而不用考虑其他问题。\n- 拥有良好的语法架构，不会在绘制`uni/wx`矩形时陷入回调地狱。\n- 支持原生小程序，与`uniapp`多端应用。当是环境为原生小程序时，自动切换为性能更好的`type2d`绘制方式。\n- 将复杂的逻辑组合为简单的方法，扩展性强，可使用 `use|useCtx` 引入扩展。\n- 支持`typescript`，支持`vue3`模板，具体使用参考 [useDraw](https://u-draw.vercel.app/other/vite-vue3.html)。\n\n- API 文档：[u-draw](https://u-draw.vercel.app)\n- 插件市场：[dcloud/u-draw](https://ext.dcloud.net.cn/plugin?id=3237)\n\n## ⚙️ Install\n\n```sh\npnpm add u-draw --dev\n# Or Yarn\nyarn add u-draw --dev\n```\n\n## 📖 Usage\n\n### template\n\n```html\n\u003c!-- #ifdef MP-WEIXIN --\u003e\n\u003ccanvas id=\"canvas\" type=\"2d\" style=\"width:100px; height:100px\" /\u003e\n\u003c!-- #endif --\u003e\n\u003c!-- #ifndef MP-WEIXIN --\u003e\n\u003ccanvas canvas-id=\"canvas\" id=\"canvas\" style=\"width:100px; height:100px\" /\u003e\n\u003c!-- #endif --\u003e\n```\n\n```html\n\u003cscript setup\u003e\n// 注意：如果使用 HBuilder 引入, 需要引入 '../js_sdk'\nimport { useDraw } from \"u-draw\"\n\nconst { draw, render, create } = useDraw('canvas')\n\u003c/script\u003e\n\n```\n\n\u003cdetail\u003e\n\u003csummary\u003eVue 2\u003c/summary\u003e\u003cbr\u003e\n\n```js\nimport { createDraw } from 'u-draw'\n\nexport default {\n  async onReady() {\n    // 传入选择器, 初始化绘制工具(注意, 不需要传入#符号) 当微信小程序时, 将自动启用type2d绘制\n    const dp = await createDraw('canvas', {\n      width: 100,\n      height: 100\n    })\n  }\n}\n```\n\n\u003c/detail\u003e\n\n### content\n\n```js\nconst { draw, render, create, canvas } = useDraw('canvas')\n// 绘制背景与文字\ndraw((ctx) =\u003e {\n  ctx.fillStyle = '#F4F4F4'\n  ctx.fillRect(0, 0, canvas.width, canvas.height)\n  ctx.textBaseline = 'top'\n  ctx.textAlign = 'start'\n  ctx.fillStyle = 'white'\n  ctx.font = `bold ${22}px sans-serif`\n  ctx.fillText('周先生', canvas.width / 2, 38.5)\n})\n// 绘制图片内容\ndraw(async (ctx) =\u003e {\n  // 拥有异步等待的图片绘制，支持 local、url 等图片类型\n  await ctx.drawImage(/* ... */)\n})\n```\n\n\u003e 值得注意的是, `draw`方法会自动的执行 `ctx.save/ctx.restore`, 不需要人为操纵绘画栈。\n\n```js\ndraw((ctx) =\u003e { /* ... */ })\n// 相当于\nctx.save()\n/* ... */\nctx.restore()\n```\n\n### render\n\n`draw` 并不会马上绘制，只是将该任务添加到了任务栈，需要使用 `dp.render` 函数进行绘制，该函数在绘制完毕后将弹出所有任务。\n\n`render` 在非 `2d` 绘画中，执行绘画任务完毕后，将自动执行 `ctx.draw` 方法，并在 draw 绘画才算异步结束。\n\n```js\ndraw((ctx) =\u003e { /* ... */ })\ndraw(async (ctx) =\u003e { /* ... */ })\n// 由于每个任务都有可能会有异步的绘制任务, 所以得需要使用await等待绘制\nconst result = await render()\n// 绘制成功将返回每个任务的绘制状况组成的数组\nconsole.log('draw绘制状况:', result) // draw绘制状况: [ { api: 'drawImage', params: [/* ... */], status: 'success'} ]\n```\n\n\u003e 当全部同步绘制时，将会出现绘制时间保持不一致的情况。这样就会导致一个问题，绘制图层覆盖导致显示未达到预期效果，之所以设计为异步等待，也是为了绘制图层能保持一致顺序。\n\n### image\n\n如需要保存为图片时，可以使用 `create` 进行创建图片本地地址，在由 `wx` 或 `uni` 的 `api` 进行保存。\n\n```js\ndraw(async (ctx) =\u003e { /* ... */ })\nconst result = await render()\nconst posterImgUrl = await create()\nconsole.log('draw绘制状况:', result)\nconsole.log('绘制生成本地地址:', posterImgUrl) // ...tmp...\n```\n\n\n你也可以不使用 `render` 方法，当调用 `create` 时会自动检测任务列表，如果有则执行绘制任务后在创建地址。\n\n```js\ndraw(async (ctx) =\u003e { /* ... */ })\n// 跳过drawPoster.render直接生成地址\nconst posterImgUrl = await create()\nconsole.log('绘制生成本地地址:', posterImgUrl)\n```\n\n## Animation\n\n`4.x` 版本支持 renderAnimation，支持渲染动画、小程序、H5 默认使用 `requestAnimationFrame` 渲染：\n\n```ts\nconst { draw, renderAnimation, create, canvas } = useDrawCanvas('canvas')\n\nconst w = ref(100)\nconst h = ref(100)\n\ndraw((ctx) =\u003e {\n  ctx.roundRect(0, 0, w.value, h.value)\n})\n\n// 绘制图片内容（在 Animation 中可能存在图片绘制过慢的问题）\ndraw(async (ctx) =\u003e {\n  await ctx.drawImage(/* ... */)\n})\n\nconst stop = renderAnimation(() =\u003e {\n  width.value--\n  if (width.value === 0)\n    stop()\n})\n\nfunction onCreate() {\n  // 等待 renderAnimation 结束后执行\n  const url = await create()\n}\n```\n\n\n---\n\n- 博客：[Mr.Mao'blog](https://hairy.blog/)\n- 邮箱：951416545@qq.com","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhairyf%2Fu-draw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhairyf%2Fu-draw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhairyf%2Fu-draw/lists"}