Unity 基于UGUI的逆向九宫格图片

Posted 雷乌斯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Unity 基于UGUI的逆向九宫格图片相关的知识,希望对你有一定的参考价值。

拉伸的时候四周的切片被拉伸,中央的图片保持不变。

可以用于某些UI处理或者图片镂空处理。

基于Unity2018.4的Image源码。

新建一个类,假设叫ScaleImage,复制所有Image的源码,修改掉报错之后,增加2个float,叫“VerticalCenter”和“HorizontalCenter”,用这2个变量来调整中央格子的位置。再将“GenerateSlicedSprite”函数做如下修改:

private void GenerateSlicedSprite(VertexHelper toFill)

  if (!this.hasBorder)
  
    this.GenerateSimpleSprite(toFill, false);
  
  else
  
    Vector4 vector4_1;
    Vector4 vector4_2;
    Vector4 vector4_3;
    Vector4 vector4_4;
    if ((UnityEngine.Object) this.activeSprite != (UnityEngine.Object) null)
    
      vector4_1 = DataUtility.GetOuterUV(this.activeSprite);
      vector4_2 = DataUtility.GetInnerUV(this.activeSprite);
      vector4_3 = DataUtility.GetPadding(this.activeSprite);
      vector4_4 = this.activeSprite.border;
    
    else
    
      vector4_1 = Vector4.zero;
      vector4_2 = Vector4.zero;
      vector4_3 = Vector4.zero;
      vector4_4 = Vector4.zero;
    
    Rect pixelAdjustedRect = this.GetPixelAdjustedRect();
    Vector4 adjustedBorders = this.GetAdjustedBorders(vector4_4 / this.pixelsPerUnit, pixelAdjustedRect);
    Vector4 vector4_5 = vector4_3 / this.pixelsPerUnit;

    float outWidth = pixelAdjustedRect.width - vector4_5.x - vector4_5.z - this.activeSprite.rect.width + adjustedBorders.x + adjustedBorders.z;
    float leftWidth = outWidth * horizontalCenter;
    float rightWidth = outWidth - leftWidth;

    float outHeight = pixelAdjustedRect.height - vector4_5.y - vector4_5.w - this.activeSprite.rect.height + adjustedBorders.y + adjustedBorders.w;
    float topHeight = outHeight * verticalCenter;
    float bottomHeight = outHeight - topHeight;
    
    
    ScaleImage.s_VertScratch[0] = new Vector2(vector4_5.x, vector4_5.y);
    ScaleImage.s_VertScratch[3] = new Vector2(pixelAdjustedRect.width - vector4_5.z, pixelAdjustedRect.height - vector4_5.w);
    ScaleImage.s_VertScratch[1].x = leftWidth;//adjustedBorders.x;
    ScaleImage.s_VertScratch[1].y = topHeight;//adjustedBorders.y;
    ScaleImage.s_VertScratch[2].x = pixelAdjustedRect.width - rightWidth;//adjustedBorders.z;
    ScaleImage.s_VertScratch[2].y = pixelAdjustedRect.height - bottomHeight;//adjustedBorders.w;
    for (int index = 0; index < 4; ++index)
    
      ScaleImage.s_VertScratch[index].x += pixelAdjustedRect.x;
      ScaleImage.s_VertScratch[index].y += pixelAdjustedRect.y;
    
    ScaleImage.s_UVScratch[0] = new Vector2(vector4_1.x, vector4_1.y);
    ScaleImage.s_UVScratch[1] = new Vector2(vector4_2.x, vector4_2.y);
    ScaleImage.s_UVScratch[2] = new Vector2(vector4_2.z, vector4_2.w);
    ScaleImage.s_UVScratch[3] = new Vector2(vector4_1.z, vector4_1.w);
    toFill.Clear();
    for (int index1 = 0; index1 < 3; ++index1)
    
      int index2 = index1 + 1;
      for (int index3 = 0; index3 < 3; ++index3)
      
        int index4 = index3 + 1;
        ScaleImage.AddQuad(toFill, 
          new Vector2(ScaleImage.s_VertScratch[index1].x, ScaleImage.s_VertScratch[index3].y), 
          new Vector2(ScaleImage.s_VertScratch[index2].x, ScaleImage.s_VertScratch[index4].y), 
          (Color32) this.color, 
          new Vector2(ScaleImage.s_UVScratch[index1].x, ScaleImage.s_UVScratch[index3].y), 
          new Vector2(ScaleImage.s_UVScratch[index2].x, ScaleImage.s_UVScratch[index4].y)
          );
      
    
  

 

 

效果展示:

 

以上是关于Unity 基于UGUI的逆向九宫格图片的主要内容,如果未能解决你的问题,请参考以下文章

Unity-ugui之扩展Image组件Filled模式支持九宫格

ugui 九宫格和图片切割

Unity笔记UGUI的ImageRawImage控件

Unity_原型工具快速转UI工具

UGUI关卡选项界面

巧用九宫格以减少UI资源量