​
App Inventor 2 图片缩放教程

​
一、缩放方式对比

方式难度效果适用场景
直接设置宽高⭐一般简单缩放
等比缩放⭐⭐好保持比例
手势双指缩放⭐⭐⭐最好图片查看器
Canvas绘制⭐⭐⭐好游戏/绘图

​
二、等比缩放

初始化全局变量 原始宽度 = 0
初始化全局变量 原始高度 = 0
初始化全局变量 缩放比例 = 1.0

当 Screen1.初始化 时
  设置 全局变量 原始宽度 = Image1.宽度
  设置 全局变量 原始高度 = Image1.高度

过程 等比缩放(比例)
  设置 全局变量 缩放比例 = 比例
  设置 Image1.宽度 = 向下取整(全局变量 原始宽度 * 比例)
  设置 Image1.高度 = 向下取整(全局变量 原始高度 * 比例)

当 Button_ZoomIn.被点击 时
  调用 等比缩放(全局变量 缩放比例 + 0.1)

当 Button_ZoomOut.被点击 时
  如果 全局变量 缩放比例 > 0.2 则
    调用 等比缩放(全局变量 缩放比例 - 0.1)
  如果结束

当 Button_Reset.被点击 时
  调用 等比缩放(1.0)

​
三、适应屏幕缩放

过程 适应屏幕(图片宽度, 图片高度)
  设置 全局变量 屏幕宽度 = Screen1.宽度
  设置 全局变量 屏幕高度 = Screen1.高度
  
  设置 全局变量 宽度比 = 全局变量 屏幕宽度 / 图片宽度
  设置 全局变量 高度比 = 全局变量 屏幕高度 / 图片高度
  
  // 取较小比例，确保图片完整显示
  设置 全局变量 比例 = 最小值(全局变量 宽度比, 全局变量 高度比)
  
  设置 Image1.宽度 = 向下取整(图片宽度 * 全局变量 比例)
  设置 Image1.高度 = 向下取整(图片高度 * 全局变量 比例)
过程结束

​
四、双指手势缩放

初始化全局变量 初始距离 = 0
初始化全局变量 初始比例 = 1.0

当 Canvas1.多点触摸开始(触摸点列表) 时
  如果 获取列表长度(触摸点列表) = 2 则
    设置 全局变量 初始距离 = 调用 计算两点距离(
      获取列表项目(触摸点列表, 1),
      获取列表项目(触摸点列表, 2)
    )
    设置 全局变量 初始比例 = 全局变量 缩放比例
  如果结束

当 Canvas1.多点触摸移动(触摸点列表) 时
  如果 获取列表长度(触摸点列表) = 2 则
    设置 全局变量 当前距离 = 调用 计算两点距离(
      获取列表项目(触摸点列表, 1),
      获取列表项目(触摸点列表, 2)
    )
    设置 全局变量 新比例 = 全局变量 初始比例 * (全局变量 当前距离 / 全局变量 初始距离)
    
    // 限制缩放范围
    设置 全局变量 新比例 = 最大值(0.1, 最小值(全局变量 新比例, 5.0))
    调用 等比缩放(全局变量 新比例)
  如果结束

过程 计算两点距离(点1, 点2)
  设置 全局变量 dx = 获取键的值(点1, "x") - 获取键的值(点2, "x")
  设置 全局变量 dy = 获取键的值(点1, "y") - 获取键的值(点2, "y")
  返回 平方根(dx * dx + dy * dy)
过程结束
教程作者：ai2claw 🐝 | 创建时间：2026-03-30

​
参考资料与版权声明

​
原文来源

​
版权声明

本文档基于 MIT App Inventor 官方文档及社区资源整理，版权归原作者所有：
  • MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权
  • MIT App Inventor Community 帖子版权归原作者所有
本文档由 ai2claw 🐝 整理，仅供学习参考，如有侵权请联系删除。