Autojs displays the specified region

Tooth uncle tutorial is easy to understand

The target

Displays the specified area on the phone screen

The two methods

1. On an existing image, draw a rectangle to view the image
2. Draw rectangles directly on a full screen transparent suspension window

Image already drawn rectangle

1. Read the pictures

let imgFilepath = files.path("./chess.png");
let img = images.read(imgFilepath);
Copy the code

2. Set the drawing area

let rect = {
  left: 52,
  top: 20,
  right: 138,
  bottom: 96,
};
Copy the code

3. Set the brush properties to green and hollow

let paint = new Paint();
paint.setStrokeWidth(9);
paint.setColor(colors.parseColor("#00ff00"));
paint.setStyle(Paint.Style.STROKE);
Copy the code

4. Draw rectangles on the picture

var canvas = new Canvas(img);
canvas.drawRect(left, top, right, bottom, paint);
Copy the code

5. Convert canvas data into images

var image = canvas.toImage(); Let filePath = "/sdcard/ script/showrect.png "; files.createWithDirs(filePath); images.save(image, filePath);Copy the code

6. recycling

image.recycle();
img.recycle();
Copy the code

7. Review images

app.viewFile(filePath);
Copy the code

Draw rectangles, circles and text directly on the full screen transparent suspension window

Use the sample

let Board = require("./board");
let board = new Board();
setTimeout(() => {
  board.drawText({
    x: 100,
    y: 200,
    text: "Hello World",
  });
  sleep(1000);
  board.setPaintColor("#00ff00");
  board.drawCircle({
    x: 200,
    y: 400,
    radius: 100,
  });
  sleep(1000);
  board.setPaintColor("#0000ff");
  board.drawRect({
    left: 400,
    top: 300,
    right: 600,
    bottom: 500,
  });
}, 1000);
Copy the code

Encapsulate the drawing method into a module Board

1. Check hover window permissions

function ensureFloatyPermission() { if (floaty.checkPermission()) { return true; } toastLog(" Please grant suspension window permissions "); app.startActivity({ action: "android.settings.action.MANAGE_OVERLAY_PERMISSION", data: "package:" + context.packageName, }); Throw new Error(" Please grant suspension window permission "); }Copy the code

2. Create a Suspension Window

function createFloatyWindow() {
  let floatyWindow = floaty.rawWindow(
    <frame bg="#88ff0000">
      <canvas id="board" w="*" h="*" />
    </frame>
  );
  ui.run(function () {
    floatyWindow.setSize(-1, -1);
    floatyWindow.setPosition(0, 0);
    let touchable = false;
    floatyWindow.setTouchable(touchable);
  });
  return floatyWindow;
}
Copy the code

3. Create a brush

function createPaint() {
  paint = new Paint();
  paint.setStyle(Paint.Style.FILL);
  paint.setTextSize(100);
  return paint;
}
Copy the code

4. Sets the Artboard Draw event

board.on("draw", (canvas) => {
  canvas.drawColor(android.graphics.Color.TRANSPARENT, android.graphics.PorterDuff.Mode.CLEAR);
  canvas.drawBitmap(fullScreenBitmap, 0, 0, paint);
});
Copy the code

5. Draw a rectangle

Board.prototype.drawRect = function (rect) {
  ensureFullScreenCanvas(fullScreenCanvas);
  ensureRectType(rect);
  fullScreenCanvas.drawRect(rect.left, rect.top, rect.right, rect.bottom, paint);
};
Copy the code

All the code that can be broken down, the number of lines per function is very small,

I’m a 9 out of 10

note

Use the hover window setSize(-1, -1) for full screen;

Some phones may not be able to cover the status bar or the bottom three king Kong

The test environment

Mi 11 Pro Android version: 12 Autojs version: 9.1.14

Quotes.

Ideas are the most important, other baidu, Bing, StackOverflow, Github, Android docs, AutoJS docs, and last but not least, ask in the group

This tutorial is intended for learning purposes only and is not intended for other use

Wechat official account tooth Uncle tutorial