图片找色 — colors、points 多点找色详解

为什么用找色

当应用没有设置 id、text、desc 等选择器可用的属性时（游戏、WebView、Canvas 绘制的界面等），颜色特征是定位屏幕元素的最后手段。

场景：游戏界面中找到红色按钮
┌────────────────────┐
│                    │
│     [红色按钮]      │ ← 可以通过颜色找到这个按钮的位置
│                    │
└────────────────────┘

单点找色

colors.findColor — 找第一个匹配的颜色

// 截图
let screen = images.captureScreen();

// 在全图中找到第一个红色像素点
let point = images.findColor(screen, "#FF0000");
if (point) {
    console.log("找到红色点: (" + point.x + ", " + point.y + ")");
}

// 带容差（tolerance），值越大匹配越宽松
let point = images.findColor(screen, "#FF0000", { tolerance: 10 });

colors.findColorInRegion — 区域内找色

// 在指定区域内找颜色（比全屏更高效）
let point = images.findColor(
    screen,
    "#00FF00",
    {
        region: [100, 200, 300, 400] // x, y, width, height
    }
);

找所有匹配点

// 找全部匹配的颜色点
let points = images.findColorAll(screen, "#FF0000", { tolerance: 5 });
console.log("共找到 " + points.length + " 个红点");
points.forEach(p => {
    click(p.x, p.y); // 逐个点击
});

多点组合找色

单个颜色点不够稳定，可能误匹配到背景中的同色像素。多点找色通过多个颜色点的相对位置关系确定唯一位置。

┌─ anchor 锚点 ──────┐
│  ● color_a (0,0)   │ ← 锚点位置
│                    │
│  ● color_b (+20,+30)│ ← 相对锚点的偏移
│                    │
│  ● color_c (+50,+10)│
└────────────────────┘

三个颜色点同时匹配 = 找到了目标位置

多点找色语法

// points() — 定义锚点 + 相对点
let points = [
    "#FF0000",          // 锚点颜色（第一个点，位置 (0, 0)）
    [20, 30, "#00FF00"], // 相对锚点向右 20、下 30 的绿色点
    [50, 10, "#0000FF"], // 向右 50、下 10 的蓝色点
];

// 多点找色
let result = images.findMultiColors(screen, "#FF0000", points);
if (result) {
    // result 是锚点的屏幕坐标
    console.log("找到目标: (" + result.x + ", " + result.y + ")");
    click(result.x, result.y);
}

带容差的多点

// 每个颜色点可以有自己的容差
let points = [
    ["#FF0000", 10],           // 锚点，容差 10
    [20, 30, ["#00FF00", 8]],  // 相对点，容差 8
    [50, 10, ["#0000FF", 5]],
];

let result = images.findMultiColors(screen, "#FF0000", points, {
    region: [0, 0, 1080, 1920] // 限定搜索区域
});

颜色格式

// 支持多种格式
"#FF0000"       // 标准十六进制
"FF0000"        // 不带 #
"red"           // 颜色名称（有限支持）
"rgb(255,0,0)"  // RGB 格式

// colors 模块辅助
let red = colors.parseColor("#FF0000");
console.log("R=" + colors.red(red) + " G=" + colors.green(red) + " B=" + colors.blue(red));

颜色相似度

// colors.equals — 判断两个颜色是否相等（考虑容差）
colors.equals("#FF0000", "#FF0101", 5); // 容差 5，返回 true

// colors.similar — 计算两个颜色的相似度
let similarity = colors.similar("#FF0000", "#FF1010");
console.log("相似度: " + similarity); // 0-100

实战：游戏自动寻路

/**
 * 在游戏界面中找到并点击"开始"按钮
 * 按钮特征：背景红色 (#E74C3C) + 中间白色文字 (#FFFFFF)
 */
function findStartButton() {
    let screen = images.captureScreen();
    
    // 多点找色：红色背景上有白色像素（按钮中心）
    let btn = images.findMultiColors(
        screen,
        "#E74C3C",              // 红色背景锚点
        [[10, 10, "#FFFFFF"]],  // 向右下偏移 10px 有白色
        { tolerance: 15 }
    );
    
    screen.recycle();
    
    if (btn) {
        // 点击按钮中心（锚点 + 相对点偏移的一半）
        click(btn.x + 10, btn.y + 10);
        return true;
    }
    return false;
}

// 每 2 秒尝试一次
setInterval(() => {
    findStartButton();
}, 2000);

性能优化

找色的局限性

颜色匹配受屏幕亮度、色彩模式、硬件差异影响较大。优先使用控件选择器，找不到时再考虑找色找图。