小程序怎么生成图片库


今天小编给大家分享一下小程序怎么生成图片库的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
这边说上几个小程序 Canvas 的坑:
1, Canvas 绘图是用的 px,而在小程序中我们一般使用 rpx 进行相对布局。
2,小程序的 drawCanvas 方法,在 IDE 中可以直接设置网络图片进行绘制,但在真机上设置网络图片无用。
3,canvasContext.clip 方法在 iOS 设备上 微信 6.6.6 版本及以下有 bug,会导致该 clip 下面使用的的 restore 方法失效。画家计划
想到小程序中有如此大量的生成图片需求,而 Canvas 生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片的库,而且还能屏蔽掉直接使用 Canvas 的那些坑呢。所以我们发起了 “画家计划— 通过 json 数据形式,来进行动态渲染并绘制出图片”。
首先,我们定义了一套绘图 JSON 规范,开发者可以根据需求构建生成图片的 Palette(调色板),然后在程序运行过程中把调色板传入给 Painter(画家)。Painter 会调用 Pen(画笔),根据 Palette 内容绘制出对应的图片后返回。运行例子
因该项目为 submodule 管理方式。首次 clone 代码时,需加上--recursive参数。
代码下载后,用小程序 IDE 打开后即可使用。
引入代码
可以在主项目下执行以下命令,通过 submodule 的方式引入 painter 组件。建议是在 components 目录下。
作为自定义组件引入,注意目录为第一步引入的代码所在目录
组件接收palette字段作为画图数据的数据源, 图案数据以json形式存在,推荐使用“皮肤模板”的方法进行传递,示例代码如下:
数据传入后,则会自动进行绘图。绘图完成后,你可以通过绑定 imgOK 或 onImgErr 事件来获得成功后的图片 或失败的原因。
如你使用 wxss + wxml 规范进行绘制一样,Painter 需要根据一定的规范来进行图片绘免费云主机域名制。当然 Painter 的绘制规范要比 wxml 简单很多。
一个调色板首先需要给予一些整体属性
当我们把整体的调色板属性构建起来后,里面就可以添加子 View 来进行绘制了。
以上 View ,除去自己拥有的特别属性外,还有以下的通用布局属性
1,目前 Painter 中支持两种尺寸单位,px 和 rpx,代表的意思和小程序中一致,此处就不多说。
2,目前子 view 的 css 属性支持 object 或 array。所以意味着,你可以把几个子 view 共用的 css 属性提取出来。做到让 Palette 更加简洁。
3,因为我们的 palette 是以 js 承载的 json,所以意味着你可以在每一个属性中很方便的加上自己的逻辑。也可以把某些属性单独提取出来,让多个 palette 共用,做到模块化。以上就是“小程序怎么生成图片库”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注百云主机行业资讯频道。

相关推荐: perl中如何批量创建不同的文件

这篇文章主要介绍perl中如何批量创建不同的文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!perl以上是“perl中如何批量创建不同的文件”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注百云主…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 10/14 08:31
下一篇 10/14 08:32

相关推荐