- wxDraw--全面的小程序的Canvas动画库(支持事件,动画)
wxDraw.js--小程序的Canvas动画库正式发布 [图片] wxDraw轻量的小程序canvas动画库 github 是什么canvas 是HTML5的一个重要元素,它能够高效的绘制图形,但是过于底层,且粗糙的Api,导致开发者很难使用它来做较为复杂的图形, 而且它的即时绘制无记忆特性,使得它内部的图形并不支持动画更不支持一切交互事件。 这样的问题出现在所有支持canvas的客户端上同样出现在 微信小程序中的canvas中, 由于小程序由jscore支持,并没有window对象,并且canvas的Api与标准的canvas的Api有所出入,所以市面上绝大部分canvas库与它无缘。 而wxDraw也就应运而生,专门用于处理小程序上canvas的图形创建、图形动画以及交互问题的。 特性简单 不需要你会canvas,会用jQuery就会使用wxDraw。 灵活 所有图形,随时随地都可以进行属性修改、图形添加以及图形销毁。 事件支持 小程序支持的事件只要是合理的都支持。 缓动动画支持 wxDraw支持链式调用动画『就像jQuery的animate一样』,并且支持几乎所有的缓动函数 图形创建 支持图形这些图形都可以在演示文件里看到 点这里 rect[代码] var rect = new Shape('rect', {x: 60, y: 60, w: 40, h: 40, fillStyle: "#2FB8AC", rotate: Math.PI/2 },'mix', true);[代码] [图片]rect circle[代码] let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4, fillStyle: "#C0D860", strokeStyle: "#CC333F", rotate: 20, lineWidth: 0, needGra: 'line', gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]}, 'fill', true)[代码] [图片] polygon[代码]let polygon = new Shape('polygon', { x: 200, y: 200, r: 40, sides: 9, //9边形 fillStyle: "#FC354C", rotate: Math.PI / 4 }, 'mix', true)[代码] [图片] ellipse[代码] let ellipse = new Shape('ellipse', { x: 200, y: 200, a: 40, b: 100, fillStyle: "#00A0B0", rotate: Math.PI / 7 }, 'mix', true)[代码] [图片] cshape 「自定义图形」[代码] let cshape = new Shape('cshape', { rotate: Math.PI / 2, points: [[70, 85], [40, 20], [24, 46], [2, 4], [14, 6], [4, 46]], lineWidth: 5, fillStyle: "#00A0B0", rotate: Math.PI / 7, needGra: 'circle', smooth:false, gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']] }, 'fill', true)[代码] [图片] line[代码]let line = new Shape('line', { points:[[240,373],[11,32],[28,423],[12,105],[203,41],[128,0.06]], strokeStyle: "#2FB8AC",lineWidth:1, rotate: 0, needShadow: true,smooth:false }, 'fill', true)[代码] [图片] text[代码] let text = new Shape('text', { x: 200, y: 200, text: "我是测试文字", fillStyle: "#E6781E", rotate: Math.PI / 3} 'fill', true)[代码] [图片] wxDraw创作的动画演示这些动画都可以在演示文件里看到 点这里 Google [图片] 贪吃蛇 [图片] logo演绎 rect舞蹈 [图片] 吃豆人 [图片] wxDraw事件这些事件都可以在演示文件里看到 点这里 支持 tap touchStart touchEnd touchMove longPress drag「自定义的事件」 事件演示旁边UI小妹妹亲自示范 😜 第一视角 [图片] 是不是特别简单,特别方便!!! 来,老铁们!star 走一波!!! 详细文档还请关注github
2017-11-02 - 3D环物展示
小程序模拟3D环物展示效果 这是今年过年时正月初九制作,每年正月十一、十五、十六是我们揭阳的特色民俗,行头桥摸石狮。 那天正好有朋友回深圳,就做了这个小程序让其摸摸。 后来微信插件出来了,就在五月份整理成插件方便使用 [图片] [图片] [图片]
2019-03-01 - 爸妈搜海报Maker
使用方法1、 在微信小程序管理后台——设置——第三方服务,按 AppID(wxbf07f0f22c6c200d)搜索到该插件并申请授权(ps:一般不会出现拒绝的情况。如果申请被拒绝了,请重新申请,有时候管理员手抽点错了,请见谅)。 2、在要使用该插件的小程序 app.json 文件中引入插件声明。 [代码]"plugins": { "calendar": { "version": "1.0.0", "provider": "wxbf07f0f22c6c200d" } }[代码]3、在需要使用到该插件的小程序页面的 JSON 配置文件中,做以下配置: [代码]{ "usingComponents": { "calendar": "plugin://poster/poster" } }[代码]4、在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。 [代码]<poster />[代码]属性[代码]属性名[代码][代码]类型[代码][代码]默认值[代码][代码]说明[代码][代码]drawing[代码][代码]Array[代码][代码][][代码][代码]画图的数据[代码][代码]savebtnText[代码][代码]String[代码][代码]"点击按钮进行图片保存"[代码][代码]按钮文字信息[代码][代码]drawing参数说明[代码][代码]drawing[代码]数据目前有两种数据信息,一种是图片信息,另一种是文字信息。 [代码]图片信息[代码][代码]属性名[代码][代码]类型[代码][代码]值[代码][代码]说明[代码][代码]type[代码][代码]String[代码][代码]image[代码][代码]图片类型[代码][代码]url[代码][代码]String[代码] [代码]图片路径,为线上图片[代码][代码]left[代码][代码]Number[代码] [代码]距离画布的左边距[代码][代码]top[代码][代码]Number[代码] [代码]距离画布的顶部距离[代码][代码]width[代码][代码]Number[代码] [代码]绘画图片的宽度[代码][代码]height[代码][代码]Number[代码] [代码]绘画图片的高度[代码][代码]circle[代码][代码]Boolean[代码][代码]true、false[代码][代码]是否是绘制圆形,默认为false[代码]文字信息[代码]属性名[代码][代码]类型[代码][代码]值[代码][代码]说明[代码][代码]type[代码][代码]String[代码][代码]text[代码][代码]文字类型[代码][代码]content[代码][代码]String[代码] [代码]绘图的文字内容[代码][代码]left[代码][代码]Number[代码] [代码]距离画布的左边距[代码][代码]top[代码][代码]Number[代码] [代码]距离画布的顶部距离[代码][代码]width[代码][代码]Number[代码] [代码]文字绘画的宽度[代码][代码]color[代码][代码]String[代码] [代码]文字信息[代码][代码]textAlign[代码][代码]String[代码] [代码]文字水平对齐方式[代码][代码]fontSize[代码][代码]Number[代码][代码]默认为26rpx[代码][代码]文字大小[代码][代码]textAlign参数[代码][代码]属性名[代码][代码]类型[代码][代码]说明[代码][代码]left[代码][代码]String[代码][代码]左对齐[代码][代码]center[代码][代码]String[代码][代码]居中对齐[代码][代码]right[代码][代码]String[代码][代码]右对齐[代码]如图: [图片] 实例: [代码]data:{ data: { drawing: [ { type: 'image', url: '此处是线上图片', left: 0, top: 0, width: 650, height: 950 }, { type: 'text', content: '此处是文本信息', fontSize: 26, color: 'white', textAlign: 'left', left: 170, top: 50, width: 650, } ], }[代码]样式类名说明[代码]canvas-style[代码][代码]画布样式样式[代码][代码]savebtn-style[代码][代码]按钮样式[代码][代码]/* 画布样式 */ .canvas-style{ width: 650rpx !important; height: 950rpx !important; margin: 0 auto; border: 1px solid orangered; margin-top: 10rpx; }[代码][代码]<poster drawing='{{drawing}}' savebtnText='{{savebtnText}}' canvas-style='canvas-style' savebtn-style='savebtn-style' />[代码]注意: 样式的优先级! 效果[图片] 联系方式[图片]
2018-10-30