试验平台:.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);
}
}
}
}
}
本程序的源代码下载链接:
http://www.sky-walker.com.cn/yefan/SourceCode/YFPresentation.rar
有条件的网友可以和微软提供的示例NewPresentation对比一下看看,也许更能看出它们的异同。有时间我在把这个类封装成一个控件(基于.Net CF),这样在windows和wince平台就都能使用了。