Unity 划线 - 使用Image实现划线

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

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

下面详细介绍一下用Image划线的步骤：
1、鼠标按下时候记录一个startPosition；
2、创建一个Image，设置它的RectTransform和Image组件。
####注意：
（1）RectTransform中pivot(轴点)要设置为左边中间，即Vector2(0, 0.5f),下图中蓝色的点即为Image的轴点，Image旋转的时候就会围绕着这个点旋转。

（2）Image的raycastTarget属性要设置为false，否则在鼠标移动过程中，线段会发生检测，若与其他UI存在层级冲突，会影响其他UI控件的事件检测。
3、鼠标拖动过程中，动态修改endPosition，计算出要改变的size和angle

由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<EventTrigger>();
        testET.triggers = new List<EventTrigger.Entry>();
        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<BaseEventData> downCB = new UnityAction<BaseEventData>((BaseEventData bed) => {
            lineObj = new GameObject("LineObj");
            lineObj.SetActive(false);
            lineObjRT = lineObj.AddComponent<RectTransform>();
            lineObjRT.pivot = new Vector2(0, 0.5f);
            lineObjRT.localScale = Vector3.one;
            Image lineObjImg = lineObj.AddComponent<Image>();
            lineObjImg.color = lineColor;
            lineObjImg.raycastTarget = false;
            lineObjRT.SetParent(transform);
            startPos = Input.mousePosition;
            lineObjRT.position = startPos;
            lineObjRT.sizeDelta = Vector2.zero;
            lineObj.SetActive(true);
        });
        // 抬起回调
        UnityAction<BaseEventData> upCB = new UnityAction<BaseEventData>((BaseEventData bed) => {
            //lineObj.SetActive(false);
        });
        // 拖拽回调
        UnityAction<BaseEventData> dragCB = new UnityAction<BaseEventData>((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