1.两个Canvas的运用
搞这九宫格爱心拼图，需要两个Canvas，其中一个小Canvas是用来展示完成后的美丽拼图，而另一个大Canvas则专门负责把截图存到手机相册去。运用CSS的定位小技巧，我们能把大Canvas巧妙地藏起来，不让用户看得到，这样既显得咱们专业范儿十足，也方便了用户屏幕上查看和亲手保存，那感觉别提多舒服了！
记住，画得清楚最重要！一般的做法是，小图片放在小canvas里可能会变模糊，所以建议你找个大点的canvas截图，这样画质更好，用着也舒心。
2.实现心形拼图功能
搞定心形拼图，关键就是用小方块拼出爱心形状。只要搞清楚预先设定好的数据放在canvas里怎么显示，每块格子画啥心里自然有数了。这样就能确保最后做好的拼图和预想的分毫不差。
嘞你的小程序里现在有图片！你可以自己挑选，一次性多弄几张，还能拍新的替换掉原来的，或者直接保存，也可以重新来过，还能看看别人喜欢啥样的，跟他们互动评论唠嗑呀。记住，那颗小爱心就是你择图的捷径！
3.图片位置计算与绘制
点击爱心形状分区后，得靠触摸屏幕边缘的“touchend”事件获取屏幕触碰的坐标（x,y）信息，只要知道你点击的位置就行！然后根据这个点的坐标，就能判断应该在哪个小格子中画什么图案。
处理图片大小可没那么简单咱们一般就取中间那一块来显示。这样的话，就算图片被压缩或者变形，也能保持原样好看哒~记得先用wx.getImageInfo这个方法了解图片信息，然后根据最小边长就能计算出正方形的宽，然后才能顺利地开始作图~
4.多张图片绘制与覆盖
做多图拼接时注意下不同图片层次覆盖的问题哟。一般来说，高位图可以遮挡或修复底图，但是别乱动用户挑好的图~
搞好了不同级别之间的搭配，就真的可以把好多照片处理得清清楚楚了！这样不但可以按我们自己喜欢的方式拼接图片，还能让整体效果看上去更美。
5.图片保存与进度条显示
// 触摸点在 x 轴的值 var x = e.changedTouches[0].x; // 触摸点在 y 轴的值 var y = e.changedTouches[0].y;
存照片时别忘了，先把屏幕截个屏，再用wx.canvasToTempFilePath这个程序来定制大小和清晰度的图像，最后存在手机相册里面就好。记住别最后保存出来是黑乎乎一片，记得在画布上调色做块背景呢~
当你在保存照片时，别忘了看时间和体验！那咋办？可以弄个进度条，随时知道自己在保存哪个照片，防止重复操作。每次成功保存一张就给进度条加点分，等全完成了再回复原样。
6.输出图片清晰度优化
//grid 表示一个格子的宽度 // 确定 x 轴是在第几个格子 x = Math.floor(x / grid); // 确定 y 轴是在第几个格子 y = Math.floor(y / grid);
用wx.canvasToTempFilePath这个大招儿时，别忘了还有两个参数，destWidth和destHeight。如果不确定要怎么设，那就直接用默认，放心，它肯定能帮你搞定一张清晰且合适大小的图片出来！
记住destWidth和destHeight就等于我们平常说的物理像素（像素）~不过画图的时候可得换成逻辑像素（就是物理像素乘以密度）。所以说计算输出大小时别忘了加个缩放倍数进去，这样才能确保图像清晰可见~
7.用户体验与功能完善
别只看app基本功能，让大家用得爽也是关键。比如九宫格心形拼图APP里加个进度条、去掉多余的按钮、温馨提示等等，这样用着才顺手！
// 获取图片的宽和高
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 知道画什么，在哪里画之后，调用 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',
]
真的，加点好玩的功能或者角色，这样能吸引更多人多用会儿。比如说搞分享啊、在线编辑啥的，应用就更有意思了。这么让大伙儿真心喜欢用它呗~
8.技术实现与优化
补充图片：1
画多张图片：2
画一张图片：3
当你发现你的Canvas九宫格心形拼图软件反应迟缓或者效果不咋滴时，别怕，这是因为你在处理过程中可能搞砸了点什么。不过不用担心，咱们可以利用一些简单的技巧来解决这个问题。比如，减少对无需渲染内容的重复使用；巧妙利用缓存功能以提升速度；还可以尝试使用异步加载文件的方式，让软件跑得更快更流畅~
码工，得讲究点格式，大布局得清爽才好。这样以后再维护、添功能啥的也方便。我们可以把代码按块切割，写上注释，逐步改善，这样就能加快开发进程，提高代码质量！
9.持续改进与反馈机制
最后，可不能忘记在软件上线后，多听听大家怎么说依据大家的建议去改进和提升软件的功能及体验感就对了。只要搭好反馈系统，我们就能更明白大家想要啥，快速把产品做得更好，提高自己的竞争力
啦啦！我们要用Canvas做出好酷炫滴九宫格爱心拼图，质量上乘，深受大众喜爱，还能帮到你！
。
评论0