おじさんの歯のチュートリアルはシンプルで簡単です
効果
機能紹介
- 携帯電話ですばやく写真を切り抜く
- 視覚的なトリミング
- 画像検索エリアの自由選択
- 地図データをリアルタイムで表示
- ファイル名は画像データと一致しています
特徴
中央の画像
なぜセンタリングも機能なのですか？
ラベルのscaleTypeプロパティは使用されません
- 使用されたマトリックス
- 座標のマッピング関係を検討するには
中央の画像
使用されるビューは
使ってみませんか？
長方形も描かれているからです。
画像センタリングコード
canvas.drawBitmap(currentBitmap, matrix, null);
复制代码ここでの主な役割はマトリックスです。マトリックスがどのように作成されたかを見てみましょう。
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は1つのrectを別のrectに変換するためのものであり、matrixはこの変換の関係です。
石を金に変えるという比喩を使うには、
src === stone
dst===ゴールデンストーン
マトリックス===ゴールドフィンガー
金の指に触れるものはすべて金に変わります、
同様に、行列は行列処理後に別の行列になります。
これら2つの行列の変換関係は、srcとdstの変換関係と一致しています。
上記のマトリックスは、元の画像をアートボードにマッピングするためのものです。
画像をトリミングする場合、アートボードと元の画像の間の座標マッピング関係
写真を探すには、大きな写真と小さな写真の2つの写真が必要です。
小さな画像を生成するには、最初に長方形を描き、次にトリミングする必要があります。小さな画像があります。
トリミングされた長方形のデータは、setOnTouchListenerを使用してタッチリスナーを設定することで取得できます。
upX = event.getX();
upY = event.getY();
复制代码を押して座標を記録し、ポップアップして座標を記録すると、データの長方形が利用可能になります
長方形のデータがありますが、それを描画することもできます
canvas.drawRect(downX, downY, upX, upY, paint);
复制代码トリミングされた画像の領域も表示されます、
しかし、特定の座標を計算する方法は？
これはマトリックスショットの番です。
次に、アートボードの画像を元の画像にマッピングしてから、描画したばかりの長方形に対応する領域をトリミングする必要があります。
この長方形の領域に対応する画像領域の座標を計算するにはどうすればよいですか？
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文档, 最后才是群里问问 --- 牙叔教程
声明
部分内容来自网络 本教程仅用于学习, 禁止用于其他用途\
微信公众号 牙叔教程