最近研究了曲线绘制的工具,主要是2D方程的绘制。综合了许多工具,完成了一下两个脚本。

绘制的工具:

 using UnityEngine;
using System.Collections;
using UnityEngine.UI; public class Curve : MaskableGraphic
{
public Color color;
public float m_LineWidth = ;
[Range(, )]
public int Acc = ;
public System.Func<float, float> xConvert = x=>x;
public System.Func<float, float> yConvert = y => y;
public System.Func<float, float> MainFunc = f => f;
protected override void OnPopulateMesh(VertexHelper vh)
{
var rect = this.rectTransform.rect;
vh.Clear();
Debug.Log(rect.xMin);
Debug.Log(rect.xMax);
Vector2 pos_first = new Vector2(rect.xMin, CalcY() * rect.height+rect.yMin); for (float x = rect.xMin + Acc; x < rect.xMax; x += Acc)
{
Vector2 pos = new Vector2(x, CalcY((x - rect.xMin) / rect.width) * rect.height+rect.yMin);
var quad = GenerateQuad(pos_first, pos); vh.AddUIVertexQuad(quad); pos_first = pos;
} Vector2 pos_last = new Vector2(rect.xMax, CalcY() * rect.height+rect.yMin);
vh.AddUIVertexQuad(GenerateQuad(pos_first, pos_last)); for (int i = ; i < vh.currentVertCount - ; i += )
{
vh.AddTriangle(i + , i + , i + );
vh.AddTriangle(i + , i + , i + );
}
Debug.Log("PopulateMesh..." + vh.currentVertCount);
} //根据曲线组件来计算Y
//**** x 为 (x - rect.xMin) / rect.width) 所以范围 为 0~1
//返回值 为y ,取值范围限定在 0~1;
private float CalcY(float x)
{
return yConvert((MainFunc(xConvert(x))));
} private UIVertex[] GenerateQuad(Vector2 pos1, Vector2 pos2)
{
float dis = Vector2.Distance(pos1, pos2);
float y = m_LineWidth * 0.5f * (pos2.x - pos1.x) / dis;
float x = m_LineWidth * 0.5f * (pos2.y - pos1.y) / dis; if (y <= )
y = -y;
else
x = -x; UIVertex[] vertex = new UIVertex[]; vertex[].position = new Vector3(pos1.x + x, pos1.y + y);
vertex[].position = new Vector3(pos2.x + x, pos2.y + y);
vertex[].position = new Vector3(pos2.x - x, pos2.y - y);
vertex[].position = new Vector3(pos1.x - x, pos1.y - y); for (int i = ; i < vertex.Length; i++)
{
vertex[i].color = color;
} return vertex;
}
}

控制脚本:

 using UnityEngine;
using System.Collections;
using System;
[RequireComponent(typeof(Curve))]
public class CurveItem : MonoBehaviour {
private Curve curve;
private Vector2[] posArray; //绘制谱图x 最小值
[Header("绘制谱图x 最小值")]
public float xMin;
//绘制谱图 x 最大值
[Header("绘制谱图x 最大值")]
public float xMax;
//绘制 谱图 y 最小值
[Header("绘制谱图y 最小值")]
public float yMin;
//绘制谱图 y 最大值
[Header("绘制谱图y 最大值")]
public float yMax;
[Header("绘制谱图取样间隔")]
public float delta;
// Use this for initialization
void Start () {
curve = this.GetComponentInChildren<Curve>();
} #region 主要方法 public void ShowPutu(Func<float, float> func)
{
// DrawLine(LineDrawer.GetSampleArray(func, xMin, xMax, delta));
curve.MainFunc = func;
curve.xConvert = MathTool.GetLinear(, xMin, , xMax);
curve.yConvert = MathTool.GetLinear(yMin, , yMax, 1f);
curve.enabled = false;
curve.enabled = true;
} #endregion #region Test private Func<float, float> func = x=>x*x; [ContextMenu("谱图")]
private void Test()
{
ShowPutu(func);
} #endregion
}

Math工具

     //获取线性方程
public static Func<float, float> GetLinear(float x0, float y0, float x1, float y1)
{
Func<float, float> linear = x =>
{
float a = (y1 - y0) / (x1 - x0);
return x*a+y0-x0*a;
};
return linear;
}

调用以下方法即可。

ShowPutu(Func<float, float> func)

将两个脚本都挂载在Canvas下的一个空物体上。

演示 x=>x*x:

演示 x=>Mathf.Asin(x):

Curve 曲线 工具的更多相关文章

  1. canvas基础[二]教你编写贝塞尔曲线工具

    贝塞尔曲线 bezierCurveTo 在线工具 https://canvature.appspot.com/ [感觉这个好用一些] https://blogs.sitepointstatic.com ...

  2. iOS - Quartz 2D 贝塞尔曲线

    1.贝塞尔曲线 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支 ...

  3. javascript -- canvas绘制曲线

    绘制曲线有几种思路: 1.通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2.通过bezierCurveTo(controlX1 ...

  4. canvas教程(三) 绘制曲线

    经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...

  5. Android - Animation 贝塞尔曲线之美

    概述 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计.贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算 ...

  6. Envelope几何对象 Curve对象几何对象 Multipatch几何对象 Geometry集合接口 IGeometryCollection接口

    Envelope是所有几何对象的外接矩形,用于表示几何对象的最小边框,所有的几何对象都有一个Envelope对象,IEnvelope是Envelope对象的主要接口,通过它可以获取几何对象的XMax, ...

  7. WPF将点列连接成光滑曲线——贝塞尔曲线

    原文:WPF将点列连接成光滑曲线--贝塞尔曲线 背景 最近在写一个游戏场景编辑器,虽然很水,但是还是遇到了不少问题.连接离散个点列成为光滑曲线就是一个问题.主要是为了通过关键点产生2D的赛道场景.总之 ...

  8. Canvas 线性图形(三):曲线

    前言 画曲线要用到二次贝塞尔曲线或三次贝塞尔曲线.贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如 PhotoShop. 二次贝塞尔曲线 二次贝塞尔曲线在 ...

  9. truetype技术和矢量字库的技术原理及实现(转)

    源:truetype技术和矢量字库的技术原理及实现 广泛汉字矢量字库(HZKSLxxJ)格式             在矢量字库中,每个汉字都是以128   X   128点阵制成矢量数据.每个汉字  ...

随机推荐

  1. linux如何查看所有的用户和组信息?

    cat /etc/passwd cat /etc/passwd查看所有的用户信息,详情如下图   [步骤二]cat /etc/passwd|grep 用户名 cat /etc/passwd|grep ...

  2. python kline

    # -*- coding: utf-8 -*- # Qt相关和十字光标 from qtpy.QtGui import * from qtpy.QtCore import * from qtpy imp ...

  3. postman(九):postman接口测试脚本集成到jenkins

    本篇的目的是实现使用jenkins远程执行postman接口测试脚本 准备工作:一台linux服务器(可以用虚拟机搭建一个),linux服务器上安装好node.js.newman,部署好jenkins ...

  4. restful接口定义的几种方式

    GET (SELECT): Retrieve a specific Resource from the Server, or a listing of Resources.        #从服务器检 ...

  5. MySQL中Decimal类型和Float Double的区别 & BigDecimal与Double使用场景

    MySQL中存在float,double等非标准数据类型,也有decimal这种标准数据类型. 其区别在于,float,double等非标准类型,在DB中保存的是近似值,而Decimal则以字符串的形 ...

  6. GT sport真实赛道详解 - Brands Hatch | 伯蘭士赫治GP賽車場

    参考:GT sport所有赛道简介 GT Sport - Tip/Guide For FASTER LAP TIMES (Brands Hatch) 赛道介绍.跑法.赛事网上都有大把的视频. GT s ...

  7. 什么是卷积convolution

    定义 卷积是两个变量在某范围内相乘后求和的结果.如果卷积的变量是序列x(n)和h(n),则卷积的结果 , 其中星号*表示卷积. 当时序n=0时,序列h(-i)是h(i)的时序i取反的结果:时序取反使得 ...

  8. vue2 inheritAttrs、attrs和attrs和listeners使用

    inheritAttrs.attrs和attrs和listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.or ...

  9. PHP以xml形式获取POST数据

    <?php namespace Home\Controller; use Think\Controller; class UrlController extends Controller { / ...

  10. css3选择器和伪类

    元素选择子: * 任何元素 E 与E标签结合的任何元素 E F E的所有派生标签中,有F标签的元素 E > F 或者 E/F E的所有直接的拥有F标签的子类 E + F 所有具有F标签的元素,紧 ...