小程序九宫格心形拼图效果怎么办，微信九宫格心形拼图教程

最近，每个人都被九方格子的心脏所包围，这张照片由九张图片组成一个心形，那么如何使用微信小程序来实现这个九方心形图的效果呢？

实现小程序

的想法 1，有两个画布，一个小画布显示什么会结束，一个大画布用于最终拍摄截图，生成图像，保存到相册。

通过CSS的定位，将大画布移动到屏幕外部，让用户看到它。

如果用小画布保存图像，最终图像有点模糊。

2，画布可以看作9 * 9格，

这由一个名为heart的数组表示。

使用小网格拼出心形并根据数组内容在画布上渲染它。

小程序函数

这个小程序可以选择单个图片，选择多个图片，添加图片，保存图片，重置，推荐，反馈和几个功能。

选择一张图片

当用户点击心形区域时，他们可以选择单张图片，调用wx.chooseImage从本地相册中选择图片，然后在画布上绘制图片。图片的具体位置是用户点击的位置。

将touchend事件绑定在一个小画布上。触发事件后，事件中会有changedTouches属性。这是一组保存的接触点信息。此数组中的元素具有x和y属性，即touch。距画布左上角的距离。

//触摸x轴上的点的值var x=e.changedTouches [0] .x; //y轴上触摸点的值是var y=e.changedTouches [0] .y;复制代码

在具有x轴和y轴之间的距离之后，计算应该绘制哪个网格。

//网格表示网格的宽度//确定x轴位于前几个网格中x=Math.floor（x/grid）; //确定y轴在前几个网格中y=Math.floor（y/grid）;复制代码

知道绘制了哪个格子，有必要确定要绘制的图片的哪个部分，因为所有的正方形都是正方形，但是用户选择的图片不一定是正方形。如果它被压缩成方形，很难看到，所以当我绘制时，我选择了中间部分来绘制，

通过wx.getImageInfo获取图像信息，短边为正方形的宽度，然后从（长边 - 短边）/2处绘制。

//获取图像的宽度和高度var width=res.width; var height=res.height; //如果图像不是方形，只需绘制中间部分//sWidth以指示方形宽度s宽度=宽度＆gt;身高？ height: width; //sx是源图像的矩形选择框的左上角。 X坐标var sx=0; //sy是源图像的矩形选择框的左上角。 y坐标var sy=0; if（width＆gt; height）{sx=（width - height）/2;} if（width＆lt; height）{sy=（height - width）/2;}复制代码

知道要绘制什么，在哪里绘制，调用canvasContext.drawImage来绘制。

选择多张图片

选择多个图像也是对wx.chooseImage方法的调用。成功选择多个图像后，返回的对象具有tempFilePaths属性，该属性包含图像的本地文件路径列表。

然后遍历心脏阵列，心脏阵列是一个保存心形数据的阵列。如果数组中元素的值为1，即在心形的范围内，则按顺序从tempFilePaths中绘制图片，并绘制相同的如果它不是正方形，则仅绘制中间部分。

补充图片

在图像文件中，保存了几个图像以补充心形，并且它们的路径存储在一个数组中。

//补充心形图像的图像: ['././images/1.jpg'，'././images/2.jpg'，'././images/3。 jpg'，'././images/4.jpg'，'././images/5.jpg'，'././images/6.jpg'，'. /。/images/7.jpg'，'././images/8.jpg'，'././images/.jpg'，'././images10.jpg' ，]复制代码

然后是遍历心脏阵列。如果数组元素的值为1，则随机选择要绘制的一组图片。

绘制图片，绘制多张图片，添加图片，他们都在画布上绘制图片，以避免已经绘制的图片的位置被覆盖，他们绘制的图片的级别是不同的。

附加图片：1张多张图片：2张图片：3张复制码

高级别可以覆盖低级别，低级别不能覆盖高级别，同级别，除了绘制多个图片无法覆盖，其他两种情况都可以覆盖。

简单的含义是：添加图片，添加完成后，补充将覆盖原始补充，但用户选择的图片不会被覆盖。

绘制多张图片以覆盖添加的图片，但不会覆盖用户选择的图片。

画一幅画，无论这个位置是否有任何画面，你都会画出另一幅画。

保存图片

保存图像时，大画布按顺序截取，然后保存到图片中，主要由wx.canvasToTempFilePath API保存。此API可以导出当前画布的指定区域的内容，以生成指定大小的图片，并返回文件路径。

以下是一些需要注意的细节

1.为了避免上次保存的图像带有黑色背景，最好在开始时在画布上绘制与画布大小相同的矩形，并用颜色填充矩形。

2.为了保存图片，心形也可以保存在用户的相册中。需要按以下顺序保存图像

3. wx.canvasToTempFilePath中有两个可选参数destWidth和destHeight。这两个参数确定输出图像的宽度和高度。如果不准确，您可以使用默认值。

destWidth和destHeight单位是物理像素（像素），画布是用逻辑像素（物理像素=逻辑像素*密度）绘制的，所以如果你只使用画布中的宽度和高度（逻辑像素）作为长度输出图像如果宽，则生成的图像宽度和高度实际上会缩放到画布的1 /密度，因此看起来很模糊。

默认值为width * screen pixel density

文档中提到的屏幕像素密度不应该是指每英寸屏幕的像素数，而是指设备像素比（pixelRatio），即用于显示1px CSS像素的物理像素数。使用devicewx.getSystemInfo查看设备像素比率

wx.getSystemInfo（{success: function（res）{console.log（res.pixelRatio）}}）复制代码

如果我的理解是错误的，请也知道小伙伴指出。

话虽如此，主要的是说使用默认值实际上非常清楚。

4，因为要保存9张图片，所以需要一些时间，这次需要一个进度条，保存图片时，显示进度条，禁用保存按钮，毕竟点击按钮是9张图片，所以这个时间仍然是禁用嗯，每个图像进度条的值是+12。当它超过100时，表示保存了9张图片。

并且微信小程序也有一个进度条（进度）这个组件。

重置

此功能是遍历心脏阵列，使用颜色，根据阵列的内容，绘制心脏形状。然后在x轴和y轴上绘制两条线，使其看起来像九方形网格。

推荐并反馈给朋友反馈复制代码

这两个函数都是使用的，微信小程序按钮组件，这里需要注意，在clear按钮的默认样式中，需要删除伪元素后按钮的边框。

按钮:在{border: 0;可以优化复制代码

有些地方小程序正在为用户做出选择。例如，如果所选图像不是正方形，则绘制中间部分，但中间部分不一定是用户想要的，并且如果每个图片是由用户自己选择的，则绘画的哪个部分，总共81张图片，显然有点麻烦，你可以在这里继续优化。

另外，在添加图片时，补充图片不一定是用户喜欢的，因此该部分将考虑是否可以添加一些标签。用户选择不同的标签来补充与标签匹配的图片，类似于QQ音乐歌词海报。这样。

Hvihi.com小程序工具开发公司沈阳汇海，是一家拥有十年技术前沿的公司。我们以先进的技术，简单的操作，支持各种社区营销活动，提供和解决各行业的小程序开发，并提供全面的营销体系。并且可视化模板操作，大大降低了人力和物力成本。

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

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

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