autojs裁剪找图

牙叔教程 简单易

效果

功能简介

• 在手机上快速裁剪图片
• 可视化裁剪
• 自由选择找图区域
• 实时显示找图数据
• 文件名字与图片数据保持一致

功能特色

图片居中

为什么居中也成了特色?

• 没有使用标签的scaleType属性
• 使用了matrix
• 要考虑坐标的映射关系

图片居中

使用的view是

为什么不使用?

因为还要绘制矩形.

图片居中代码

canvas.drawBitmap(currentBitmap, matrix, null);

这里起主要作用的是matrix, 看一下matrix怎么来的

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

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);

看名字setRectToRect, matrix是把一个rect变换成了另一个rect, matrix是这个变换的关系.

拿点石成金来比喻的话,

src===石头

dst===金石头

matrix===金手指

任何东西, 碰到金手指都会变成金子,

同理, 任何矩阵经过matrix处理, 都会变成另外一个矩阵,

这两个矩阵的变换关系, 与src和dst的变换关系一致

上面的matrix是把原始图片映射到画板.

裁剪图片时, 画板与原始图片的坐标映射关系

找图, 我们要两张图, 一张大图, 一张小图;

小图要产生, 首先我们要划定一个矩形, 然后裁剪, 就有了小图;

裁剪的矩形的数据可以通过 setOnTouchListener 设置触摸监听得到;

upX = event.getX();
upY = event.getY();

按下记录一个坐标, 弹起记录一个坐标, 一个矩形的数据就有了

虽然有了矩形数据, 也可以绘制出来

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

也能看到该裁剪图片的那一块区域,

但是, 具体的坐标怎么计算?

这就轮到matrix出手了;

现在是要把画板中的图片, 映射到原始图片, 再裁剪刚才绘制的矩形对应的区域

这个矩形区域所对应的图片区域的坐标怎么算?

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文档, 最后才是群里问问 --- 牙叔教程

声明

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

微信公众号 牙叔教程

这篇好文章是转载于：学新通技术网