[UGUI] The edge of the Tips sticker icon in the game is displayed

Tips sticker icon edge display

Left: When the width on the left is not enough to accommodate the Tips, the Tips are displayed on the right, and the top is aligned with the icon
. Right: When the width on the left is enough to accommodate the Tips, the Tips are displayed on the left, and the top is aligned with the icon.

Get the coordinates of the four vertices of the Mesh

My implementation idea is to obtain the coordinates of the four vertices of the icon, and calculate whether the Tip should be placed on the left or the right according to the coordinates of the vertices on the screen. The
algorithm for obtaining the four vertices is as follows:

    //获取UI元素的屏幕坐标，四个坐标点的顺序为：左下 左上 右上 右下
    public static Vector3[] GetUIScreenPosition(Canvas canvas,RectTransform trans)
    {
        Vector3[] posArray = new Vector3[4];
        if (trans == null)
        {
            Log.Warning("canvas={0}或trans={1} ,为空",canvas,trans);
            posArray[0] = Vector3.zero;
            return posArray;
        }
        //NOTE 如果界面是以Camera方式渲染
        if (canvas && canvas.worldCamera)
        {
            CanvasScaler scaler = canvas.GetComponent<CanvasScaler>();
            //Log.Info("uiName={0},渲染模式为Camera", canvas.name);
            //NOTE 这种方式获取的坐标在图标中心点，计算出四个点的坐标
            var centerPos = canvas.worldCamera.WorldToScreenPoint(trans.position);
          //这里不直接使用canvas.localScale.x，而是通过屏幕大小/设定分辨率 = 缩放系数
            var scaleFact = Screen.width/scaler.referenceResolution.x;
            var iconWidth = trans.sizeDelta.x*scaleFact;
            var iconHeight = trans.sizeDelta.y*scaleFact;
            //找到的点在中心点
            posArray[0] = new Vector3(centerPos.x - iconWidth*0.5f, centerPos.y - iconHeight*0.5f, 0);
            posArray[1] = new Vector3(centerPos.x - iconWidth*0.5f, centerPos.y + iconHeight*0.5f, 0);
            posArray[2] = new Vector3(centerPos.x + iconWidth*0.5f, centerPos.y + iconHeight + iconHeight*0.5f, 0);
            posArray[3] = new Vector3(centerPos.x + iconWidth*0.5f, centerPos.y - iconHeight*0.5f, 0);
//            Log.Info("图标宽度={0},{1} ,中心点={2}",iconWidth,iconHeight,centerPos);
        }
        else
        {
            //Log.Info("uiName={0},渲染模式为Overlay",canvas.name);
            trans.GetWorldCorners(posArray);
        }

        return posArray;
    }

After the world coordinates of the four points of the icon are obtained above, the world coordinates of the Tips can be calculated. Example:
Note: The pivot of the Tips I use is center-aligned

local tipsWidth = self.retRoot.sizeDelta.x * self.canvas.transform.localScale.x
local tipsHeight = self.retRoot.sizeDelta.y * self.canvas.transform.localScale.y
printf("屏幕大小=", Screen.width, ",", Screen.height, " ,Tips宽度=", tipsWidth, ",", tipsHeight)
local posArray = LuaHelper.GetUIScreenPosition(canvas, rectTrans)
local tmpPos = posArray[1]
--for i = 0, posArray.Length-1 do
--    print(posArray[i])
--end
if posArray[1] then
    if posArray[0].x - tipsWidth > 0 then
        if posArray[1].y > tipsHeight then
            print("在屏幕左上区域，顶对齐")
            tmpPos = Vector3(posArray[0].x - tipsWidth * 0.5, posArray[1].y - tipsHeight * 0.5, 0)
        else
            print("在屏幕左下区域，底对齐")
            tmpPos = Vector3(posArray[0].x - tipsWidth * 0.5, posArray[0].y + tipsHeight * 0.5, 0)
        end
    else
        if posArray[1].y > tipsHeight then
            print("在屏幕右上区域，顶对齐")
            tmpPos = Vector3(posArray[2].x + tipsWidth * 0.5, posArray[1].y - tipsHeight * 0.5, 0)
        else
            print("在屏幕右下区域，底对齐")
            tmpPos = Vector3(posArray[2].x + tipsWidth * 0.5, posArray[0].y + tipsHeight * 0.5, 0)
        end
    end
else
    tmpPos = posArray[0]
end
self.retRoot.position = tmpPos

Get the actual size of a UI element

​ When developing under the editor (or when the device resolution is different from the development resolution), the size of the Game area is not the actual resolution size, that is to say, the Width and Height you see from the property panel are different from the actual size of the image. The size is different.

​ So how to get the actual size of an element?

//实际宽度= 宽度 * canvas的缩放值
var viewWidth = retRoot.sizeDelta.x * canvas.transform.localScale.x