{"id":15028781,"url":"https://github.com/bobiscool/wxdraw","last_synced_at":"2025-05-14T12:10:14.044Z","repository":{"id":39228845,"uuid":"104294259","full_name":"bobiscool/wxDraw","owner":"bobiscool","description":"A lightweight canvas library which providing 2d draw for weapp  微信小程序2d动画库 😎  🐼","archived":false,"fork":false,"pushed_at":"2025-01-06T05:47:59.000Z","size":34134,"stargazers_count":1725,"open_issues_count":50,"forks_count":296,"subscribers_count":45,"default_branch":"master","last_synced_at":"2025-04-06T13:01:30.634Z","etag":null,"topics":["canvas","html5","javascript","weapp","webapp","wechat-app"],"latest_commit_sha":null,"homepage":"https://bobiscool.github.io/wxDrawDocs/#/","language":"JavaScript","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/bobiscool.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-09-21T02:56:49.000Z","updated_at":"2025-03-27T03:01:47.000Z","dependencies_parsed_at":"2025-01-18T23:37:20.357Z","dependency_job_id":null,"html_url":"https://github.com/bobiscool/wxDraw","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobiscool%2FwxDraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobiscool%2FwxDraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobiscool%2FwxDraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobiscool%2FwxDraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bobiscool","download_url":"https://codeload.github.com/bobiscool/wxDraw/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741144,"owners_count":21154249,"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","html5","javascript","weapp","webapp","wechat-app"],"created_at":"2024-09-24T20:09:04.652Z","updated_at":"2025-04-13T15:48:55.124Z","avatar_url":"https://github.com/bobiscool.png","language":"JavaScript","readme":"\n# wxDraw\n![](./assets/1.png)\n\n「已经开始支持图形创建」\n\n\u003e 轻量的小程序canvas动画库\n\n### [github](https://github.com/bobiscool/wxDraw)\n###  [完整文档看这里](https://bobiscool.github.io/wxDrawDocs/#/)\n\n\n\n## 是什么\n\ncanvas 是HTML5的一个重要元素，它能够高效的绘制图形，但是过于底层，且粗糙的Api，导致开发者很难使用它来做较为复杂的图形， 而且它的即时绘制无记忆特性，使得它内部的图形并不支持动画更不支持一切交互事件。\n\n这样的问题出现在所有支持canvas的客户端上同样出现在 **微信小程序**中的canvas中， 由于小程序由**jsCore**支持，并没有**window对象**，并且canvas的Api与标准的canvas的Api**有所出入**，所以市面上绝大部分canvas库**与它无缘**。\n\n而wxDraw也就应运而生，专门用于处理小程序上canvas的**图形创建**，**图形动画**，以及**交互**问题的。\n\n## 特性\n\n- **简单** 不需要你会canvas,会用jQuery就会使用wxDraw。\n- **灵活** 所有图形，随时随地都可以进行属性修改、图形添加以及图形销毁。\n- **事件支持** 小程序支持的事件只要是合理的都支持。\n- **缓动动画支持** wxDraw支持链式调用动画『就像jQuery的animate一样』，并且支持几乎所有的缓动函数\n\n\n## 支持图形\n\n\n\n\u003e 这里只做演示 详细文档 [点这里](http://project.ueflat.xyz/#/)\n\n\u003e 这些图形都可以在演示文件里看到 [点这里](https://github.com/bobiscool/wxDraw/tree/master/example)\n\n### rect\n```js\n var rect = new Shape('rect', {x: 60, y: 60, w: 40, h: 40, fillStyle: \"#2FB8AC\", rotate: Math.PI/2 },'mix', true);\n```\n![rect](http://project.ueflat.xyz/image/shadow.png)\n\n### circle\n```js\n let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4, \n                             fillStyle: \"#C0D860\",\n                            strokeStyle: \"#CC333F\", rotate: 20, lineWidth: 0, needGra: 'line', \n                              gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]}, \n                           'fill', true)\n```\n![](http://project.ueflat.xyz/image/sA.png)\n### polygon\n```js\nlet polygon = new Shape('polygon', { x: 200, y: 200, r: 40, sides: 9, //9边形\n                          fillStyle: \"#FC354C\", rotate: Math.PI / 4 }, 'mix', true)\n```\n![](http://project.ueflat.xyz/image/polygon.png)\n### ellipse\n```js\n    let ellipse = new Shape('ellipse', { x: 200, y: 200, a: 40, b: 100, \n                             fillStyle: \"#00A0B0\", rotate: Math.PI / 7 }, 'mix', true)\n```\n![](http://project.ueflat.xyz/image/ellipse.png)\n\n\n### image\n图形对象\n\n示例\n```js\nlet img = new Shape('image', { x: 100, y: 300,w:100,h:100, file:\"./1.png\"}, 'fill', true)\n  \n```\n![](http://project.ueflat.xyz/image/image.png)\n\n### cshape 「自定义图形」\n```js\n  let cshape = new Shape('cshape', {\n      rotate: Math.PI / 2,\n      points: [[70, 85], [40, 20], [24, 46], [2, 4], [14, 6], [4, 46]],\n      lineWidth: 5,\n      fillStyle: \"#00A0B0\",\n      rotate: Math.PI / 7,\n      needGra: 'circle',\n      smooth:false,\n      gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]\n    }, 'fill', true)\n```\n\n![](http://project.ueflat.xyz/image/cshapeNs.png)\n\n### line\n```js\n\nlet line = new Shape('line', { points:[[240,373],[11,32],[28,423],[12,105],[203,41],[128,0.06]], \n               strokeStyle: \"#2FB8AC\",lineWidth:1, rotate: 0, needShadow: true,smooth:false },  \n               'fill', true)\n```\n![](http://project.ueflat.xyz/image/lineNs.png)\n\n\n\n### text\n\n```js\n  let text = new Shape('text', { x: 200, y: 200, text: \"我是测试文字\", \n                      fillStyle: \"#E6781E\", rotate: Math.PI / 3}\n                      'fill', true)\n```\n\n![](http://project.ueflat.xyz/image/text.png)\n\n## wxDraw创作的动画演示\n\n\u003e 这些动画都可以在演示文件里看到 [点这里](https://github.com/bobiscool/wxDraw/tree/master/example)\n\n### Google\n![](./assets/google.gif)\n### 贪吃蛇\n![](./assets/qmlw.gif)\n\n### logo演绎\n![](./assets/wxDraw.gif)\n\n### rect舞蹈\n![](./assets/loading.gif)\n\n### 吃豆人 \n![](./assets/picMan.gif)\n\n## wxDraw事件\n\n\n\u003e 这些事件都可以在演示文件里看到 [点这里](https://github.com/bobiscool/wxDraw/tree/master/example)\n\n支持\n\n- tap\n- touchStart\n- touchEnd\n- touchMove\n- longPress\n- drag「自定义的事件」\n\n\n#### 事件演示\n\n##### 旁边UI小妹妹亲自示范 😜\n![](./assets/jiaohu.gif)\n \n##### 第一视角 \n![](./assets/interact.gif)\n\n\n**是不是特别简单，特别方便！！！\n来，老铁们，star走一波！！！**\n\n\n\n\n# TODO \n\n- 图形创建\n    - [x] rect\n    - [x] arc\n        - [x] 扇形\n        - [x] 圆\n    - [x] polygon\n        - [x] 正n边形\n        - [x] 用户自己加的形状\n        - [x] 光滑版用户自己加的形状\n    -  [ ] ~image~\n    -  [ ] 线条    \n        -  [ ] ~贝塞尔曲线~『用的较少,绘制出来后 没法事件检测』\n        -  [x] 普通线条\n        -  [x] 光滑曲线\n    - [ ] ~svg path~\n    - [x] 椭圆\n        - [x] 事件\n        - [x] 动画\n        - [x] 样式\n    - [x] 字体\n        - [x] 事件\n        - [x] 动画\n        - [x] 样式\n    - [ ] 粒子动画元素『我觉得这个算另外一种系统 不属于形状』\n-  [ ] 样式\n    -  [x] 阴影\n    -  [ ] 渐变   \n    -  [x] 线宽\n    -  [x] 线连接\n    -  [x] 透明度\n\n-  [x] 选中检测\n    -  [x] rect\n    -  [x] arc\n        - [x] 整个圆形\n        - [x] 扇形区域\n    -  [x] polygon 区域 \n        -  [x] 正多边形\n        -  [x] 非规则多边形\n    -  [x] 线条点击\n    -  [x] 点 点击\n    -  [x] 椭圆\n    -  [x] 层级区分\n-  [ ] 动画\n    -  [x] requestAnimationFrame垫片\n    -  [x] 时间扭曲函数\n    -  [ ] 运动\n        -  [x] 移动\n            -  [x] x\n            -  [x] y\n        -  [ ] ~放大缩小 使用矩阵~**暂时搁浅**\n        -  [x] 旋转\n            -  [x]原点旋转\n            -  [x]自身中心点旋转\n        -  [x] 变色\n        -  [x] 循环动画\n        -  [x] 连续动画 \n        -  [x] ~暂停动画~\n    -  [ ] ~精灵图~『小程序 所支持的drawImage功能太低级 所以取消』\n\n- [x] 矩阵变换\n- [x] 层级修改\n- [x] 事件\n    - [x] touchstart\n    - [x] touchmove \n    - [x] touchend\n    - [x] 拖拽事件\n    - [x] tap事件\n    - [x] longpress事件\n    - [ ] ~划入划出~「划入划出是鼠标的事件吧」    \n- [x] 取消事件绑定\n- [x] clone\n\n-\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobiscool%2Fwxdraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbobiscool%2Fwxdraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobiscool%2Fwxdraw/lists"}