1. 程式人生 > >(裝載)Unity使用UGUI的Image在Canvas中畫直線

(裝載)Unity使用UGUI的Image在Canvas中畫直線

http://www.mamicode.com/info-detail-2392052.html

using System;
using UnityEngine;
using UnityEngine.UI;

public class TestDrawLine : MonoBehaviour
{
    public Image arrow; //Image 素材
    public RectTransform pa; //A點
    public RectTransform pb; //B點


    private void Start()
    {
        var rP = pa.rectTransform().anchoredPosition;
        var tp = pa.position;
        Debug.Log($"A點  Transform P:({tp.x},{tp.y}) RectTransform P :({rP.x},{rP.y})");
    }

    // Update is called once per frame
    void Update()
    {
        arrow.transform.position = pa.position;
        arrow.transform.localRotation = Quaternion.AngleAxis(-GetAngle(), Vector3.forward);
        
        var distance = Vector2.Distance(pb.anchoredPosition, pa.anchoredPosition);
        arrow.rectTransform.sizeDelta = new Vector2(10, Math.Max(1, distance - 30));
    }


    public float GetAngle()
    {
        var dir = pb.position - pa.position;
        var dirV2 = new Vector2(dir.x, dir.y);
        var angle = Vector2.SignedAngle(dirV2, Vector2.down);
        return angle;
    }
}

相關知識點

恩,程式碼沒幾行 但是涉及到的知識點還挺多. 感覺可以當 Unity面試題 來用啊 哈哈.

取得兩個座標點之間的夾角

Vector2.SignedAngle(dirV2, Vector2.down)

這個我之前有寫過,詳情參見 求兩向量在0~360度之間的角度值及實際應用

取得Canvas中元素的x,y座標

我在Start函式有輸出,元素的Transform.positionRectTransform.position(實際應用時候應該取錨點)是有區別的

輸出Log為:

A點 Transform P:(98.82188,194.5938) RectTransform P :(-391,130)

取得Canvas中兩元素的距離

這個主要是要注意使用anchoredPosition,也就是RectTransform座標系下的點座標.使用Transform座標系下的算出距離是錯誤的.

直接

Vector2.Distance($A點2D座標,$B點2D座標)

設定UGUI中Image的寬高

使用sizeDelta函式

arrow.rectTransform.sizeDelta = new Vector2($寬,$高);

元素繞任意軸旋轉

arrow.transform.localRotation = Quaternion.AngleAxis($旋轉角度,$旋轉軸)

恩.. 四元數旋轉 好像也沒啥好說的 :(