autojs之选择指定区域

最新推荐文章于 2025-10-24 21:25:15 发布

原创最新推荐文章于 2025-10-24 21:25:15 发布 · 4k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#ocr #canvas

autojs 专栏收录该内容

193 篇文章

订阅专栏

使用情景

为了展示ocr的识别效果, 要把识别的文字圈起来, 并且显示识别到的文字

效果展示

在这里插入图片描述

原理

加载一个屏幕大小的悬浮窗
悬浮窗只有一个canvas控件
用canvas画出数据

代码讲解

悬浮窗布局

var window = floaty.rawWindow(
  <frame gravity="center">
    <canvas id="board"></canvas>
  </frame>
);

调整悬浮窗大小, 充满屏幕

window.setSize(-1, -1);

让悬浮窗一直显示

setInterval(function () {}, 1000);

创建两支画笔, 一个画矩形, 一个画文字

let rectanglePaint = new Paint();
rectanglePaint.setStrokeWidth(3);
rectanglePaint.setColor(colors.parseColor("#00ff00"));
rectanglePaint.setStyle(Paint.Style.STROKE); //空心矩形框

let textPaint = new Paint();
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setTextSize(50);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(colors.parseColor("#f000ff"));

文字高度

let fontMetrics = textPaint.getFontMetrics();

测试的数据

let data = {
  rect: [100, 100, 200, 200],
  content: "hello world",
};

画出矩形和文字

window.board.on("draw", function (canvas) {
  let rect = data.rect;
  canvas.drawRect(rect[0], rect[1], rect[2], rect[3], rectanglePaint);
  canvas.drawText(
    data.content,
    rect[0] + parseInt((rect[2] - rect[0]) / 2),
    rect[3] + Math.abs(fontMetrics.top),
    textPaint
  );
});