autojs cropping to find pictures

Uncle Tooth Tutorial is simple and easy

Effect

Function introduction

Quickly crop pictures on your phone
Visual cropping
Free choice of image search area
Display map data in real time
The file name is consistent with the image data

Features

center image

Why is centering also a feature?

The scaleType property of the label is not used
used matrix
To consider the mapping relationship of coordinates

center image

The view used is

Why not use it ?

Because the rectangle is also drawn.

Image centering code

canvas.drawBitmap(currentBitmap, matrix, null);
复制代码

The main role here is the matrix, let's see how the matrix came from

let matrix = new Matrix();
matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
复制代码

What is src and dst?

let src = new RectF(0, 0, currentImg.getWidth() - 1, currentImg.getHeight() - 1);
let dst = new RectF(0, 0, store.boardWidth - 1, store.boardHeight - 1);
复制代码

Look at the name setRectToRect , matrix is to transform one rect into another rect, and matrix is the relationship of this transformation.

To use the metaphor of turning a stone into gold ,

src===stone

dst===Golden Stone

matrix===Goldfinger

Anything that touches a golden finger will turn into gold,

In the same way, any matrix will become another matrix after matrix processing,

The transformation relationship of these two matrices is consistent with the transformation relationship of src and dst

The above matrix is to map the original image to the artboard.

When cropping a picture, the coordinate mapping relationship between the artboard and the original picture

Looking for pictures, we want two pictures, a large picture and a small picture;

To generate a small image, first we have to delineate a rectangle, and then crop, there is a small image;

The data of the cropped rectangle can be obtained by setting the touch listener through setOnTouchListener ;

upX = event.getX();
upY = event.getY();
复制代码

Press to record a coordinate, pop up to record a coordinate, and a rectangle of data is available

Although you have rectangular data, you can also draw it

canvas.drawRect(downX, downY, upX, upY, paint);
复制代码

You can also see the area of the cropped image,

However, how to calculate the specific coordinates?

This is the turn of the matrix shot;

Now we need to map the picture in the artboard to the original picture, and then crop the area corresponding to the rectangle just drawn

How to calculate the coordinates of the image area corresponding to this rectangular area?

mapPoints

这里就要用到matrix的一个方法: mapPoints

获取矩形区域所对应的图片区域的左上角坐标

let ptsTrans = util.java.array("float", 2);
ptsTrans[0] = downX;
ptsTrans[1] = downY;
matrix.mapPoints(ptsTrans);
let rect = {
  x: ptsTrans[0],
  y: ptsTrans[1],
};
复制代码

我们按下的坐标, 通过matrix加工后, 转换成了原始图片上的坐标;

现在的这个matrix是这样来的

let src = new RectF(boardImgRect.left, boardImgRect.top, boardImgRect.right, boardImgRect.bottom);
let dst = new RectF(0, 0, currentImg.width - 1, currentImg.height - 1);
matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
复制代码

他是把画板上的图片变换成了原始图片

那么问题又来了, 画板上的图片坐标又是怎么计算出来的?

前面, 我们已经有了一层映射关系, 那就是把原始图片, 映射到画板上, 这层映射关系就是matrix;

然后我们取坐标(0,0), 经过matrix加工后, 就变成了了画板上的图片的左上角坐标;

再把原始图片的右下角, 使用matrix加工后, 就变成了了画板上的图片的右下角坐标;

总结

在画板canvas上显示图片的时候, matrix是把原始图片映射到画板上;

在计算矩形对应原始图片坐标的时候, 是把画板上的图片, 映射到原始图片;

这里有两个matrix, 请区分清楚

以上就是本教程的重点内容, 其他的都很简单

测试环境

手机: Mi 11 Pro
Android版本: 12
Autojs版本: 9.1.14

名人名言

思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问 --- 牙叔教程

声明

部分内容来自网络本教程仅用于学习, 禁止用于其他用途\

微信公众号牙叔教程