美文网首页
CocosCreator中,将任意大小的图片完整显示在屏幕指定区

CocosCreator中,将任意大小的图片完整显示在屏幕指定区

作者: 全新的饭 | 来源:发表于2022-10-31 17:03 被阅读0次

说明

  1. 通过两个点(左下、右上)的位置设定指定区域:minXRatio、maxXRatio、minYRatio、maxYRatio
  2. 通过setSprite()传入图片

代码

DisplayImg.ts

import { _decorator, Component, Node, Sprite, Vec2, Vec3, SpriteFrame, UITransform, Size, spriteAssembler } from 'cc';
const { ccclass, property } = _decorator;

// 将任意大小的图片完整显示在屏幕中
@ccclass('DisplayImg')
export class DisplayImg extends Component 
{
    private static readonly minXRatio = 0.05;
    private static readonly maxXRatio = 0.95;
    private static readonly minYRatio = 0.3;
    private static readonly maxYRatio = 0.9;

    private _width: number;
    private _height: number;

    @property({ type: Sprite, visible: true, displayName: '图片' })
    private _sprite: Sprite;
    private _spriteTrans: UITransform;

    start()
    {
        this.init();
    }

    onDestroy()
    { 
        this.myDestroy();
    }
    
    private init(): void
    {
        this.initPos();
    }
    
    private myDestroy(): void
    { 

    }

    private initPos(): void
    { 
        this._spriteTrans = this._sprite.getComponent(UITransform);
        const minPosNode = this.createNode();
        const maxPosNode = this.createNode();
        const centerPosNode = this.createNode();

        centerPosNode.setPosition(Vec3.ZERO);
        const width = centerPosNode.worldPosition.x * 2;
        const height = centerPosNode.worldPosition.y * 2;
        const originalPos = new Vec2(width / 2 * -1, height / 2 * -1);

        const minPos: Vec2 = new Vec2(originalPos.x + width * DisplayImg.minXRatio, originalPos.y + height * DisplayImg.minYRatio);
        const maxPos: Vec2 = new Vec2(originalPos.x + width * DisplayImg.maxXRatio, originalPos.y + height * DisplayImg.maxYRatio);
        const centerPos = new Vec2((minPos.x + maxPos.x) / 2, (minPos.y + maxPos.y) / 2);
        this._width = maxPos.x - minPos.x;
        this._height = maxPos.y - minPos.y;

        minPosNode.setPosition(new Vec3(minPos.x, minPos.y, 0));
        maxPosNode.setPosition(new Vec3(maxPos.x, maxPos.y, 0));
        centerPosNode.setPosition(new Vec3(centerPos.x, centerPos.y, 0))
        this._spriteTrans.node.setPosition(new Vec3(centerPos.x, centerPos.y, 0));
        this._spriteTrans.setContentSize(new Size(this._width, this._height));

        minPosNode.destroy();
        maxPosNode.destroy();
        centerPosNode.destroy();
    }

    // 将Sprite尽量铺满给定区域
    public setSprite(sprite: SpriteFrame): void
    {  
        let w = sprite.width;
        let h = sprite.height;
        if (this._width/this._height > w/ h)
        {
            w = w * this._height / h;
            h = this._height;
        }
        else
        { 
            h = h * this._width / w;
            w = this._width;
        }

        this._sprite.spriteFrame = sprite;
        this._spriteTrans.setContentSize(new Size(w, h));
    }

    private createNode(): Node
    { 
        const node = new Node();
        node.setParent(this._sprite.node.parent);
        return node;
    }
}

相关文章

  • CocosCreator中,将任意大小的图片完整显示在屏幕指定区

    说明 通过两个点(左下、右上)的位置设定指定区域:minXRatio、maxXRatio、minYRatio、ma...

  • 三、画面撕裂及卡顿问题分析

    1. 图片显示不完整 原因: 图片被渲染到帧缓冲区后,下一次屏幕刷新的时候, 会讲帧缓冲区的内容显示到屏幕上。 如...

  • UIWebView的使用

    实现5个功能1 在屏幕中显示指定的网页2 控制屏幕中的网页3 在网页中加载显示PDF,Word,和JPEG图片4 ...

  • iOS image缩放和剪切

    image缩放 将图片缩放到指定的CGSize大小代码如下: image剪切 从图片中按指定的位置大小截取图片的一...

  • OpenGL 纹理初探

    这里的纹理,我们可以暂时粗暴的理解它指的就是图片。图片在显示的过程中,都是解码成位图,最后显示在屏幕上的。其大小计...

  • 图片任意截屏的实现

    功能:任意一张图片,通过触摸屏幕,可以剪切任意大小的子图片。思路:1.用手势+重绘图片实现;2.手势控制截图的区域...

  • #PPT365# 080 图片透明度

    将图片填充到相同大小的形状里,图片的透明度就可以任意调整了

  • iOS 裁剪图片

    按大小裁剪为指定的尺寸并解决图片裁剪之后显示不正确的问题

  • iOS三种切圆角的方式对比,结果我震惊了...

    离屏渲染的概念:先在屏幕外面创建新的缓冲区,然后渲染到纹理中,最后将结果渲染到当前显示屏幕的帧缓冲区中。那么为什么...

  • OpenGL 纹理相关API

    图片在屏幕上的显示,最终都是解码成位图,然后进行显示的。一个图形在帧缓存区中的存储空间,可以根据如下公式计算,图像...

网友评论

      本文标题:CocosCreator中,将任意大小的图片完整显示在屏幕指定区

      本文链接:https://www.haomeiwen.com/subject/jkrltdtx.html