正弦/余弦曲线,意思就是基于正弦、余弦的曲线函数。其函数周期为2π,其中x轴表示为角度(0-360度/2π),Y轴表示为当前角度产生的正弦/余弦值。
由此对应的坐标集合便形成了正弦/余弦曲线。
我们使用一个示例来演示如何使用Silverlight代码来画正弦/余弦曲线。这个示例分别画出了正弦、余弦曲线,并提供了两个选择框,可以选择显示那一个。
其原理是记录当前角度的正弦、余弦值(Y轴)和角度(X轴)形成坐标点,添加到坐标集合中,呈现出一种动态绘制的效果。
效果图如下:
由图中我们就能看到,现实了角度、角度的正弦、余弦值,当前坐标点。
根据之前的文章我们可以明确到,计算出指定角度/弧度的正弦或余弦值并不难。但在这个示例中需要控制的地方有4个:1.正弦、余弦两个情况下的直角边位置与高度、
2.半径位置、3.表示运动轨迹的直接的长度与位置、4.表示当前角度正弦、余弦的坐标点。
下面我们就直接看代码。这个示例中只使用一个XAML页面,unitCircleSin.xaml
unitCircleSin
unitCircleSin.xaml.cs代码如下,关键步骤看代码注释:
return Degrees * Math.PI / 180;
}
}
整体上简单来讲,依然是正弦、余弦函数、弧度、角度的运用。
unitCircleSin.xaml 代码
>
在线演示地址:点击查看
总结:从整个示例角度来讲,无论是记录运动轨迹、绘制曲线,都是使用了三角函数公式进行运算的结果,
此示例的目的,首先是通过动态绘制演示了正弦、余弦函数、曲线等之间的关系,其次是通过代码演练了三角函数的使用。
下面再看一个简单的例子,用于演示正弦曲线。
SineWaveGenerator
这个示例使用正弦函数动态绘制曲线。根据频率与振幅这两个参数的变更进行绘制曲线。这个示例比较容易些。
效果图如下:
具体代码如下:
SineWaveGenerator.xaml.cs 代码:
//添加坐标点。
PC.Add(NextPoint);
Poly.Points = PC;
}
}
}
SineWaveGenerator.xaml 代码:
>
在线演示地址:点击查看
总结:这个示例的目的是通过一个简单的效果换个角度去看待使用正弦函数,当然这个绘制过程也可以使用动画进行控制,
或者在故事版与正弦与余弦函数结合,比如可以让一个物体根据已经生成好的坐标集合进行运动。可以做出很多很好玩的效果。
【注:本文技术论点源于《Foundation Silverlight 3 Animation》,个人理解可能存在差异,请参考原著】