分享一个图片自动适配脚本

[trackway]

• Creator 版本： 3.8

论坛里有个适配正方形尺寸的，不符合个人需求，改造成适配任意矩形。
只能在编辑器中修改，直接挂载到图片节点即可。需要在代码中动态修改的话自己传入节点改造。

代码

import { _decorator, Component, Node, Size, UITransform } from 'cc';
const { ccclass, property } = _decorator;
/**
 * 图片按原比例适配目标尺寸, author: trackway
 */
@ccclass('ImageAdapter')
export class ImageAdapter extends Component {

    @property(Size)// 这里不使用装饰器的话数值会自动变回0
    private _adaptSize: Size = new Size(200, 200); // 默认目标尺寸

    @property({tooltip: '适配尺寸'})
    public set adaptSize(value:Size){
        this._adaptSize = value;
        this.onSizeChanged();
    }
    public get adaptSize(){
        return this._adaptSize;
    }

    @property(CCBoolean)
    public _alwaysScale: boolean = true; // 默认为true
    @property({tooltip: '是否总是缩放节点以适应目标尺寸\ntrue: 总是缩放以适应目标尺寸\nfalse: 仅当节点原始尺寸超出目标尺寸时才缩小以适应，否则保持原始大小'})
    public set alwaysScale(value: boolean) {
        this._alwaysScale = value;
        this.onSizeChanged();
    }
    public get alwaysScale() {
        return this._alwaysScale;
    }

    protected onLoad() {
        this.node.on(Node.EventType.SIZE_CHANGED, this.onSizeChanged, this);
        this.onSizeChanged();
    }

    /**当尺寸变化时，重置node节点大小 */
    onSizeChanged() {
        let size = this.node.getComponent(UITransform).contentSize;
        let originalAspectRatio = size.width / size.height;//计算节点的原始宽高比
        let targetAspectRatio = this.adaptSize.width / this.adaptSize.height;//计算目标尺寸的宽高比
        
        let scale = 1.0;// 最终应用到节点的缩放值
        if (originalAspectRatio > targetAspectRatio) {
            // 节点的原始形状比目标尺寸更“扁平”，以宽度为基准
            scale = this.adaptSize.width / size.width;
        } else {
            // 节点的原始形状比目标尺寸更“瘦高”，或宽高比相同，以高度为基准
            scale = this.adaptSize.height / size.height;
        }

        if (!this.alwaysScale) {// 如果不总是缩放，则检查节点的原始尺寸是否超出了目标尺寸
            if (size.width <= this.adaptSize.width && size.height <= this.adaptSize.height) {
                scale = 1.0; // 如果节点的原始尺寸小于或等于目标尺寸，则不进行缩放，保持原始大小
            }
        }
        this.node.setScale(scale, scale); 
    }
}

[OldPoint]

分享一下我目前用的
import { _decorator, Component, Node, Size, size, Sprite, SpriteFrame, UITransform } from ‘cc’;
const { ccclass, menu, property } = _decorator;

/**

• 图片固定尺寸组件

• @description 自动调整图片尺寸的组件，支持等比例缩放和异形图片适配

• 可以设置固定尺寸、反转方向，并自动处理图片尺寸变化

• 适用于需要保持特定尺寸的UI图片元素
  */
  @ccclass(‘ImgFixedSize’)
  @menu(‘自定义工具/自动匹配图片尺寸’)
  export class ImgFixedSize extends Component {

  /** Sprite组件引用 */
  @property
  private _icon: Sprite = null!;
  @property({ type: Sprite, visible: false })
  private get icon(): Sprite {
  if (!this._icon) {
  this._icon = this.node.getComponent(Sprite) || this.node.addComponent(Sprite);
  this._icon.trim = true;
  this._icon.sizeMode = Sprite.SizeMode.TRIMMED;
  }
  return this._icon;
  }

  /** UITransform组件引用 */
  @property
  private _transform: UITransform = null!;
  @property({ type: UITransform, visible: false })
  private get transform(): UITransform {
  if (!this._transform) {
  this._transform = this.node.getComponent(UITransform) || this.node.addComponent(UITransform);
  }
  return this._transform;
  }

  /** 当前精灵帧 */
  @property
  private _spriteFrame: SpriteFrame | null = null;
  @property({ type: SpriteFrame, visible: false })
  public get spriteFrame(): SpriteFrame | null {
  if (this._spriteFrame !== this.icon.spriteFrame) {
  this._spriteFrame = this.icon.spriteFrame;
  this.onSizeChanged();
  }
  return this._spriteFrame;
  }

  /** 是否适配异形图片 */
  @property
  private _adapt: boolean = false;
  @property({ displayName: ‘适配异形图片’ })
  private get adapt(): boolean {
  return this._adapt;
  }
  private set adapt(value: boolean) {
  if (value == this._adapt) return;
  this._adapt = value;
  this.onSizeChanged();
  }

  /** 固定尺寸（正方形） */
  @property
  private _fixedSize: number = 1;
  @property({ displayName: “固定尺寸(正方体)”, min: 1, visible: function (this: ImgFixedSize) { return !this.adapt } })
  public get fixedSize() {
  return this._fixedSize;
  }
  public set fixedSize(value) {
  this._fixedSize = value;
  this.onSizeChanged();
  }

  /** 固定尺寸（宽高不等） */
  @property
  private _fixedVecSize: Size = size(1, 1);
  @property({ type: Size, displayName: “固定尺寸(宽高不等)”, visible: function (this: ImgFixedSize) { return this.adapt } })
  private get fixedVecSize(): Size {
  return this._fixedVecSize;
  }
  private set fixedVecSize(value: Size) {
  this._fixedVecSize = value;
  this.onSizeChanged();
  }

  /** 是否水平反转 */
  @property
  private _reversalX: boolean = false;
  @property({ displayName: “反转x” })
  private get reversalX() {
  return this._reversalX;
  }
  private set reversalX(value) {
  if (value == this._reversalX) return;
  this._reversalX = value;
  this.onSizeChanged();
  }

  /** 是否垂直反转 */
  @property
  private _reversalY: boolean = false;
  @property({ displayName: “反转y” })
  private get reversalY() {
  return this._reversalY;
  }
  private set reversalY(value) {
  if (value == this.reversalY) return;
  this._reversalY = value;
  this.onSizeChanged();
  }

  /**

  • 组件加载时的初始化
  • @description 初始化组件属性，注册尺寸变化事件监听
    */
    protected onLoad(): void {
    this._fixedSize = this.fixedSize
    this.node.on(Node.EventType.SIZE_CHANGED, this.onSizeChanged, this);
    this.onSizeChanged();
    }

  /**

  • 编辑器中的重置方法
  • @description 重置所有属性为默认值
    */
    resetInEditor(): void {
    this._adapt = false;
    this._fixedSize = 1;
    this._fixedVecSize.width = 1;
    this._fixedVecSize.height = 1;
    this._reversalX = false;
    this._reversalY = false;
    this._spriteFrame = null;
    }

  /**

  • 处理尺寸变化
  • @description 根据当前设置计算并应用新的缩放比例
  • 支持等比例缩放和异形图片适配两种模式
*/
private onSizeChanged() {
let scaleSize = this.adapt ? Math.min(this.fixedVecSize.width / this.transform.width, this.fixedVecSize.height / this.transform.height) : this.fixedSize / Math.max(this.transform.width, this.transform.height);
this.node.setScale(this.reversalX ? scaleSize * -1 : scaleSize, this.reversalY ? scaleSize * -1 : scaleSize);
}
}

[941119950]

需要两个人给我项目帮帮忙 Q941119950 闲的大佬欢迎闪我