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

实现小程序的思绪

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步上线。。。。通过拖拽、拼接
？？榻峁剐〕绦蛏坛且趁
，，，，所看即所得
，，，，只需要美工就能做出细腻商城。。。。更多小程序市肆请审查：小程序市肆