Unity 划线 - 使用Image实现划线

###unity使用Image实现划线功能
unity中划线的方式有很多,LineRender、OpenGL、记录像素点等方式都可以实现划线的功能。如想了解其他划线方式,请看我的另一篇文章 =>
Unity(OpenGL)实现“阴阳师画符”、划线功能:http://blog.csdn.net/YuAnHandSome/article/details/78366250
下面是一个利用Image划线的展示GIF
Unity 划线 - 使用Image实现划线_第1张图片

下面就来分享用Image画图的思路:
要想画一条直线,就是把连个点连起来,确定起点后,动态设置终点,再动态连接起点和终点,就能实现一条跟着鼠标移动的线段。在OpenGL中划线,是把两点之间用像素点填充。
而用Image划线的方式,则是把Image从起点拉伸到终点,也就是设置Image的RectTransForm组件。主要是设置其中的sizeDelta属性、Rotation属性。

下面详细介绍一下用Image划线的步骤:
1、鼠标按下时候记录一个startPosition;
2、创建一个Image,设置它的RectTransform和Image组件。
####注意:
(1)RectTransform中pivot(轴点)要设置为左边中间,即Vector2(0, 0.5f),下图中蓝色的点即为Image的轴点,Image旋转的时候就会围绕着这个点旋转。
Unity 划线 - 使用Image实现划线_第2张图片
(2)Image的raycastTarget属性要设置为false,否则在鼠标移动过程中,线段会发生检测,若与其他UI存在层级冲突,会影响其他UI控件的事件检测。
3、鼠标拖动过程中,动态修改endPosition,计算出要改变的size和angle
Unity 划线 - 使用Image实现划线_第3张图片
由startPosition和endPosition做差和得出向量durationPosition,在虚线形成的三角形内。可通过数学计算得出angle的角度,也就是Image要旋转的角度,durationPosition的模就是Image的宽度(高度由自己定义)。这样动态计算后赋值给相应属相,就能实现展示的效果。
4、鼠标抬起时要进行的操作,在这里可以根据自己需要进行相应的调整或者操作。

以上就是利用Image实现划线功能的思路,可以根据自己的需求在鼠标的不同事件中做自己想做的事情,以上就是最基本的实现划线功能。大家可以扩展很多!

最后附上代码,仅供参考!

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using UnityEngine.Events;

public class DrawLineUseImage : MonoBehaviour {
    [Header("线宽度")]
    public float lineWidth = 3f;
    [Header("线颜色")]
    public Color lineColor = Color.red;
    void Start () {
        EventTrigger testET = gameObject.AddComponent();
        testET.triggers = new List();
        EventTrigger.Entry entryDown = new EventTrigger.Entry();
        EventTrigger.Entry entryUp = new EventTrigger.Entry();
        EventTrigger.Entry entryDrag = new EventTrigger.Entry();
        entryDown.eventID = EventTriggerType.PointerDown;
        entryUp.eventID = EventTriggerType.PointerUp;
        entryDrag.eventID = EventTriggerType.Drag;
        entryDown.callback = new EventTrigger.TriggerEvent();
        entryUp.callback = new EventTrigger.TriggerEvent();
        entryDrag.callback = new EventTrigger.TriggerEvent();
        // 线段起点、终点
        Vector3 startPos = Vector3.zero;
        Vector3 endPos = Vector3.zero;

        GameObject lineObj = null;
        RectTransform lineObjRT = null;
        // 按下回调
        UnityAction downCB = new UnityAction((BaseEventData bed) => {
            lineObj = new GameObject("LineObj");
            lineObj.SetActive(false);
            lineObjRT = lineObj.AddComponent();
            lineObjRT.pivot = new Vector2(0, 0.5f);
            lineObjRT.localScale = Vector3.one;
            Image lineObjImg = lineObj.AddComponent();
            lineObjImg.color = lineColor;
            lineObjImg.raycastTarget = false;
            lineObjRT.SetParent(transform);
            startPos = Input.mousePosition;
            lineObjRT.position = startPos;
            lineObjRT.sizeDelta = Vector2.zero;
            lineObj.SetActive(true);
        });
        // 抬起回调
        UnityAction upCB = new UnityAction((BaseEventData bed) => {
            //lineObj.SetActive(false);
        });
        // 拖拽回调
        UnityAction dragCB = new UnityAction((BaseEventData bed) => {
            endPos = Input.mousePosition;
            Vector3 durationPos = endPos - startPos;
            lineObjRT.sizeDelta = new Vector2(durationPos.magnitude, lineWidth);
            float angle = Mathf.Atan2(durationPos.y, durationPos.x) * Mathf.Rad2Deg;
            lineObjRT.localRotation = Quaternion.Euler(0, 0, angle);
        });

        // 绑定事件
        entryDown.callback.AddListener(downCB);
        entryUp.callback.AddListener(upCB);
        entryDrag.callback.AddListener(dragCB);
        testET.triggers.Add(entryDown);
        testET.triggers.Add(entryUp);
        testET.triggers.Add(entryDrag);
	}

}

其他

更多Blog请见:https://yiyuan1130.github.io/
Github地址:https://github.com/yiyuan1130

你可能感兴趣的:(技术分享,Unity3D,unity,游戏开发,ui)