脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → autojs长宽不定图片居中

autojs长宽不定的图片在正方形图片居中实现详解

 更新时间：2023年01月31日 10:11:54   作者：牙叔教程  
这篇文章主要为大家介绍了autojs长宽不定的图片在正方形图片居中实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

图片的长宽不是固定的,

正方形图片的长宽是固定的, 比如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();

环境

设备: 小米11pro
Android版本: 12
Autojs版本: 9.3.11

名人名言

思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问

声明

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

以上就是autojs长宽不定的图片在正方形图片居中实现详解的详细内容，更多关于autojs长宽不定图片居中的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 关于JavaScript 中 if包含逗号表达式

    关于JavaScript 中 if包含逗号表达式

    这篇文章主要介绍了 关于JavaScript 中 if包含逗号表达式，有时会看到JavaScript中if判断里包含英文逗号 “,”，这个是其实是逗号表达式。在if条件里，只有最后一个表达式起判断作用。下面来看看文章的具体介绍吧
    2021-11-11
  • JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

    JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

    这篇文章主要介绍了触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-10-10
  • JS中的every()对空数组总返回true原理分析

    JS中的every()对空数组总返回true原理分析

    这篇文章主要为大家介绍了JS中的every()对空数组总返回true原理分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 详解微信小程序入门五: wxml文件引用、模版、生命周期

    详解微信小程序入门五: wxml文件引用、模版、生命周期

    本篇文章主要介绍了详解微信小程序入门五: wxml文件引用、模版、生命周期，具有一定的参考价值，有兴趣的可以了解一下。
    2017-01-01
  • 微信小程序 MINA文件结构

    微信小程序 MINA文件结构

    这篇文章主要介绍了微信小程序 MINA文件结构的相关资料,这里详细介绍了微信小程序的文件目录及文件作用，需要的朋友可以参考下
    2016-10-10
  • 8个JS的reduce使用实例和reduce操作方式

    8个JS的reduce使用实例和reduce操作方式

    reduce方法是JavaScript中一个比较强大的方法，可能在平时开发中，有人根本没用过，通过下面的8个例子，学会reduce的用法以及它的常用场景,需要的朋友可以参考一下
    2021-09-09
  • 项目中使用TypeScript的TodoList实例详解

    项目中使用TypeScript的TodoList实例详解

    这篇文章主要为大家介绍了项目中使用TypeScript的TodoList实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • JavaScript原型Prototype详情

    JavaScript原型Prototype详情

    这篇文章主要介绍了JavaScript原型Prototype，在JavaScript中，函数是一个包含属性和方法的Function类型的对象。而原型（Prototype ）就是Function类型对象的一个属性。具体内容需要的朋友可以参考下面文章的介绍
    2021-12-12
  • Page Visibility API 教程示例

    Page Visibility API 教程示例

    这篇文章主要为大家介绍了Page Visibility API 的教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 一个很简单的办法实现TD的加亮效果.

    一个很简单的办法实现TD的加亮效果.

    一个很简单的办法实现TD的加亮效果....
    2006-06-06

最新评论