Curve 曲线 工具
最近研究了曲线绘制的工具,主要是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 曲线 工具的更多相关文章
- canvas基础[二]教你编写贝塞尔曲线工具
贝塞尔曲线 bezierCurveTo 在线工具 https://canvature.appspot.com/ [感觉这个好用一些] https://blogs.sitepointstatic.com ...
- iOS - Quartz 2D 贝塞尔曲线
1.贝塞尔曲线 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支 ...
- javascript -- canvas绘制曲线
绘制曲线有几种思路: 1.通过quadraticCurveTo(controlX, controlY, endX, endY)方法来绘制二次曲线 2.通过bezierCurveTo(controlX1 ...
- canvas教程(三) 绘制曲线
经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...
- Android - Animation 贝塞尔曲线之美
概述 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计.贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算 ...
- Envelope几何对象 Curve对象几何对象 Multipatch几何对象 Geometry集合接口 IGeometryCollection接口
Envelope是所有几何对象的外接矩形,用于表示几何对象的最小边框,所有的几何对象都有一个Envelope对象,IEnvelope是Envelope对象的主要接口,通过它可以获取几何对象的XMax, ...
- WPF将点列连接成光滑曲线——贝塞尔曲线
原文:WPF将点列连接成光滑曲线--贝塞尔曲线 背景 最近在写一个游戏场景编辑器,虽然很水,但是还是遇到了不少问题.连接离散个点列成为光滑曲线就是一个问题.主要是为了通过关键点产生2D的赛道场景.总之 ...
- Canvas 线性图形(三):曲线
前言 画曲线要用到二次贝塞尔曲线或三次贝塞尔曲线.贝塞尔曲线是计算机图形学中相当重要的参数曲线,在一些比较成熟的位图软件中也有贝塞尔曲线工具,如 PhotoShop. 二次贝塞尔曲线 二次贝塞尔曲线在 ...
- truetype技术和矢量字库的技术原理及实现(转)
源:truetype技术和矢量字库的技术原理及实现 广泛汉字矢量字库(HZKSLxxJ)格式 在矢量字库中,每个汉字都是以128 X 128点阵制成矢量数据.每个汉字 ...
随机推荐
- js vue 在页面中将摄像头放在一个标签里展示,(模仿手机拍照功能)
1.HTML <video id="video" autoplay class="fileImg"></video> <canva ...
- excel 批量上传图片
1.在excel中 输入公式 ="<table><img src=""D:\素材\"&A2&".jpeg&quo ...
- 【Mybatis】【3】mybatis Example Criteria like 模糊查询
正文: 在Java中使用Mybatis自动生成的方法,like需要自己写通配符 public List<TableA> query(String name) { Example examp ...
- React文档(二十)不使用JSX
JSX并不是使用React的一个强制需求.当你不需要在你的构造环境里设置编译那么不使用JSX会很方便. 每一个JSX元素只是调用React.createElement(componnet, props ...
- 在命令行启动vscode
1.windows使用 code . 命令打开vscode 1.打开vscode安装位置,进入bin文件夹,复制路径 eg:E:\Microsoft VS Code\bin:2.回到桌面,右键我的电脑 ...
- 中国建设工程造价管理系统 http://zaojiasys.jianshe99.com/cecaopsys/
建造师造价管理系统漏洞提示: 可以绕过,直接进入后台,为了安全起见,我就不多说了,. 里面的数据,从小学,中学,高中,大学,户口,电话,身份等, 很全, 本人没有破坏任何数据,
- html5 的存储
html5提供了很多存储的功能,诸如localStorage,sessionStorage,indexedDB,还有离线缓存等,本次主要介绍离线缓存跟本地存储. 离线缓存 使用离线存储可以缓存部分文 ...
- ThinkPHP5.0 开发手册
ThinkPHP5.0开发手册地址 https://www.kancloud.cn/manual/thinkphp5/118003 此博文仅仅作为个人笔记存储,没有广告,宣传的意图
- Windows10 搭建JAVA环境变量
系统:Windows10 软件:Java SE 8 配置详细过程 1.“此电脑”,右键→“属性,选择“高级系统设置”(也可从控制面板,系统和安全,系统,找到此页) 2.选择环境变量,再系统环境变量 3 ...
- Python_Mix*OS模块,序列化模块种的json,pickle
os.path.basename(path)返回path最后的文件名,如何path以/或\结尾,那么就会返回空值,即os.path.split(path)的第一个元素 ret = os.path.ba ...