autojs長寬不定的圖片在正方形圖片居中實現詳解

2023-02-03 18:03:13

正文

圖片的長寬不是固定的,

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

思路整理

圖片肯定是要縮放的, 我要需要一個縮放係數;

圖片肯定是要有位置的, 因此, 我們需要一個座標;

我們一共需要兩樣東西

縮放係數
繪製圖片時, 左上角座標

計算縮放係數

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

列印的圖片資料

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
  }
}

有一個sizes欄位

sizes: [ 171, 512 ]

表示這個mat的高和寬,

mat的高, 對應的是 rows 欄位, row表示行, 多個行摞起來就表示高;

mat的寬, 對應的是 cols 欄位, col表示列, 多個列排起來就表示寬;

繪製圖片時左上角座標

我們先來看Y座標,

這是一個藍色背景的正方形,

還有一個縮放後的綠色長方形

這個Y座標應該是多少呢?

在綠色下方, 是剩餘的藍色,

假設我們的綠色長方形移動後的位置是紅色

這個移動的距離怎麼算呢?

移動的距離 = 正方形圖片高度的一半 - 長方形高度的一半

X的座標同理

移動的距離 = 正方形圖片寬度的一半 - 長方形寬度的一半

移動的距離 = 512/2 - 512/2 = 0

繪製圖片

用canvas繪製圖片, 這裡的圖片要用Image轉成Bitmap, 因為canvas支援 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的時候, 腦子裡要有參考系座標軸,

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

第三種方法

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

環境