autojs之选择指定区域

使用情景

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

效果展示

原理

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

代码讲解

1. 悬浮窗布局

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

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

window.setSize(-1, -1);

3. 让悬浮窗一直显示

setInterval(function () {
    
    }, 1000);

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

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"));

5. 文字高度

let fontMetrics = textPaint.getFontMetrics();

6. 测试的数据

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

7. 画出矩形和文字

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
  );
});

---

代码仓库:

https://gitee.com/yashujs/autojs-ocr

---

微信公众号 AutoJsPro教程

QQ群

747748653