前言
找图找色是制作脚本的基础，现在的手机分辨率五花八门，再加上水滴屏、全面屏等的存在，找图适配相当麻烦。这里给出一套解决分辨率适配的方案。
步骤
适配流程.png
获取正确的设备分辨率
auto.pro可以获取到设备分辨率，并且可以指定分辨率进行截图。但是它获取到的分辨率在游戏横屏时并不会改变。
举个例子，720x1280分辨率的设备，在玩游戏的时候横屏，此时获取到的分辨率依然是720x1280，并不是1280x720，因此在截图之前我们需要做处理。
方法也很简单：大值为宽，小值为高。
var width = Math.max(device.width, device.height)
var height = Math.min(device.width, device.height)
log('device:', width, height)
截图
根据上一步得到的分辨率值进行截图
threads.start(function () {
if(!requestScreenCapture(width, height)){
toast("请求截图失败");
exit();
}
}
获取分辨率缩放值
假设我们基于1280x720分辨率整理出一套待查图片，在1920x1080下它的匹配度是会降低的，很可能找图失败，因此应该先计算缩放值
var scaleWidth = width / 1280
var scaleHeight = height / 720
var scale = Math.min(scaleWidth, scaleHeight)
为何这里需要取缩放值的最小值？因为市面上存在宽屏手机，虽然1920x1080是标准比例，但是可能出现2560x1080这类宽高缩放比不一致的屏幕，这种情况下界面元素的缩放是按照1920x1080进行的，也就是按scaleHeight这个最小值进行缩放
匹配时进行缩放处理
我们整理的图片资源是1280x720的，因此在1920x1080设备上，要把截图缩小；如果是小的分辨率设备，就要把图片资源进行缩小。
这里存在两个细节:
- 把
1920x1080的截图缩小成1280x720后，匹配得到的坐标是相对于后者的，按此坐标进行点击会发生错位，所以还要把匹配结果放大到1920x1080分辨率上 - option如果设置了region的话，region的值也需要进行缩放处理
封装一个找图函数
// img1是系统截图，img2是待查图片
function hasImg(img1, img2, option={}) {
if (!img1 || !img2) {
return null
}
// 如果分辨率大于基准值，对设备截图进行缩小
if (scale > 1) {
img1 = images.scale(img1, 1/scale, 1/scale)
} else if (scale < 1) {
// 如果分辨率小于基准值，对图片资源进行缩小
img2 = images.scale(img2, scale, scale)
}
// 获取查找参数
var queryOption = { ...option }
if (queryOption.region) {
var region = queryOption.region
// 进行越界处理
if (region[0] < 0) {
region[0] = 0
}
if (region[1] < 0) {
region[1] = 0
}
if (region.length == 4) {
var w = region[0] + region[2]
var h = region[1] + region[3]
if (w > width) {
region[2] = width - region[0]
}
if (h > height) {
region[3] = height - region[1]
}
}
// 对region值进行缩放
region = region.map(e => {
// 对region值进行缩放处理
if (scale > 1) {
return e / scale
} else {
return e
}
})
queryOption.region = region
}
// 开始匹配
var res = images.matchTemplate(img1, img2, queryOption).matches
// 如果scale大于1的话，我们对img1进行了缩小，所以需要回收该图片资源
if (scale > 1) {
img1.recycle()
}
img2.recycle()
// 如果匹配成功，需要对值进行处理。
// 返回的结果形式为[{x, y}, {x, y}, ... ]，我希望坐标为数组形式，且排序成从上到下，从左到右
if (res.length > 0) {
return res.map(p => {
// 如果缩放比大于1，需要将结果坐标放大到设备分辨率
if (scale > 1) {
return [parseInt(p.point['x'] * scale), parseInt(p.point['y'] * scale)]
} else {
return [parseInt(p.point['x']), parseInt(p.point['y'])]
}
}).sort((a, b) => {
let absY = Math.abs(a[1] - b[1])
let absX = Math.abs(a[0] - b[0])
if (absY > 4 && a[1] > b[1]) {
return true
}
else if (absY < 4) {
return absX > 4 && a[0] > b[0]
} else {
return false
}
})
} else {
// 如果未匹配到，返回false
return false
}
}
结语
使用hasImg的时候需要对region进行分辨率适配，例如
hasImg(cap, template, {
region: [0, 0, 1280 * scale, 720 * scale]
})
这样在1920x1080的设备上，region就是[0, 0, 1920, 1080]，然后hasImg内先进行本设备的越界处理，再对region进行适配缩放，就达成了一致的分辨率。
在宽屏的情况下，要识别的元素位置一般是不固定的，所以建议不使用region定值，而是将屏幕划分为多个分区，在分区范围内找图。例如[0, 0, 25% * width, 50% * height]
细节比较多，有疑问和建议可以在评论区留言
网友评论