试验平台：.Net Micro Framework 模拟器
在前几篇关于.Net Micro Framework的研究文章中，我对它的绘图功能实不敢恭维，不过微软的MF开发人员很聪明，对位图方面的功能实现的就比较完善，这样做起图形应用来就不至于捉襟见肘了。
前段时间用.Net Compact Framework实现了一个奥运场馆查询（相关文章请参见：http://blog.csdn.net/yefanqiu/archive/2007/11/13/1882835.aspx），现在我们用.Net Micro Framework也实现一个，看看哪一个更炫。
（效果是不是比用.Net Compact Framework做的还棒！）
我这个程序脱胎于MF的示例文件NewPresentation，不过我对它进行了大刀阔斧的改进，原程序在实现菜单时至少需要两套大小不同的图片，现在我已经修改成仅需要一套图片了，此外我对tinyfnt中文字库的创建程序又进行了优化，可以更高效、更完美的创建字库了（相关文章请参见：http://blog.csdn.net/yefanqiu/archive/2007/11/01/1862300.aspx）。
如优化前菜单添加代码：
MenuItem menuItem1 = new MenuItem(Resources.BitmapResources.Vertical_Stack_Panel_Icon_Small, Resources.BitmapResources.Vertical_Stack_Panel_Icon, "Vertical Stack Panel", Resources.BitmapResources.Canvas_Panel_Icon);
MenuItem menuItem2 = new MenuItem(Resources.BitmapResources.Horizontal_Stack_Panel_Icon_Small, Resources.BitmapResources.Horizontal_Stack_Panel_Icon, "Horizontal Stack Panel", Resources.BitmapResources.Canvas_Panel_Icon);
MenuItem menuItem3 = new MenuItem(Resources.BitmapResources.Canvas_Panel_Icon_Small, Resources.BitmapResources.Canvas_Panel_Icon, "Canvas Panel", Resources.BitmapResources.Canvas_Panel_Icon);
MenuItem menuItem4 = new MenuItem(Resources.BitmapResources.Diagonal_Panel_Icon_Small, Resources.BitmapResources.Diagonal_Panel_Icon, "Diagonal Panel", Resources.BitmapResources.Canvas_Panel_Icon);
MenuItem menuItem5 = new MenuItem(Resources.BitmapResources.Scrollable_Panel_Icon_Small, Resources.BitmapResources.Scrollable_Panel_Icon, "Scrollable Panel", Resources.BitmapResources.Canvas_Panel_Icon);
MenuItem menuItem6 = new MenuItem(Resources.BitmapResources.Free_Drawing_Panel_Icon_Small, Resources.BitmapResources.Free_Drawing_Panel_Icon, "Free Drawing Panel", Resources.BitmapResources.Canvas_Panel_Icon);
// Add each of the menu items to the menu item panel
m_MenuItemPanel.AddMenuItem(menuItem1);
m_MenuItemPanel.AddMenuItem(menuItem2);
m_MenuItemPanel.AddMenuItem(menuItem3);
m_MenuItemPanel.AddMenuItem(menuItem4);
m_MenuItemPanel.AddMenuItem(menuItem5);
m_MenuItemPanel.AddMenuItem(menuItem6);
优化后的代码：
m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M1, "国家体育馆"));
m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M2, "北京大学体育馆"));
m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M3, "国家游泳中心-水立方"));
m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M4, "国家体育场-鸟巢"));
m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M5, "北京射击馆"));
m_MenuItemPanel.AddMenuItem(new MenuItem(Resources.BitmapResources.M6, "顺义奥林匹克水上公园"));
实事求是的说，MF示例实现的图形菜单动画比我在北京2008奥运场馆速查中实现的要好，它的更规范，更具有通用性。相关代码如下：
// 菜单类
internal sealed class MenuItemPanel : Control
{
private int _currentChild = 0;
private int _width;
private int _height;
private int _animationStep;
private Color ForeColor;
public ArrayList MenuItemList;
public MenuItemPanel(int width, int height, Color ForeColor,Color BackColor)
{
//背景色
Background = new SolidColorBrush(BackColor);
//前景色
this.ForeColor = ForeColor;
//大小
_width = width;
_height = height;
//菜单选项集合
MenuItemList = new ArrayList();
}
//添加菜单选项
public void AddMenuItem(MenuItem menuItem)
{
MenuItemList.Add(menuItem);
}
//当前菜单选项索引
public int CurrentChild
{
get { return _currentChild; }
set
{
if (value > _currentChild) _animationStep = maxStep; // 向右移动
else if (value < _currentChild) _animationStep = -maxStep; // 向左移动
else _animationStep = 0; // 没有移动
if (value >= MenuItemList.Count) value = 0; // 菜单项是一个环状结构
if (value < 0) value = MenuItemList.Count - 1;
//开始重绘
if (_animationStep != 0)
{
_currentChild = value;
Invalidate(); //开始移动
}
}
}
static public int maxStep = 5; //动画帧数
const int xOffsetSeparation =2; //每个菜单项的间距
const int timerInterval = 20; //移动每一个帧之间的动画时间ms
//绘制菜单
public override void OnRender(DrawingContext dc)
{
base.OnRender(dc);
//获得图片宽度
int largeX = ((MenuItem)MenuItemList[0]).ImageWidth + xOffsetSeparation;
//起始坐标
int x = (_width / 2) - ((largeX * 2) + (largeX / 2));
int y =22;
//缩放比例
int scale = 0;
//缩放比例的步长
int scaleOffset = System.Math.Abs(_animationStep);
//X方向移动
x += _animationStep * 5;
//绘背景
dc.DrawImage(Resources.GetBitmap(Resources.BitmapResources.Main), 0, 0);
#region //绘菜单图像
for (int i = _currentChild - 2; i < _currentChild + 3; i++)
{
if (i == _currentChild) //中间图像
{
scale = maxStep - scaleOffset;
}
else //两边图像
{
if ((_animationStep < 0 && i == _currentChild + 1) || (_animationStep > 0 && i == _currentChild - 1))
scale = scaleOffset;
else
scale = 0;
}
//当前菜单项
MenuItem menuItem = null;
if (i < 0) menuItem = (MenuItem)MenuItemList[MenuItemList.Count + i];
else if (i > MenuItemList.Count - 1) menuItem = (MenuItem)MenuItemList[i - MenuItemList.Count];
else menuItem = (MenuItem)MenuItemList[i];
menuItem.Render(dc, x, y, scale);
x += largeX;
}
#endregion
#region //写菜单文本
if (_width > 0)
{
int step = 20;
int row = 125;
if (_width < _height) step = 40;
//写说明
string text = ((MenuItem)MenuItemList[_currentChild]).Description;
dc.DrawText(ref text, Resources.GetFont(Resources.FontResources.china2008), ForeColor, 10, row, _width - 20, step, TextAlignment.Center, TextTrimming.None);
}
#endregion
//启动动画时钟
StartAnimationTimer();
}
private DispatcherTimer _animationTimer;
private void StartAnimationTimer()
{
if (_animationStep != 0)
{
if (_animationTimer == null)
{
_animationTimer = new DispatcherTimer(this.Dispatcher);
_animationTimer.Interval = new TimeSpan(0, 0, 0, 0, timerInterval);
//每隔一段时间触发该事件
_animationTimer.Tick += new EventHandler(OnAnimationTimer);
}
_lastTick = DateTime.Now.Ticks;
_animationTimer.Start();
}
}
long _lastTick = 0;
private void OnAnimationTimer(object o, EventArgs e)
{
_animationTimer.Stop();
long ms = ((DateTime.Now.Ticks - _lastTick) / 10000);
_lastTick = DateTime.Now.Ticks;
int increment = (int)(ms / timerInterval);
if (increment < 1) increment = 1;
else if (increment > maxStep) increment = maxStep;
if (_animationStep < 0) _animationStep += increment;
else if (_animationStep > 0) _animationStep -= increment;
//重新触发OnRender函数的执行
Invalidate();
}
//窗体可用尺寸
protected override void MeasureOverride(int availableWidth, int availableHeight, out int desiredWidth, out int desiredHeight)
{
desiredWidth = _width;
desiredHeight = _height;
}
}
// 菜单选项类
internal sealed class MenuItem : Control
{
private Bitmap _image; // 菜单图标
private string _description; // 菜单说明
private int[] _widthSteps; // 宽度步长数组
private int[] _heightSteps; // 高度步长数组
public int ImageWidth; // 图像宽度
public int ImageHeight; // 图像高度
private float fScale = (float)0.8; // 缩小因子
public int SmallWidth; // 缩小后的宽度
public int SmallHeight; // 缩小后的高度
public MenuItem()
{
}
public MenuItem(Resources.BitmapResources rBitmap, string description)
{
//菜单图像
_image = Resources.GetBitmap(rBitmap);
//图像尺寸
ImageWidth = _image.Width;
ImageHeight = _image.Height;
SmallWidth = (int)(fScale * ImageWidth);
SmallHeight = (int)(fScale * ImageHeight);
//菜单说明
_description = description;
//创建中间动画帧尺寸数组
_widthSteps = new int[MenuItemPanel.maxStep];
_heightSteps = new int[MenuItemPanel.maxStep];
//动画变化总大小
int wDiff = ImageWidth - SmallWidth;
int hDiff = SmallHeight - SmallHeight;
//保存每次变化的大小
for (int i = 1; i < MenuItemPanel.maxStep; i++)
{
_widthSteps[i] = (wDiff / MenuItemPanel.maxStep) * i;
_heightSteps[i] = (hDiff / MenuItemPanel.maxStep) * i;
}
}
//菜单说明
public string Description
{
get { return _description; }
set { _description = value; }
}
//菜单绘制
public void Render(DrawingContext dc, int x, int y, int scale)
{
// 图像必须存在
if (_image != null)
{
if (scale == MenuItemPanel.maxStep)
{
Width = ImageWidth;
Height = ImageHeight;
dc.DrawRectangle(new SolidColorBrush(Color.Black), new Pen(Color.Black), x+2, y+2, Width, Height);
dc.DrawImage(_image, x, y);
}
else
{
if (scale == 0)
{
Width = SmallWidth;
Height = SmallHeight;
x += ((ImageWidth - Width) / 2);
y += ((ImageHeight - Height) / 2);
dc.DrawRectangle(new SolidColorBrush(Color.Black), new Pen(Color.Black), x + 2, y + 2, Width, Height);
dc.Bitmap.StretchImage(x, y, _image, Width, Height, 255);
}
else
{
int wDiff = ImageWidth - SmallWidth;
int hDiff = SmallHeight - SmallHeight;
Width = SmallWidth + _widthSteps[scale];
Height = SmallHeight + _heightSteps[scale];
x += ((ImageWidth - Width) / 2);
y += ((ImageHeight - Height) / 2);
dc.DrawRectangle(new SolidColorBrush(Color.Black), new Pen(Color.Black), x + 2, y + 2, Width, Height);
dc.Bitmap.StretchImage(x, y, _image, Width, Height, 255);
}
}
}
}
}
有条件的网友可以和微软提供的示例NewPresentation对比一下看看，也许更能看出它们的异同。有时间我在把这个类封装成一个控件（基于.Net CF），这样在windows和wince平台就都能使用了。