autojs長寬不定的圖片在正方形圖片居中實(shí)現(xiàn)詳解

更新時(shí)間：2023年01月31日 10:11:54 作者：牙叔教程

這篇文章主要為大家介紹了autojs長寬不定的圖片在正方形圖片居中實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

圖片的長寬不是固定的,

正方形圖片的長寬是固定的, 比如512x512

思路整理

圖片肯定是要縮放的, 我要需要一個(gè)縮放系數(shù);

圖片肯定是要有位置的, 因此, 我們需要一個(gè)坐標(biāo);

我們一共需要兩樣?xùn)|西

縮放系數(shù)
繪制圖片時(shí), 左上角坐標(biāo)

計(jì)算縮放系數(shù)

"nodejs";
const { readImage } = require("image");
async function main() {
  let squareImg = await readImage("square.png");
  let rectangleImg = await readImage("rectangle.png");
  let squareWidth = squareImg.width; // 512
  let squareHeight = squareImg.height; // 512
  let rectangleWidth = rectangleImg.width; // 900
  let rectangleHeight = rectangleImg.height; // 300
  var scale = Math.min(squareWidth / rectangleWidth, squareWidth / rectangleHeight);
  console.log(scale); // 0.5688888888888889
}
main();

900 × 0.5688888888888889 = 512

縮放圖片

  let scaledRectangleImg = await rectangleImg.scale(scaleValue);
  console.log(scaledRectangleImg);

打印的圖片數(shù)據(jù)

Image {
  _onRecycledCallbacks: [],
  _mat: Mat {
    __nativeObject: '-5476376627956078312',
    step: 2048,
    elemSize: 4,
    sizes: [ 171, 512 ],
    empty: 0,
    depth: 0,
    dims: 2,
    channels: 4,
    type: 24,
    cols: 512,
    rows: 171
  }
}

有一個(gè)sizes字段

sizes: [ 171, 512 ]

表示這個(gè)mat的高和寬,

mat的高, 對應(yīng)的是 rows 字段, row表示行, 多個(gè)行摞起來就表示高;

mat的寬, 對應(yīng)的是 cols 字段, col表示列, 多個(gè)列排起來就表示寬;

繪制圖片時(shí)左上角坐標(biāo)

我們先來看Y坐標(biāo),

這是一個(gè)藍(lán)色背景的正方形,

還有一個(gè)縮放后的綠色長方形

這個(gè)Y坐標(biāo)應(yīng)該是多少呢?

在綠色下方, 是剩余的藍(lán)色,

假設(shè)我們的綠色長方形移動(dòng)后的位置是紅色

這個(gè)移動(dòng)的距離怎么算呢?

移動(dòng)的距離 = 正方形圖片高度的一半 - 長方形高度的一半

X的坐標(biāo)同理

移動(dòng)的距離 = 正方形圖片寬度的一半 - 長方形寬度的一半

移動(dòng)的距離 = 512/2 - 512/2 = 0

繪制圖片

用canvas繪制圖片, 這里的圖片要用Image轉(zhuǎn)成Bitmap, 因?yàn)閏anvas支持 Bitmap, 不支持 Image

let squareBitmap = squareImg.toBitmap();
let scaledRectangleBitmap = scaledRectangleImg.toBitmap();
let canvas = new Canvas(squareBitmap);
let x = (squareWidth - scaledRectangleBitmap.getWidth()) / 2;
let y = (squareHeight - scaledRectangleBitmap.getHeight()) / 2;
canvas.drawBitmap(scaledRectangleBitmap, x, y, null);
let drawingImg = Image.ofBitmap(squareBitmap);
let tempImgPath = path.join(process.cwd(), "temp.png");
await writeImage(drawingImg, tempImgPath);
app.viewFile(tempImgPath);

圖片不用了, 就要回收

  squareImg.recycle();
  rectangleImg.recycle();
  scaledRectangleImg.recycle();
  drawingImg.recycle();
  squareBitmap.recycle();
  scaledRectangleBitmap.recycle();

第二種方法

用 Matrix

"nodejs";
require("rhino").install();
const { readImage, writeImage, Image } = require("image");
const path = require("path");
const app = require("app");
const Matrix = android.graphics.Matrix;
const Canvas = android.graphics.Canvas;
async function main() {
  let squareImg = await readImage("square.png");
  let rectangleImg = await readImage("rectangle.png");
  let squareWidth = squareImg.width; // 512
  let squareHeight = squareImg.height; // 512
  let rectangleWidth = rectangleImg.width; // 900
  let rectangleHeight = rectangleImg.height; // 300
  var scaleValue = Math.min(squareWidth / rectangleWidth, squareWidth / rectangleHeight);
  let squareBitmap = squareImg.toBitmap();
  let rectangleBitmap = rectangleImg.toBitmap();
  let canvas = new Canvas(squareBitmap);
  let matrix = new Matrix();
  matrix.postTranslate(-rectangleWidth / 2, -rectangleHeight / 2);
  matrix.postScale(scaleValue, scaleValue);
  matrix.postTranslate(squareWidth / 2, squareHeight / 2);
  canvas.drawBitmap(rectangleBitmap, matrix, null);
  let drawingImg = Image.ofBitmap(squareBitmap);
  let tempImgPath = path.join(process.cwd(), "temp.png");
  await writeImage(drawingImg, tempImgPath);
  app.viewFile(tempImgPath);
  squareImg.recycle();
  rectangleImg.recycle();
  drawingImg.recycle();
  squareBitmap.recycle();
}
main();

Matrix 的縮放和平移的順序可以換換

  matrix.postScale(scaleValue, scaleValue);
  matrix.postTranslate(squareWidth / 2, squareHeight / 2);
  matrix.postTranslate((-rectangleWidth * scaleValue) / 2, (-rectangleHeight * scaleValue) / 2);

或者

  matrix.postTranslate(-rectangleWidth / 2, -rectangleHeight / 2);
  matrix.postTranslate(squareWidth / 2, squareHeight / 2);
  matrix.postScale(scaleValue, scaleValue, squareWidth / 2, squareHeight / 2);

理解Matrix的時(shí)候, 腦子里要有參考系坐標(biāo)軸,

要是在電腦上畫出來就更好了, 電腦可以任意縮放和移動(dòng)物體

第三種方法

drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)

"nodejs";
require("rhino").install();
const { readImage, writeImage, Image } = require("image");
const path = require("path");
const app = require("app");
const Canvas = android.graphics.Canvas;
const Rect = android.graphics.Rect;
async function main() {
  let squareImg = await readImage("square.png");
  let rectangleImg = await readImage("rectangle.png");
  let squareWidth = squareImg.width; // 512
  let squareHeight = squareImg.height; // 512
  let rectangleWidth = rectangleImg.width; // 900
  let rectangleHeight = rectangleImg.height; // 300
  var scaleValue = Math.min(squareWidth / rectangleWidth, squareWidth / rectangleHeight);
  let squareBitmap = squareImg.toBitmap();
  let rectangleBitmap = rectangleImg.toBitmap();
  let canvas = new Canvas(squareBitmap);
  let src = new Rect(0, 0, rectangleWidth, rectangleHeight);
  let dst = new Rect(
    (squareWidth - rectangleWidth * scaleValue) / 2,
    (squareHeight - rectangleHeight * scaleValue) / 2,
    (squareWidth + rectangleWidth * scaleValue) / 2,
    (squareHeight + rectangleHeight * scaleValue) / 2
  );
  canvas.drawBitmap(rectangleBitmap, src, dst, null);
  let drawingImg = Image.ofBitmap(squareBitmap);
  let tempImgPath = path.join(process.cwd(), "temp.png");
  await writeImage(drawingImg, tempImgPath);
  app.viewFile(tempImgPath);
  squareImg.recycle();
  rectangleImg.recycle();
  drawingImg.recycle();
  squareBitmap.recycle();
}
main();

環(huán)境