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);
}
}