# 【Unity3D-UGUI应用篇】（八）Image实现画线、画三角形、画正方形、画圆

·  阅读 589

## 二、使用Image画线

（2）编写代码DrawLine.cs

``````using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

/// <summary>
/// 挂载在Panel上
/// </summary>
public class DrawLine : MonoBehaviour, IPointerDownHandler, IDragHandler
{
public Image image;//画线的Image
public Vector2 rectA;//起点
public Vector2 rectB;//终点

//划线功能
void DrawStraightLine(Image image, Vector2 a, Vector2 b)
{
float distance = Vector2.Distance(a, b);                                    //求距离
float angle = Vector2.SignedAngle(a - b, Vector2.left);                     //求夹角
image.GetComponent<RectTransform>().anchoredPosition = (a + b) / 2;
image.GetComponent<RectTransform>().sizeDelta = new Vector2(distance, 5);   //长度，宽度
image.transform.localRotation = Quaternion.AngleAxis(-angle, Vector3.forward);
}

public void OnPointerDown(PointerEventData eventData)
{
Vector2 startPoint = new Vector2(eventData.position.x - 960, eventData.position.y - 540);
rectA = startPoint;
}

public void OnDrag(PointerEventData eventData)
{
Vector2 endPoint = new Vector2(eventData.position.x - 960, eventData.position.y - 540);
rectB = endPoint;
DrawStraightLine(image, rectA, rectB);
}
}

（3）将脚本挂载在Panel，然后将Image拖到对应卡槽中即可。 （4）运行程序

## 三、使用Image画三角形

``````using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

/// <summary>
/// 挂载在Panel上
/// </summary>
public class DrawLine1 : MonoBehaviour, IPointerDownHandler, IDragHandler,IPointerUpHandler
{
public Image image;//画线的Image
public Image image1;//画线的Image
public Image image2;//画线的Image
private Vector2 rectOne;//第一个点
private Vector2 rectTwo;//第二个点
private Vector2 rectThree;//第三个点
private int lineIndex = 0;

//划线功能
void DrawStraightLine(Image image, Vector2 a, Vector2 b)
{
float distance = Vector2.Distance(a, b);                                    //求距离
float angle = Vector2.SignedAngle(a - b, Vector2.left);                     //求夹角
image.GetComponent<RectTransform>().anchoredPosition = (a + b) / 2;
image.GetComponent<RectTransform>().sizeDelta = new Vector2(distance, 5);   //长度，宽度
image.transform.localRotation = Quaternion.AngleAxis(-angle, Vector3.forward);
}

void DrawStraightLine1(Image image, Vector2 a, Vector2 b)
{
float distance = Vector2.Distance(a, b);                                    //求距离
float angle = Vector2.SignedAngle(a - b, Vector2.left);                     //求夹角
image1.GetComponent<RectTransform>().anchoredPosition = (a + b) / 2;
image1.GetComponent<RectTransform>().sizeDelta = new Vector2(distance, 5);   //长度，宽度
image1.transform.localRotation = Quaternion.AngleAxis(-angle, Vector3.forward);
}

void DrawStraightLine2(Image image, Vector2 a, Vector2 b)
{
float distance = Vector2.Distance(a, b);                                    //求距离
float angle = Vector2.SignedAngle(a - b, Vector2.left);                     //求夹角
image2.GetComponent<RectTransform>().anchoredPosition = (a + b) / 2;
image2.GetComponent<RectTransform>().sizeDelta = new Vector2(distance, 5);   //长度，宽度
image2.transform.localRotation = Quaternion.AngleAxis(-angle, Vector3.forward);
}

public void OnPointerDown(PointerEventData eventData)
{
if (lineIndex == 0)
{
Vector2 startPoint = new Vector2(eventData.position.x - 960, eventData.position.y - 540);
rectOne = startPoint;
}
}

public void OnPointerUp(PointerEventData eventData)
{
if (lineIndex == 0)
{
lineIndex = 1;
}
else if (lineIndex == 1)
{
lineIndex = 2;
DrawStraightLine2(image, rectThree, rectOne);
}
}

public void OnDrag(PointerEventData eventData)
{
if (lineIndex == 0)
{
Vector2 endPoint = new Vector2(eventData.position.x - 960, eventData.position.y - 540);
rectTwo = endPoint;
DrawStraightLine(image, rectOne, rectTwo);
}
else if(lineIndex == 1)
{
Vector2 endPoint = new Vector2(eventData.position.x - 960, eventData.position.y - 540);
rectThree = endPoint;
DrawStraightLine1(image, rectTwo, rectThree);
}
}
}

## 四、使用Image画四边形、正方形

``````using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

/// <summary>
/// 挂载在Panel上
/// </summary>
public class DrawLine2 : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler
{
public Image image;//画线的Image
public Image image1;//画线的Image
public Image image2;//画线的Image
public Image image3;//画线的Image
private Vector2 rectOne;//第一个点
private Vector2 rectTwo;//第二个点
private Vector2 rectThree;//第三个点
private Vector2 rectFour;//第四个点

//划线功能
void DrawStraightLine(Image image, Vector2 a, Vector2 b)
{
float distance = Vector2.Distance(a, b);                                    //求距离
float angle = Vector2.SignedAngle(a - b, Vector2.left);                     //求夹角
image.GetComponent<RectTransform>().anchoredPosition = (a + b) / 2;
image.GetComponent<RectTransform>().sizeDelta = new Vector2(distance, 5);   //长度，宽度
image.transform.localRotation = Quaternion.AngleAxis(-angle, Vector3.forward);
}

void DrawStraightLine1(Image image, Vector2 a, Vector2 b,Vector2 c,Vector2 d)
{
float distance = Vector2.Distance(a, b);                                    //求距离
float angle = Vector2.SignedAngle(a - b, Vector2.left);                     //求夹角
image.GetComponent<RectTransform>().anchoredPosition = (a + b) / 2;
image.GetComponent<RectTransform>().sizeDelta = new Vector2(distance, 5);   //长度，宽度
image.transform.localRotation = Quaternion.AngleAxis(-angle, Vector3.forward);

float distance1 = Vector2.Distance(b, c);                                    //求距离
float angle1 = Vector2.SignedAngle(b - c, Vector2.left);                     //求夹角
image1.GetComponent<RectTransform>().anchoredPosition = (b + c) / 2;
image1.GetComponent<RectTransform>().sizeDelta = new Vector2(distance1, 5);   //长度，宽度
image1.transform.localRotation = Quaternion.AngleAxis(-angle1, Vector3.forward);

float distance2 = Vector2.Distance(c, d);                                    //求距离
float angle2 = Vector2.SignedAngle(c - d, Vector2.left);                     //求夹角
image2.GetComponent<RectTransform>().anchoredPosition = (c + d) / 2;
image2.GetComponent<RectTransform>().sizeDelta = new Vector2(distance2, 5);   //长度，宽度
image2.transform.localRotation = Quaternion.AngleAxis(-angle2, Vector3.forward);

float distance3 = Vector2.Distance(d, a);                                    //求距离
float angle3 = Vector2.SignedAngle(d - a, Vector2.left);                     //求夹角
image3.GetComponent<RectTransform>().anchoredPosition = (d + a) / 2;
image3.GetComponent<RectTransform>().sizeDelta = new Vector2(distance3, 5);   //长度，宽度
image3.transform.localRotation = Quaternion.AngleAxis(-angle3, Vector3.forward);
}

public void OnPointerDown(PointerEventData eventData)
{
Vector2 startPoint = new Vector2(eventData.position.x - 960, eventData.position.y - 540);
rectOne = startPoint;
}

public void OnPointerUp(PointerEventData eventData)
{
if (rectOne.y - rectTwo.y > 5)
{
float distance = Vector2.Distance(rectOne, rectTwo);
Vector2 c = new Vector2(rectOne.x + distance, rectOne.y);
Vector2 d = new Vector2(rectTwo.x + distance, rectTwo.y);
DrawStraightLine1(image, rectOne, rectTwo, d, c);
}
else
{
float distance = Vector2.Distance(rectOne, rectTwo);
Vector2 c = new Vector2(rectOne.x , rectOne.y- distance);
Vector2 d = new Vector2(rectTwo.x , rectTwo.y - distance);
DrawStraightLine1(image, rectOne, rectTwo, d, c);
}
}

public void OnDrag(PointerEventData eventData)
{
Vector2 endPoint = new Vector2(eventData.position.x - 960, eventData.position.y - 540);
rectTwo = endPoint;
DrawStraightLine(image, rectOne, rectTwo);
}
}

## 五、使用UGUI VertexHelper画圆

``````using UnityEngine;
using UnityEngine.UI;

public static class ChartUtilsPie
{
//画圆形  其实就是画三角形
public static void DrawCircle(VertexHelper vh, Vector2 circlepoint, float r, int segments, float startdegree, float enddegree)
{
float startangle = startdegree * Mathf.Deg2Rad;//代表多少多少角度*1的弧度
float angle = (enddegree - startdegree) * Mathf.Deg2Rad / segments;
Vector2 p1, p2;
p1 = new Vector2(circlepoint.x + r * Mathf.Sin(startangle), circlepoint.y + r * Mathf.Cos(startangle));
for (int i = 1; i <= segments; i++)
{
p2 = new Vector2(circlepoint.x + r * Mathf.Sin(startangle + angle * i), circlepoint.y + r * Mathf.Cos(startangle + angle * i));
DrawTriangle(vh, circlepoint, p1, p2, Color.red);
p1 = p2;
}
}

//画三角
public static void DrawTriangle(VertexHelper vh, Vector3 p1, Vector3 p2, Vector3 p3, Color32 color)
{
UIVertex vertex1 = new UIVertex();
vertex1.position = p1;
vertex1.color = color;
vertex1.uv0 = Vector2.zero;

UIVertex vertex2 = new UIVertex();
vertex2.position = p2;
vertex2.color = color;
vertex2.uv0 = Vector2.zero;

UIVertex vertex3 = new UIVertex();
vertex3.position = p3;
vertex3.color = color;
vertex3.uv0 = Vector2.zero;

int index = vh.currentIndexCount;
vh.AddTriangle(index, index + 1, index + 2);
}
}

DrawTriangle画三角的函数没啥好说的，就是三个点，中心点也是圆的圆心，然后三角形的两个点，以及两个点连成的线就是圆的弧，实现过程如图所示： 所以，理论上这个三角形越多这个圆就越圆。

DrawCircle这个函数就是计算生成三角形的三个点。

x=a+r cosθ y=b+r sinθ（θ∈ [0，2π) ） (a,b) 为圆心坐标，r 为圆半径，θ 为参数，(x,y) 为经过点的坐标

p1 = new Vector2(circlepoint.x + r * Mathf.Sin(startangle), circlepoint.y + r * Mathf.Cos(startangle)); p2 = new Vector2(circlepoint.x + r * Mathf.Sin(startangle + angle * i), circlepoint.y + r * Mathf.Cos(startangle + angle * i));

``````using UnityEngine.UI;

{
protected override void OnPopulateMesh(VertexHelper vh)
{
vh.Clear();
DrawCircleShow(vh);
}
protected virtual void DrawCircleShow(VertexHelper vh)
{

}
}

``````using UnityEngine;
using UnityEngine.UI;

public class DrawCircle : PieImageBase
{
public float totaldegree = 360;
public int segments = 0;
private Vector2 circlepoint = Vector2.zero;

protected override void DrawCircleShow(VertexHelper vh)
{
vh.Clear();