找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 微信小程序快速绘画工具

[复制链接]
查看: 849|回复: 228
最佳答案
0 

8

主题

8

帖子

180

积分

新人求带

积分
180
项目使用样式表来绘制 canvas,利用 wxss 下 rpx 单位实现适配,既能保证开发效率,同时也没有学习成本。

组件实现了 css 基本盒子模型,涵盖宽高、背景、字体、边框、内边距等,支持 自适应宽高、文本换行、圆角边框、背景渐变、背景重复 等好玩功能,感兴趣的可以了解下。

绘制葡京赌场网站没有与组件抽离,有兴趣的同学可以试试抽离去适配多终端玩玩。

组件提供 behaviors.element 和 behaviors.wxappCanvasBehavior 两个 behavior,一个代表节点一个代表容器,任何自定义节点均需像上文例子一样集成 behaviors。

自定义组件还需配置外部样式类,以保证对外规格的统一。

自定义组件有两个必需的方法:render 和 preload:

render:接收 canvas 上下文,执行自定义绘画动作
preload: 资源预加载,接收容器 boundingClientRect 及适配工具脚本,该方法必须调用 _preload 解析样式方法及返回 Promise 函数。

demo.gif

wxapp-canvas-master.zip (341.76 KB, 下载次数: 10)
回复

使用道具 举报

最佳答案
0 

4

主题

966

帖子

4502

积分

专家路上

积分
4502
发表于 2019-3-12 16:43:08 | 显示全部楼层
利用 wxss 下 rpx 单位实现适配
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

59

帖子

238

积分

新人求带

积分
238
发表于 2019-3-12 18:30:11 | 显示全部楼层
RE: 微信小程序快速绘画工具 [修改]
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

59

帖子

238

积分

新人求带

积分
238
发表于 2019-3-12 18:30:35 | 显示全部楼层
RE: 微信小程序快速绘画工具 [修改]
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

59

帖子

238

积分

新人求带

积分
238
发表于 2019-3-12 18:30:49 | 显示全部楼层
RE: 微信小程序快速绘画工具 [修改]
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

59

帖子

238

积分

新人求带

积分
238
发表于 2019-3-12 18:31:09 | 显示全部楼层
RE: 微信小程序快速绘画工具 [修改]
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

70

帖子

336

积分

新人求带

积分
336
发表于 2019-3-13 07:43:34 | 显示全部楼层

RE: 微信小程序快速绘画工具 [修改]
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

70

帖子

336

积分

新人求带

积分
336
发表于 2019-3-13 07:43:39 | 显示全部楼层

RE: 微信小程序快速绘画工具 [修改]
回复 支持 反对

使用道具 举报

最佳答案
0 

4

主题

966

帖子

4502

积分

专家路上

积分
4502
发表于 2019-3-13 10:55:40 | 显示全部楼层
涵盖宽高、背景、字体、边框
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

23

帖子

82

积分

等待验证会员

积分
82
发表于 2019-3-13 16:08:29 | 显示全部楼层
方便使用
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]