最近朋侪圈各人是不是被九宫格心形图所刷屏，，，，，这种图片是用九张图片拼成一个心形而成，，，，，那么怎样用微信小程序实现这种九宫格心形图的效果？？？？？？

实现小程序的思绪

1、有两个 canvas，，，，，一个小的 canvas 显示最后会是什么样子，，，，，一个大的 canvas 用来最后举行截图，，，，，天生图片，，，，，生涯到相册。。。。
。。

通过CSS的定位，，，，，把大的 canvas 移到屏幕外面不让用户看到就可以了。。。。
。。

而若是用小的canvas 生涯图片的话，，，，，最后的图片有些模糊。。。。
。。

2、canvas 可以看成一个 9 * 9 的网格，，，，，

用一个叫 heart 的数组来体现就是这样的。。。。
。。

用其中的小格子，，，，，来拼出心形，，，，，凭证数组的内容在 canvas 上举行渲染。。。。
。。

小程序的功效

这个小程序有 选择单张图片，，，，，选择多张图片，，，，，增补图片，，，，，生涯图片，，，，，重置，，，，，推荐，，，，，意见反。。。。
。。，，，，这几个功效。。。。
。。

选择单张图片

当用户点击心形区域的时间，，，，，就可以选择单张图片，，，，，挪用wx.chooseImage 就可以从外地相册选择图片，，，，，然后就把这张图，，，，，画在 canvas上，，，，，详细画的位置就是用户点击的位置。。。。
。。

在小的 canvas上绑定touchend 事务，，，，，触发事务后，，，，，事务中有一个changedTouches 属性，，，，，这是一个生涯了，，，，，目今转变的触摸点信息的数组，，，，，这个数组中的元素有 x 和 y 属性，，，，，也就是触摸点距离 canvas 左上角的距离。。。。
。。

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

有 x 轴 和 y 轴的距离后，，，，，算出详细应该画在哪个格子上。。。。
。。

//grid 体现一个格子的宽度

// 确定 x 轴是在第几个格子
x = Math.floor(x / grid);

// 确定 y 轴是在第几个格子
y = Math.floor(y / grid);
复制代码

知道在哪个格子画之后，，，，，就要确定绘图片的哪部分了，，，，，由于所有的格子都是正方形的，，，，，可是用户选择的图片纷歧定是正方形，，，，，若是压缩成正方形会很难看，，，，，以是我画的时间，，，，，选择了正中心的部分来画，，，，，

通过wx.getImageInfo 来获取图片信息，，，，，以短边为正方形的宽，，，，，然后从 （长边 - 短边）/2 的地方来画。。。。
。。

// 获取图片的宽和高
var width = res.width;
var height = res.height;

//  若是图片不是正方形，，，，，只画中心的部分
// sWidth 体现正方形的宽
var sWidth = width > height ? height : width;
// sx 是源图像的矩形选择框的左上角 X 坐标
var sx = 0;
// sy 是源图像的矩形选择框的左上角 y 坐标
var sy = 0;
if (width > height) {
	sx = (width - height) / 2;
}
if (width < height) {
	sy = (height - width) / 2;
}
复制代码

知道画什么，，，，，在那里画之后，，，，，挪用 canvasContext.drawImage 来画就可以了。。。。
。。

选择多张图片

选择多张图片，，，，，同样是挪用wx.chooseImage 要领，，，，，乐成选择多张图片后，，，，，返回的工具中有一个tempFilePaths 属性，，，，，这个属性生涯了，，，，，图片的外地文件路径列表。。。。
。。

然后遍历 heart 数组，，，，，也就是生居心形数据的数组，，，，，若是数组中某个元素的值是1，，，，，也就是说在心形规模内，，，，，就按顺序从 tempFilePaths 中取一张图片画上去，，，，，画的时间同样的，，，，，若是不是正方形就只画中心的部分。。。。
。。

增补图片

在 image 的文件中，，，，，有生涯几张图片，，，，，用来增补心形，，，，，他们的路径生涯在一个数组中。。。。
。。

// 用来增补心形的图片
 images: [
   '../../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/9.jpg',
   '../../images/10.jpg',
 ]
复制代码

然后就是遍历 heart 数组，，，，，若是数组的某个元素的值是1，，，，，就随机从这组图片中选择一张画上去。。。。
。。

画一张图片，，，，，画多张图片，，，，，增补图片，，，，，他们都是在 canvas 上绘图片，，，，，为了阻止已经画了图片的位置被笼罩，，，，，他们所画的图片的品级是差别的。。。。
。。

增补图片：1
画多张图片：2
画一张图片：3
复制代码

品级高的可以笼罩品级低的，，，，，品级低的不可笼罩品级高的，，，，，同品级的，，，，，除了画多张图片的不可笼罩，，，，，其余的两种情形，，，，，都可以笼罩。。。。
。。

简朴意思就是： 增补图片，，，，，增补完了之后，，，，，再增补会把原来增补的笼罩掉，，，，，可是用户选择的图片不会被笼罩掉。。。。
。。

画多张图片，，，，，可以笼罩掉增补的图片，，，，，但用户选择的图片也不会笼罩掉。。。。
。。

画一张图片，，，，，不管这个位置有没有图片，，，，，都会再画一张。。。。
。。

生涯图片

生涯图片的时间，，，，，就是按顺序对大的 canvas 举行截。。。。
。。，，，，然后生涯成图片，，，，，主要靠 wx.canvasToTempFilePath 这个API来实现，，，，，这个 API ，，，，，可以把目今画布指定区域的内容导出天生指定巨细的图片，，，，，并返回文件路径。。。。
。。

这里要注重几个细节

1、为了阻止最后生涯的图片有玄色配景，，，，，最好最先的时间就在 canvas 上画一个 和 canvas 巨细一样的矩形，，，，，矩形填充上颜色。。。。
。。

2、为了生涯的图片，，，，，在用户的相册中也能坚持心形。。。。
。。需要按下面这个顺序来生涯图片

3、 wx.canvasToTempFilePath 中有两个选填的参数 destWidth 和 destHeight，，，，，这个两个参数决议 输出图片宽度和高度，，，，，若是不是准确的知道是几多，，，，，用默认值就可以。。。。
。。

destWidth 和 destHeight 单位是物理像素（pixel），，，，，canvas 绘制的时间用的是逻辑像素（物理像素=逻辑像素 * density），，，，，以是这里若是只是使用 canvas 中的 width 和 height（逻辑像素）作为输出图片的长宽的话，，，，，天生的图片 width 和 height 现实上是缩放了到 canvas 的 1 / density 巨细了，，，，，以是就显得较量模糊了。。。。
。。

而默认值是 width * 屏幕像素密度

文档中提到的屏幕像素密度，，，，，应该不是指每英寸屏幕所拥有的像素数，，，，，而是指装备像素比（pixelRatio），，，，，也就是用几多个物理像素去显示 1px 的 CSS 像素。。。。
。。 用APIwx.getSystemInfo 可以审查装备像素比

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

这里若是我的明确有误，，，，，还请知道的小同伴指出。。。。
。。

说了这么多，，，，，主要就是想说用默认的值着实就已经很清晰了。。。。
。。

4、由于要生涯9张图片，，，，，以是需要一些时间，，，，，这个时间就需要一个进度条了，，，，，生涯图片的时间，，，，，显示进度条，，，，，禁用生涯按钮，，，，，事实点击一下按钮就是9张图片，，，，，以是这个时间照旧禁用了好，，，，，每生涯一张图片进度条的值就 +12 ，，，，，凌驾100的时间，，，，，就体现 9张图片都生涯好了。。。。
。。

而微信小程序中也恰恰有 进度条（progress）这个组件 。。。。
。。

重置

这个功效就是遍历 heart 数组，，，，，用一种颜色，，，，，凭证数组内容，，，，，把心形画出来。。。。
。。然后再在 x 轴 和 y 轴上画两条线，，，，，行成九宫格的样子。。。。
。。

推荐 和 意见反馈

<button open-type='share'>推荐给朋侪</button>
 <button open-type='feedback'>意见反馈
复制代码

这个两个功效就是用了，，，，，微信小程序的button 组件，，，，，这里需要注重的就是，，，，，在扫除 button 的默认样式时，，，，，需要把 button 的 after 伪元素的边框也去掉。。。。
。。

button::after{
  border: 0; 
}
复制代码

可以优化的地方

有一些地方是小程序在替用户做选择，，，，，好比，，，，，若是所选择的图片不是正方形，，，，，就画中心的部分，，，，，可是中心的部分纷歧定是用户想要的，，，，，而若是每张图片都要用户自己来选择画哪部分，，，，，一共81张图片，，，，，显然是有些贫困了，，，，，这里还可以继续优化下。。。。
。。

尚有在增补图片的时间，，，，，增补的图片也纷歧定是用户喜欢的，，，，，以是这部分再思量是不是可以加一些标签，，，，，用户选择差别的标签，，，，，来增补切合标签的图片，，，，，类似 QQ音乐的歌词海报这样。。。。
。。

小程序工具开发公司长沙，，，，，是一家有着十年手艺前沿的公司，，，，，我们以先进手艺提供并解决各行业小程序开发，，，，，操作简朴，，，，，支持多种社群营销活动，，，，，提供一套综合性的营销系统。。。。
。。以及可视化模板操作，，，，，大大镌汰人力物力本钱。。。。
。。

小程序工具提供多类型商城/门店小程序制作，，，，，可视化编辑 1秒天生5步上线。。。。
。。通过拖拽、拼接？？？？？？榻峁剐〕绦蛏坛且趁妫，，，，所看即所得，，，，，只需要美工就能做出细腻商城。。。。
。。更多小程序市肆请审查：小程序市肆