牙叔教程 简单易
效果
功能简介
- 在手机上快速裁剪图片
- 可视化裁剪
- 自由选择找图区域
- 实时显示找图数据
- 文件名字与图片数据保持一致
功能特色
图片居中
为什么居中也成了特色?
- 没有使用
标签的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文档, 最后才是群里问问 --- 牙叔教程
声明
部分内容来自网络 本教程仅用于学习, 禁止用于其他用途\
微信公众号 牙叔教程