UGUI绘制动态曲线

本文实例为大家分享了UGUI绘制动态曲线的具体代码,供大家参考,具体内容如下

前言

等有空再补详细说明,先上代码。看官自行阅读

代码

UICurveData 类,用于存放点数据的基础结构。

public class UICurveData
{
 #region [Fields]
 public List<Vector2> Postion = new List<Vector2>();
 public Color Ccolor;
 public float Thickness = 1;
 #endregion

 #region [PublicTools]
 public void Addpos(float varX, float varY)
 {
  Addpos(new Vector2(varX, varY));
 }
 public void Addpos(Vector2 varV2)
 {
  Postion.Add(varV2);
 }
 #endregion

}

UICurve 负责构建顶点数据,mesh。

public class UICurve : MaskableGraphic
{
 #region [Fields]
 private Dictionary<int, UICurveData> mCurveData = new Dictionary<int, UICurveData>();
 #endregion

 #region [Inherit]
 protected override void OnPopulateMesh(VertexHelper varVerHeler)
 {
  varVerHeler.Clear();

  foreach (var tempKvp in mCurveData)
  {
   var tempUICurveData = tempKvp.Value;
   if (tempUICurveData.Postion.Count < 2)
   {
    continue;
   }
   for (int i = 1; i < tempUICurveData.Postion.Count; i++)
   {
    UIVertex[] verts = new UIVertex[4];

    float x1 = tempUICurveData.Postion[i - 1].x;
    float y1 = tempUICurveData.Postion[i - 1].y;
    float x2 = tempUICurveData.Postion[i].x;
    float y2 = tempUICurveData.Postion[i].y;

    float xd = (y2 - y1) / Mathf.Sqrt(Mathf.Pow(x2 - x1, 2) * Mathf.Pow(y2 - y1, 2)) * tempKvp.Value.Thickness / 2;
    float yd = (x2 - x1) / Mathf.Sqrt(Mathf.Pow(x2 - x1, 2) * Mathf.Pow(y2 - y1, 2)) * tempKvp.Value.Thickness / 2;

    int idx = 0;
    verts[idx].position = new Vector3(tempUICurveData.Postion[i - 1].x - xd, tempUICurveData.Postion[i - 1].y + yd);
    verts[idx].color = tempUICurveData.Ccolor;
    verts[idx].uv0 = Vector2.zero;

    idx++;
    verts[idx].position = new Vector3(tempUICurveData.Postion[i].x - xd, tempUICurveData.Postion[i].y + yd);
    verts[idx].color = tempUICurveData.Ccolor;
    verts[idx].uv0 = Vector2.zero;

    idx++;
    verts[idx].position = new Vector3(tempUICurveData.Postion[i].x + xd, tempUICurveData.Postion[i].y - yd);
    verts[idx].color = tempUICurveData.Ccolor;
    verts[idx].uv0 = Vector2.zero;

    idx++;
    verts[idx].position = new Vector3(tempUICurveData.Postion[i - 1].x + xd, tempUICurveData.Postion[i - 1].y - yd);
    verts[idx].color = tempUICurveData.Ccolor;
    verts[idx].uv0 = Vector2.zero;

    varVerHeler.AddUIVertexQuad(verts);
   }
  }

 }
 #endregion

 #region [PublicTools]
 public void AddCurveData(int varID, UICurveData varCurveData)
 {
  mCurveData.Add(varID, varCurveData);
  SetAllDirty();
 }
 public void Clear()
 {
  mCurveData.Clear();
  SetAllDirty();
 }
 public void RemovePointIDs(params int[] varRemovepoints)
 {
  List<int> tempL = new List<int>();
  tempL.AddRange(varRemovepoints);
  RemovePointIDs(tempL);
 }
 public void RemovePointIDs(List<int> varRemovePoints)
 {
  foreach (var i in varRemovePoints)
  {
   if (!mCurveData.ContainsKey(i)) continue;
   mCurveData.Remove(i);
  }
  SetAllDirty();
 }
 #endregion
}

测试使用

public class TestCurve : MonoBehaviour
{
 void Start()
 {
  var tempCurve = this.gameObject.AddComponent<UICurve>();
  UICurveData tempcd = new UICurveData();
  tempcd.Ccolor = Color.yellow;
  tempcd.Thickness = 2;
  for (int i = 0; i < 360; i++)
  {
   tempcd.Addpos(i * 2,(float)Mathf.Cos(i));
  }
  tempCurve.AddCurveData(1,tempcd);
 }
}

将该脚本挂在 Canvas 上,运行会看到

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • UGUI绘制多点连续的平滑曲线

    本文实例为大家分享了UGUI绘制平滑曲线的具体代码,供大家参考,具体内容如下 绘制 实现自定义的MaskableGraphic挂载在UGUI的UI节点上 public class UGUIObjectRender : MaskableGraphic { /** * points 为需要穿过的点 * segments 为曲线细分度 * linewidth 为曲线粗细 */ protected override void OnPopulateMesh(VertexHelper vh) { vh.Dr

  • UGUI绘制动态曲线

    本文实例为大家分享了UGUI绘制动态曲线的具体代码,供大家参考,具体内容如下 前言 等有空再补详细说明,先上代码.看官自行阅读 代码 UICurveData 类,用于存放点数据的基础结构. public class UICurveData { #region [Fields] public List<Vector2> Postion = new List<Vector2>(); public Color Ccolor; public float Thickness = 1; #en

  • python绘制动态曲线教程

    从txt种获取数据 并且通过动态曲线显示 import numpy as np import matplotlib.pyplot as plt import matplotlib.animation as animation import time # Fixing random state for reproducibility np.random.seed(196) path = "feed.txt" file = open(path, 'r') data = [] for lin

  • Unity绘制二维动态曲线

    一.前言 之前用Line Render实现过这个动态曲线的绘制,使用这个实在太不方便了,一直寻思怎么在一张图片上通过控制图片的像素值实现曲线的动态绘制.参考了Unity的官网教程实现了这个,效果图如图所示: 这样实现的效果比LineRender 要好,并且不怎么消耗计算和渲染 二.实现 1.代码创建一个背景贴图,并将这个贴图给UGUI的RawImage控件 //创建背景贴图 widthPixels = (int)(Screen.width * width); heightPixels = (in

  • C#实现chart控件动态曲线绘制

    本文实例为大家分享了C#实现chart控件动态曲线绘制的具体代码,供大家参考,具体内容如下 思想 实验室要做一个动态曲线绘制,网上方法很多,但是缺乏完整代码和效果图的整合,往往总是缺少其一,因此整理如下,方便大家编程,节约时间.思路:新建一个队列,利用timer控件,动态的往队列中加入数据,每次触发事件,就相当于将队列中的值全部重新画一遍. 我的目的是做四个点的动态监测,所以代码重复了四次,其实应该用4个线程来做,思路就显得较为清晰了,这也是可以改进的地方. public partial cla

  • Python+pyecharts绘制双动态曲线教程详解

    总体跟官方样例相似,但是官方样例因为部分代码有误无法运行,同时需要了解json,以及前后端知识需要一些时间,因此供大家参考. 这个是views def line_base() -> Line: line = ( Line() .add_xaxis(list(range(10))) .add_yaxis(series_name="专注度", y_axis=[randrange(0, 100) for _ in range(10)],areastyle_opts=opts.AreaS

  • Qt图形图像开发之曲线图模块QCustomplot库生成静态、动态曲线详细教程图解

    Qt曲线图模块QCustomPlot库介绍 QCustomPlot是一个小型的Qt画图标类,支持绘制静态曲线.动态曲线.多重坐标曲线,柱状图,蜡烛图等.只需要在项目中加入头文件qcustomplot.h和qcustomplot.cpp文件,然后使一个widget提升为QCustomPlot类,即可使用. QCustomPlot官网:   http://www.qcustomplot.com/ QCustomPlot下载地址:   http://www.qcustomplot.com/index.

  • 关于Matplotlib绘制动态实时曲线的方法改进指南

    很多时候,我们需要实时的绘制曲线,如实时的绘制串口接收到的数据.最先想到的解决策略是类似于Matlab种的drawnow函数. 在python中Matplotlib库有着和Matlan绘图库相似的功能,但是并没有drawnow这样的函数. 已有的解决方案 通过网上现有的资料 基于Python实现matplotlib中动态更新图片(交互式绘图),可以通过打开Matplotlib的交互模式来实现实时绘图的目的,此时需要用到函数matplotlib.pyplot.ion 存在的问题 通过上述方法实时绘

  • Javascript 绘制 sin 曲线过程附图

    Javascript 绘制 sin 曲线代码如下: <!DOCTYPE html> <html> <head> <style type="text/css"> #MyCanvas { background-color: cornflowerblue; } </style> <script type="text/javascript"> function draw(){ var my_canvas

  • Android Path绘制贝塞尔曲线实现QQ拖拽泡泡

    这两天学习了使用Path绘制贝塞尔曲线相关,然后自己动手做了一个类似QQ未读消息可拖拽的小气泡,效果图如下: 最终效果图 接下来一步一步的实现整个过程. 基本原理 其实就是使用Path绘制三点的二次方贝塞尔曲线来完成那个妖娆的曲线的.然后根据触摸点不断绘制对应的圆形,根据距离的改变改变原始固定圆形的半径大小.最后就是松手后返回或者爆裂的实现. Path介绍: 顾名思义,就是一个路径的意思,Path里面有很多的方法,本次设计主要用到的相关方法有 moveTo() 移动Path到一个指定的点 qua

随机推荐