一、程序简介:
本程序主要是用户1通过在相机上涂鸦来描绘物体的轮廓。然后,用户2根据轮廓寻找物体。如果成功则返回正确,否则返回继续努力。(具体开发流程和功能见微信小程序应用开发计划表。)
二、开发平台
微信开发者工具V1.02.1803210
三、进展
目前小程序的截图功能已经实现。后台识别也已经实现,同时正在完善数据库。
四、思路
想法一:
通过定位API获取用户位置,加上重力加速度或者罗盘来模拟实现。但想法一在实现的时候遇到如下问题被舍弃:
1)获取位置时使伍哪用误差不确定。(获取五次位置的平均值误差依然无法确定)
2)如果物体进行移动或同类物体无法识别。
想法二:
通过截取前后两个场景中包围轨迹的最大矩形,传输到后端进行识别。最后由后台返回结果
截屏实现大致过程:记录下用户的最大最小X、Y坐标->调用相机组件的takePhoto控件—>调用画布组件drawImage绘制图像到画布->根据最大最小X、Y坐标调用画布的canvasToTempFilePath导出图像。
遇到问题以及解决方案:
1. 在调用小程序的位置API时,发现获取5次平均值是0
原因:小程序的API有些是多线程的,因此在API后面的语句不一定后执行。
2. 画板无法覆盖到相机组件上:
原因:相机组件是源生组件,在上面只能覆盖cover-view和cover-image组件。
解决方法:画板也为源生组件,虽然按理来说可以覆盖。但是在页面首次加载中,相机会在画板的上面。第二次加载时,画布才可以覆盖到相机组建上面。因此,在开始界面调用一次相机,在第二界面就可以在上面覆盖画布了。
3. 在画布码橘橘上调用drawImage绘制照片的部分图像时有问题。
原因:没找到
解决方案:将整张图绘制到画布中进行部分截取,这个在IOS系统中是可以的。在Android系统有问题。
4. 画布中导出图像中没有darwImage在画布上绘制的图。
原因:drawImage绘图需要时间。
解决方案:设置一个两秒的定时器。
5. 截图功能在安卓上可以运行,在IOS上无法点击
原因:微信在两个平台上采用的是不同的运行环境。在安卓上cover控件在画板上面,IOS中cover控件在画板下面。
解决方案:在相机控件的下方添加控件,同时调用drawImage时画板坐标乘上一个比例。(其画板坐标单位是像素)
6. 在API内用this指针发现无法给Page中数据赋值
原因:在部分API中,this指针可能不指向页面实例。
解决方法:先用that把this指针的值保存迟团起来,在API内部用that。
7. 在函数中给page中的字符串和对象赋值时跳出函数范围,其值变为空
原因:这应该和程序执行的内存机制有关
解决方法:在给变量申请一个空间,如 str:new string()。之后赋值时问题便会解决。
8. 画板的drawImage绘制图形问题
原因:经过测试drawImage中的单位确实是像素。不过手机的像素为360*560,照片的像素却为720*1136。
解决方案:无
9. 程序的涂鸦和识别分为两个窗口后。识别窗口会显示轨迹,但背景却是黑色。
原因:不明
解决方案:在识别窗口第一次调用drawImage时,现调用一下clearfill()清空画布。
10. 记录轨迹
原因:前期我们是用点来描述用户的轨迹的,具体见边框绘制。但这样绘制出的点我们感觉贴的图不美观,之后想要改为用户自己绘制的轨迹
解决方案:在用户点击完成后先把用户的轨迹导入成一张透明图片,传入识别界面。然后贴在画板上。
描述:在页面加载是使用canvas.drawImage画图,点击页面下面按钮在已绘制好的图形上继续画图。使用ctx.draw()弄了多次,均会把之前的图清掉橡嫌圆重新绘制,看文档得知,在ctx.draw()时,传入参数true即可保存原来绘制的图,在此记录梁塌一下。详见如者孙下:
canvas使用:
index.wxml中
js中
1、首先,在微信小程序中,可以使用wx.createCanvasContext()函数来创建一衫晌友个画布,用于谨或绘制打印模板。2、然后,可以使用CanvasContext.fillText()函数来绘制文本,CanvasContext.fillRect()函数来绘制矩形,CanvasContext.drawImage()函数来绘制图片等。
3、最后,或槐可以使用CanvasContext.draw()函数来将绘制的内容渲染到画布上,并使用wx.canvasToTempFilePath()函数将画布转换为图片,以便打印。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)