小程序生成图像库实现

由于我们不能直接与朋友圈分享小程序，但是分享给朋友圈的需求仍然很多，业界目前的做法是使用小程序的Canvas功能生成带有QR的图片代码，然后引导用户将图片下载到本地然后分享给你的朋友圈。 小程序 Canvas函数很难使用，而且为了绘制一个简单的图片，你必须编写一堆样板代码。如果此时小程序包含多个绘图要求，那么悬崖就会变得疯狂。另外，Canvas上有很多绘图坑，肯定会让你发疯。

以下是小程序画布的几个坑：

1，Canvas绘图是px，而在小程序中我们通常使用rpx进行相对布局。

2,小程序 drawCanvas方法，可以直接设置网络图像在IDE中绘制，但在真机上设置网络图像是没用的。

3，iOS设备微信上的canvasContext.clip方法6.6.6及以下版本都有bug，这会导致剪辑中使用的还原方法无效。

画家计划

我认为在小程序中有如此多的生成图像需求，而Canvas生成方法是如此困难和有效。然后我们考虑是否可以创建一个可以轻松生成图像的库，还可以阻止那些直接使用Canvas的坑。所以我们推出了“画家项目 - 通过json数据表格进行动态渲染和绘制图像”。

首先，我们定义一组绘图JSON规范。开发人员可以构建一个Palette，根据需要生成图像，然后在程序运行时将调色板传递给Painter。 Painter将调用Pen并根据Palette内容返回它。

How To Use运行例子

因为该项目是一个子模块管理方法。第一次克隆代码时，需要添加--recursive参数。

Git clonehttps://github.com/Kujiale-Mobile/Painter.git --recursive

下载代码后，可以在使用小程序 IDE打开代码后使用它。

使用 Painter

介绍代码

您可以在主项目下执行以下命令，以通过子模块引入painter组件。建议位于组件目录中。

Git子模块添加https://github.com/Kujiale-Mobile/PainterCore.git painter

作为自定义组件引入，请注意该目录是第一步中引入代码的目录

'usingComponents': {'painter':'/components/painter/painter'}

组件接收调色板字段作为绘图数据的数据源。模式数据以json的形式存在。建议使用“皮肤模板”的方法进行交付。示例代码如下：

传入数据后，将自动绘制数据。绘图完成后，您可以通过绑定imgOK或onImgErr事件来获取成功后的图片或失败的原因。

绑定: imgOK='onImgOK'bind: imgErr='onImgErr'

Palette 规范

当您使用wxss + wxml规范进行绘制时，Painter需要根据特定规范绘制图像。当然，Painter的绘图规范比wxml简单得多。

调色板属性

调色板首先需要提供一些整体属性

背景:可以是颜色值或到网络图像的链接。默认为白色宽度:宽度高度:高度borderRadius:边框圆角（此属性也适用于子视图）视图:在载体视图内

子 View 属性

当我们构建整体调色板属性时，我们可以添加子视图来绘制它们。

Typecontentdescription自己的cssimageurl表示图像资源的地址，本地或网络文本文本的内容textSize:文本大小，颜色:字体颜色（默认为黑色）矩形无矩形颜色:颜色qrcodecontent绘制QR码背景:背景颜色（默认是透明的颜色），

布局属性

除了您拥有的特殊属性外，上述视图还具有以下常规布局属性

属性意思是旋转，根据顺时针旋转的程度，默认不旋转borderRadius边界圆角度，如果是方形布局，属性是半宽或高，那么圆顶，右，底，左等作为css绝对布局效果，默认顶部和左侧为0

尺寸即其他

1，目前Painter，px和rpx支持两种类型的单位，这意味着与小程序相同，所以我在这里不多说。

2，子视图的当前css属性支持对象或数组。这意味着您可以提取由多个子视图共享的css属性。使调色板更简洁。

3，因为我们的调色板是由js托管的json，所以你可以在每个属性中轻松添加自己的逻辑。还可以单独提取某些属性，共享多个调色板，并且是模块化的。

举个栗子{ background: '#eee', width: '654rpx', height: '400rpx', borderRadius: '20rpx', views: [ { type: 'image', url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q', css: { top: '48rpx', right: '48rpx', width: '192rpx', height: '192rpx', }, } ],}

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。有关更多小程序商店，请参阅：小程序商店

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。