使用情景
为了展示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 ); });
代码仓库:
https://gitee.com/yashujs/autojs-ocr
