Tooth uncle tutorial is easy to understand

Results show

origin

Someone in the group said, “How do you write a magnifying glass?

The environment

Autojs version: 9.0.5

Android version: 8.0.0

Software may still have some bugs, mind don’t look at, Baidu to find other tutorials

Train of thought

Here’s what you’ll learn

  • File layer, such as drawing pictures and text drawing class files in the same folder
  • Centralize Settings, such as layout size, magnifying glass spacing, and screenshot delay Settings
  • Custom views, such as the circle shadow of a magnifying glass
  • The absolute coordinates of the control on the screen
  • Draw rings, draw crosses, draw words
  • Use cached values, since the UI limits the refresh to 16ms, and calculate as little as you can
  • Cut out the canvas
  • Save and restore the canvas state
  • Draws the centered text
  • Convert any unit to px
  • Bottom three king Kong height
  • Put variables into the UI scope
  • Judge the brightness of colors, such as black text on a light background and white text on a dark background
  • Control to set the gradient background
  • Control to set transparency
  • Set animation listening, such as control transparent animation after the end of screenshots
  • Stop other scripts
  • Application for permission to hover Windows and screenshots
  • Scripted broadcast communication
  • A way to dodge the suspension window

The difficulties in

  • The hover window moves to the edge corner to show the image calculation.

If each of them is correct, then the result is correct

The code on

1. The main logic
let init = require("./init");
let showFloatingWindows = require("./showFloatingWindows");

// Check the hover window and screenshot permissions and exit if no
init();

showFloatingWindows();

let intervalId = setInterval(() = > {}, 1000);

events.broadcast.on("Exit suspension window".function (value) {
  if (value) {
    clearInterval(intervalId);
    setTimeout(function () {}, 1000); }});Copy the code
2. Check permissions
module.exports = function () {
  engines.all().map((ScriptEngine) = > {
    if (engines.myEngine().toString() !== ScriptEngine.toString()) {
      ScriptEngine.forceStop();
    }
  });

  if(! $floaty.checkPermission()) {// No hover window permission, prompt user and jump request
    toastLog("This script requires hover window permissions to display hover Windows, please allow and re-run this script in a subsequent screen.");
    $floaty.requestPermission();
    exit();
  } else {
    console.log("Already have suspension window permission.");
  }

  // Request a screenshot
  if(! requestScreenCapture()) { toastLog("Request screenshot failed");
    exit();
  } else {
    console.log("Have screenshot permission"); }};Copy the code
3. Suspension window layout
let window = $floaty.rawWindow(
  <frame id="parentF" alpha="0.0">
    <custom-view
      .
    ></custom-view>
    <horizontal gravity="bottom">
      <card cardCornerRadius="{{buttonViewRadiusWithUnit}}" cardElevation="0px">
        <img
		  .
        ></img>
      </card>

      <View w="{{blankViewSizeWithUnit}}"></View>
      <card cardCornerRadius="{{buttonViewRadiusWithUnit}}" cardElevation="0px">
        <img
          .
        ></img>
      </card>
    </horizontal>
  </frame>
);
Copy the code
4. Hover window click event
window.record.click(function () {
  let data = window.customView.updateData();
  toastLog("Color already recorded \n" + data);
  setClip(data);
});
window.quit.click(function () {
  toastLog("Exit color picker");
  window.close();
  events.broadcast.emit("Exit suspension window".true);
});
Copy the code
5. Display suspension window
ui.post(function () {
  let windowWidth = window.getWidth();
  let windowHeight = window.getHeight();
  let x = dw / 2 - windowWidth / 2;
  let y = dh / 2 - windowHeight / 2;
  window.setPosition(x, y);
  setTimeout(function () {
    window.parentF.setAlpha(1);
    window.customView.updateRingColor("#ff0000");
    window.customView.refresh();
    setOnTouchListener(window, dw, dh, windowWidth, windowHeight);
  }, 300);
});
Copy the code
6. Magnifying glass onDraw
onDraw: function (canvas) {
  this.ringColor = getColor(this);
  paintOfTheOuterCircle.setShader(radialGradientOfTheOuterCircle);
  drawCircle(canvas, this);
  if (this.img) {
    drawImg(canvas, this);
    drawInfo(canvas, this);
  }
  drawCross(canvas, this);
},
Copy the code
7. Paint a cross
canvas.drawRect(strokeRectFLeft, strokePaint);
canvas.drawRect(fillRectFLeft, fillPaint);

canvas.drawRect(strokeRectFRight, strokePaint);
canvas.drawRect(fillRectFRight, fillPaint);

canvas.drawRect(strokeRectFTop, strokePaint);
canvas.drawRect(fillRectFTop, fillPaint);

canvas.drawRect(strokeRectFBottom, strokePaint);
canvas.drawRect(fillRectFBottom, fillPaint);
Copy the code
8. Draw a circle
canvas.drawCircle(view.centerX, view.centerY, view.radiusOfTheOuterCircle, view.paintOfTheOuterCircle);
Copy the code
9. Draw pictures
canvas.drawARGB(255.0.0.255);
canvas.drawBitmap(bitmap, srcRect, destRect, paintOfImg);
Copy the code
10. Release images in a timely manner
updateImg: function (img) {
  let oldImg = this.img;
  let oldBitmap = this.bitmap;
  ui.post(function () {
    oldBitmap && oldBitmap.recycle();
    oldImg && oldImg.recycle();
  }, 100);
  this.img = img.clone();
  this.bitmap = this.img.getBitmap();
},
Copy the code

Quotes.

Thinking is the most important, other Baidu, Bing, StackOverflow, Android documents, autoJS documents, and finally in the group to ask — fang Shu tutorial

The statement

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