Tooth uncle tutorial is simple and easy

The effect

Function introduction

  • Crop images quickly on your phone
  • Visual clipping
  • Freely choose the search area
  • Real-time display of graph data
  • Keep the file name consistent with the image data

features

Image center

Why did the center become a feature?

  • Don’t useThe scaleType attribute of the tag
  • Using the matrix
  • You have to think about the mapping of coordinates

Image center

The view we use is

Why not use?

Because I have to draw a rectangle.

Image center code

canvas.drawBitmap(currentBitmap, matrix, null);
Copy the code

The main thing here is matrix, where does matrix come from

let matrix = new Matrix();
matrix.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
Copy the code

What is SRC, 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);
Copy the code

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

To use the Midas touch as a metaphor,

SRC = = = stone

DST = = = gold stone

Matrix = = = gold finger

Everything turns to gold when touched by gold fingers,

Similarly, any matrix treated by a matrix will turn into another matrix,

The transformation relation of these two matrices is consistent with that of SRC and DST

The matrix above maps the original image to the artboard.

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

Look for pictures, we want two pictures, one big picture, one small picture;

To generate a small picture, first we need to delimit a rectangle, and then crop, there is a small picture;

The clipped rectangle’s data can be set to touch listener via setOnTouchListener;

upX = event.getX();
upY = event.getY();
Copy the code

Press record a coordinate, pop record a coordinate, a rectangle of data is available

Even though we have rectangle data, we can plot it

canvas.drawRect(downX, downY, upX, upY, paint);
Copy the code

You can also see the area of the cropped image,

But how do you calculate the coordinates?

That’s where Matrix comes in;

Now you map the image on the artboard to the original image, and then crop out the area corresponding to the rectangle you just drew

What about the coordinates of the image region corresponding to this rectangle region?

mapPoints

Here we use a method of matrix: mapPoints

Gets the upper-left coordinates of the image region corresponding to the rectangle region

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

The coordinates we pressed were converted into the coordinates on the original picture after matrix processing.

So this matrix right here looks like this

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);
Copy the code

He transformed the picture on the drawing board into the original picture

So the question is, how do you calculate the coordinates of the picture on the drawing board?

We already have a layer of mapping, which is mapping the original image to the artboard, and this layer of mapping is the matrix;

Then we take the coordinate (0,0), which, after matrix processing, becomes the upper-left coordinate of the picture on the drawing board;

Then the lower right corner of the original picture, after matrix processing, becomes the lower right corner coordinate of the picture on the drawing board;

conclusion

When pictures are displayed on the canvas, matrix maps the original picture to the canvas.

When you calculate the coordinates of the rectangle corresponding to the original picture, you map the picture on the artboard to the original picture;

There are two matrices here, please distinguish them clearly

That’s the focus of this tutorial, the rest is pretty simple

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