主要的代码:
public static readonly Vector2[] s_VertScratch = new Vector2[4]; public static readonly Vector2[] s_UVScratch = new Vector2[4]; private void GenerateSlicedSprite(VertexHelper toFill) { if (!hasBorder) { GenerateSimpleSprite(toFill, false); return; } Vector4 outer, inner, padding, border; if (activeSprite != null) { outer = Sprites.DataUtility.GetOuterUV(activeSprite); inner = Sprites.DataUtility.GetInnerUV(activeSprite); padding = Sprites.DataUtility.GetPadding(activeSprite); border = activeSprite.border; } else { outer = Vector4.zero; inner = Vector4.zero; padding = Vector4.zero; border = Vector4.zero; } Rect rect = GetPixelAdjustedRect(); Vector4 adjustedBorders = GetAdjustedBorders(border / pixelsPerUnit, rect); padding = padding / pixelsPerUnit; s_VertScratch[0] = new Vector2(padding.x, padding.y); s_VertScratch[3] = new Vector2(rect.width - padding.z, rect.height - padding.w); s_VertScratch[1].x = adjustedBorders.x; s_VertScratch[1].y = adjustedBorders.y; s_VertScratch[2].x = rect.width - adjustedBorders.z; s_VertScratch[2].y = rect.height - adjustedBorders.w; for (int i = 0; i < 4; ++i) { s_VertScratch[i].x += rect.x; s_VertScratch[i].y += rect.y; } s_UVScratch[0] = new Vector2(outer.x, outer.y); s_UVScratch[1] = new Vector2(inner.x, inner.y); s_UVScratch[2] = new Vector2(inner.z, inner.w); s_UVScratch[3] = new Vector2(outer.z, outer.w); toFill.Clear(); for (int x = 0; x < 3; ++x) { int x2 = x + 1; for (int y = 0; y < 3; ++y) { if (!m_FillCenter && x == 1 && y == 1) continue;
int y2 = y + 1; AddQuad(toFill, new Vector2(s_VertScratch[x].x, s_VertScratch[y].y), new Vector2(s_VertScratch[x2].x, s_VertScratch[y2].y), color, new Vector2(s_UVScratch[x].x, s_UVScratch[y].y), new Vector2(s_UVScratch[x2].x, s_UVScratch[y2].y)); } } }
Image的九宫格绘制涉及到了2种情况:
1) Sprite设置了9宫格,没有被裁掉空白像素
9个quad绘制顺序,和s_VertScratch所对应的顶点。
2) Sprite设置了9宫格,也被裁掉了空白像素
outerUV就是裁掉空白像素后在贴图上的位置
innerUV.xy = outerUV.xy - 左下角裁掉的空白像素大小 + 九宫格Left_Bottom的大小
innerUV.zw = outerUV.zw - 右上角裁掉的空白像素的大小 + 九宫格Right_Top的大小
这种情况Image的源码实现有点bug,会把边上的图片也给显示出来
s_VertScratch所对应的顶点
解决办法:9宫格的图片,设置成不要裁掉空白区域