二、基本功能实现

通过制作简易的该曲线图形编辑器Demo实现类似于Maya软件中的动画曲线编辑的功能。

在指定的时间轴上插入关键帧设置拖动该关键点来编辑曲线数据。

编辑好的数据导出保存在TXT文本中同时曲线编辑器也可以读取之前导出的TXT文本数据再继续进行编辑。

操作演示

5任意位置添加关键帧、对关键帧数据插值得到曲线、曲线数据导出和导入

3、工程下载链接

https://download.csdn.net/download/panjinliang066333/88112693

全部功能测试代码

https://download.csdn.net/download/panjinliang066333/88103699

二、基本功能实现

①添加pictureBox1图形控件作为曲线图形显示面板添加hHScrollBarX、VScrollBarY控件作为显示面板水平方向、竖直方向移动。

②添加3个Button按钮用作图形面板放大、缩小、和恢复正常。

④添加Label控件用于显示当前鼠标所在曲线图形面板中的坐标位置。

2显示面板代码

dataF.Length){hScrollBarX.Maximum

(int)xLineDatas.Max();}else{hScrollBarX.Maximum

!checkSpline1Show.Checked;timer1.Start();cureDraw

new

pictureBox1.Width);DrawCure();}

②、添加定时器创建定时器事件函数

pictureBox1.Height;cureDraw.Width

pictureBox1.Width;}pictureBox1.Image

cureDraw为自定义封装的类SplineEdit实例对象。

///

(即在objBitmap对象中画图)//根据给定颜色(LightGray)填充图像的矩形区域

Pen(boardColor,

//画边框graphics.FillRectangle(new

width

//填充边框//画X轴,注意图像的原始X轴和Y轴计算是以左上角为原点向右和向下计算的xAxisPoint1.X

xSpace

xAxisPoint1.Y;graphics.DrawLine(new

Pen(new

xAxisPoint2);//画Y轴yAxisPoint1.X

xSpace

yAxisPoint2);//2、面板标题//graphics.DrawString(曲线编辑器,

new

SolidBrush(Color.Black));penDashed.DashStyle

DashStyle.Dash;for

i){//X轴刻度虚线graphics.DrawLine(penDashed,

new

xStr.Length;graphics.DrawString(xStr,

new

ySliceBegin));}//Y轴虚线、刻度文字-正半轴for

(int

i){graphics.DrawLine(penDashed,

new

ySliceBegin));//Y轴刻度值标识文字string

yStr

ySliceBegin));}//Y轴虚线、刻度文字-负半轴for

(int

i){graphics.DrawLine(penDashed,

new

ySliceBegin));//Y轴刻度值标识文字string

yStr

yStr.Length;graphics.DrawString(yStr,

new

ySliceBegin));}//4、原点刻度说明graphics.DrawString(0,

new

分别添加hScrollBarX_ValueChanged、vScrollBarY_ValueChanged控件事件函数

private

hScrollBarX_ValueChanged(object

sender,

cureDraw.XSliceValue;Invalidate();

//更新界面}

vScrollBarY_ValueChanged(object

sender,

cureDraw.YSliceValue;Invalidate();

//更新界面}

cureDraw.XSliceBeginX轴数值0点在屏幕起始像素位置

cureDraw.YSliceBeginY轴数值0点在屏幕起始像素位置

4面板放大、缩小、恢复正常显示功能实现

分别添加按钮事件函数btnScaleBigger_Click、btnScaleSmaller_Click、btnReset_Click

btnScaleBigger_Click

①控件pictureBox1上添加pictureBox1_MouseMove事件函数

private

//鼠标在pictureBox1中Y轴坐标值fMouseToValueX

cureDraw.MousePosToValue_X(ex);mouseToValueX

(int)Math.Round(cureDraw.MousePosToValue_X(ex));mouseToValueY

cureDraw.MousePosToValue_Y(ey);if

(mouseToValueX

mouseToValueY.ToString();labMousePos.Location

new

mouseToValueY.ToString();labMousePos.Location

new

②cureDraw.MousePosToValue_X鼠标在pictureBox1面板上X轴的像素值转换为坐标系X轴的值

///

③cureDraw.MousePosToValue_Y鼠标在pictureBox1面板上Y轴的像素值转换为坐标系Y轴的值

///

曲线1显示函数需要分别提供X轴、Y轴的坐标位置数组且两个数组长度必须相等

public

曲线2显示函数只需要曲线Y轴上位置数组。

(数据的长度即为X轴数据)

public

分别添加曲线1按钮、曲线2按钮事件函数btnDrawSpline1_Click、btnDrawSpline2_Click

btnDrawSpline1_Click

checkSpline1Show.Checked;//1、生成sin曲线保存x、y坐标位置for

(int

分别添加曲线1、曲线2显示复选框事件函数heckSpline1Show_CheckedChanged、checkSpline2Show_CheckedChanged

private

checkSpline1Show_CheckedChanged(object

sender,

checkSpline2Show_CheckedChanged

private

checkSpline2Show_CheckedChanged(object

sender,

//若窗口最小化时候则Height、Width都为0。

DrawImage()创建图像会出错{cureDraw.Height

pictureBox1.Height;cureDraw.Width

pictureBox1.Width;}pictureBox1.Image

(isSpline1Show

true){cureDraw.DrawXY(xLineDatas,

yLineDatas,

true){cureDraw.DrawSpline(dataF,

spline2Color,

链接https://pan.baidu.com/s/1K6HFh56YfvwvoAH5nrdJmg

提取码vfym

读取TXT文本文件中的两列数据将两列数据以曲线显示出来当鼠标移动经过曲线时显示当前坐标的Label控件字体颜色变成当前识别的曲线颜色。

曲线识别效果

如效果图所示添加按钮控件导入读取文本数据。

添加btnImportTxtDatas_Click事件函数

private

files(*.*)|*.*|文本文件(*.csv)|*.csv|文本文件(*.txt)|*.txt;if

(ofd.ShowDialog()

File.ReadAllLines(ofd.FileName,

Encoding.Default).ToArray();dataColumNums

CharNum(lines[0],

Convert.ToDouble(seg[j]);}}//axis1Data

new

i0;idataLineNums;i){axis1Data[i]

i];axis2Data[i]

//若窗口最小化时候则Height、Width都为0。

DrawImage()创建图像会出错{cureDraw.Height

pictureBox1.Height;cureDraw.Width

pictureBox1.Width;}

true){cureDraw.DrawXY(xLineDatas,

yLineDatas,

}//读取的文本文件两列数据显示if(isSplineAxis){if

(checkAxis1.Checked){cureDraw.DrawSpline(axis1Data,

Axis1Color,

(checkAxis2.Checked){cureDraw.DrawSpline(axis2Data,

Axis2Color,

e){DrawCure();//检测鼠标是否在曲线上if(isSplineAxis){int

nIndex

cureDraw.YSliceValue/8){isMouseOnAxis1

Axis1Color;}else{isMouseOnAxis1

currentValue_X;if

Axis2Color;}else{isMouseOnAxis2

Color.Black;}}if(isMouseOnAxis1false

isMouseOnAxis2false){labMousePos.ForeColor

Color.Black;}}}

链接https://pan.baidu.com/s/1FQNVWU-PLIgaS3KmQz_BGw

提取码dtcj

创建一条竖直方向的线用来指示当前鼠标点击所在的X轴位置。

该线的作用是在编辑数据和运行数据的时候可以很方便的看出当前所运行到的时间点。

指示线效果如下所示

控件pictureBox1添加pictureBox1_MouseDown、pictureBox1_MouseUp事件函数用来检测鼠标按键按下和抬起。

private

MouseButtons.Left){isLeftButtonDowm

true;}if

MouseButtons.Middle){isMiddleButtonDown

true;}if

MouseButtons.Right){isRightButtonDown

true;}}

MouseButtons.Left){isLeftButtonDowm

false;}if

MouseButtons.Middle){isMiddleButtonDown

false;}if

MouseButtons.Right){isRightButtonDown

false;}}

//时间轴位置指示线cureDraw.DrawCurrentLine(last_CurrentValueX);if

(isLeftButtonDowm){last_CurrentValueX

currentValue_X;}

ValueToMousePoint_ex(CurrentValue_X);graphics.DrawLine(new

Pen(currentB),

链接https://pan.baidu.com/s/13c0C1dTqTgW-5G3uYWekOA

提取码u6n0

需要拖拽的点叫关键帧点每个关键帧点包括两个数据X轴中位置、Y轴中位置。

创建字典集合keyListDatas

//曲线编辑Dictionaryint,

int.Parse(txtDataLength.Text);myEditDatas

new

float[dataLength];//字典集合中添加4个随机数据keyListDatas.Add(100

dataLength

0.0f);keyListDatas.Add(dataLength

10.0f);keyListDatas.Add(dataLength

50.0f;

item.Value;fListTemp_X.Add(key);fListTemp_Y.Add(fValue);}keyEditDatas_X

fListTemp_X.ToArray();keyEditDatas_Y

3绘制关键帧和数据曲线

(keyEditDatas_Y.Length0){cureDraw.DrawPoint(keyEditDatas_X,

keyEditDatas_Y,

0){cureDraw.DrawSpline(myEditDatas,

editSplineColor,

KeyPointEdit(){//KeyDataTrans();//PointF[]

pfnew

PointF[keyEditDatas_X.Length];for(int

i0;ikeyEditDatas_X.Length;i){pf[i].X

cureDraw.ValueToMousePoint_ex((int)keyEditDatas_X[i]);pf[i].Y

cureDraw.ValueToMousePoint_ey(keyEditDatas_Y[i]);}//label7.BackColor

Color.Blue

GraphicsPath();vGraphicsPath.AddEllipse(pp.X

pp.Y

Region(vGraphicsPath);isMouseOnKeyPoint

ey);

(isMouseOnKeyPoint){Cursor.Current

Cursors.SizeNS;

Color.Lime;if(isLeftButtonDowm){//isKeyEditDataMoveCan

true;}}//if

false;}//if(isDataEdit){keyListDatas[keyEditFrame]

currentValue_Y;}}

链接https://pan.baidu.com/s/1HVAWpqR-68OY98KmgUlJbw

提取码hxvw