Mobile开发(绘制背景图片)

Mobile开发(绘制背景图片)

      Mobile开发环境，这里就不详细介绍了，无非就是根据自己的系统安装ActiveAsync和手机模拟器。我目前使用的是Mobile6.0的模拟器，目前有6.1的和6.5的，因为是兼容的，而且内核基本没动，所以我也就懒得升级咯。

      进入正题，开发过的人都知道，Mobile原始窗体除了上下边框栏，都是白色背景，这样的界面，客户肯定是不会满意的，所以我们需要为客户针对软件进行美观。我这里采用也是Alpha Blend API，黎波老师也介绍过，我这里算是借用了吧，我项目中所使用的下载包，只需要替换掉命名空间就行。PlatformAPI.zip

      将包解压加入项目中，现在咋们可以编写自己的代码了。首先，创建好窗体后，设置几个全局变量。

Code
//窗体变量
Size formSize = Size.Empty;
//纵横屏幕标志 动态更换图片用 默认纵向por 横向lan
string formSign = "por";
Graphics gxBuffer;
Bitmap offBitmap;
Font font = new Font("Tahoma", 10, FontStyle.Regular);
//手机程序路径
string path = System.IO.Path.GetDirectoryName(Assembly.GetExecutingAssembly().GetName().CodeBase);

      接下来，结合Alpha Blend API开始绘制页面，页面绘制事件采用双Bitmap防闪烁，效率会有所影响，但问题不大，接下来开始绘制页面。

 

Code
 protected override void OnPaint(PaintEventArgs e)
        {
            if (offBitmap != null)
            {
                AdjustFormLayout();
                gxBuffer = Graphics.FromImage(offBitmap);
                gxBuffer.Clear(this.BackColor);
                this.BackColor = SystemColors.MenuText;

                //确认当前屏幕大小，获取对应的图片文件夹
                GetConfig getconfig=new GetConfig();
                ConfigClass config = getconfig.CheckScreenSize(formSize.Width.ToString(), formSize.Height.ToString());
                Program.ScreenFileName = config.FileName;

                AlphaImage bmp = AlphaImage.CreateFromFile(path + @"\" + Program.ScreenFileName + @"\bg.png");
                Rectangle imgRect = new Rectangle(0, 0, formSize.Width, formSize.Height);
                bmp.Draw(gxBuffer, imgRect);

                e.Graphics.DrawImage(offBitmap, 0, 0);
            }
            else
            {
                e.Graphics.Clear(this.BackColor);
            }
        }

        protected override void OnResize(EventArgs e)
        {
            base.OnResize(e);
            if (offBitmap != null)
                offBitmap.Dispose();

            offBitmap = new Bitmap(this.Width, this.Height, PixelFormat.Format32bppRgb);
        }

        /**//// 

        /// 获取屏幕大小，展现模式
        /// 

        public void AdjustFormLayout()
        {
            Rectangle screenBounds = Screen.PrimaryScreen.Bounds;
            float widthRatio = 0.0F;
            float heightRatio = 0.0F;

            DisplayManager.GetDisplayRatiosByDpi(this, ref widthRatio, ref heightRatio);

            控件按比例缩放#region 控件按比例缩放

            if (DisplayManager.GetDisplayMode() == DisplayMode.Portrait)
            {
                // 纵向
                formSize = new Size(screenBounds.Width, screenBounds.Height);
                formSign = "por";
                //viewCount = 9;
            }
            else if (DisplayManager.GetDisplayMode() == DisplayMode.Landscape)
            {
                // 横向
                formSize = new Size(screenBounds.Width, screenBounds.Height);
                formSign = "lan";
                //viewCount = 8;
            }
            else
            {
                // 正方
                formSize = new Size(screenBounds.Width, screenBounds.Height);
                formSign = "por";
                //viewCount = 9;
            }
            #endregion

        }

       根据需要，引用对应的命名空间，编译后，页面显示如下

 

      这样，最基本的背景图片就绘制上了，由于代码中我设置了根据手机分辨率大小获取不同大小的背景图，大家如果用不上可以自己删除掉，图片路径直接改为手机上安装程序的路径就可以了。背景的图片需要你们TEAM中的美工了，如果美工把图片设置为透明的，那样最好，显示出来的背景会和上下边框栏根据主题的变化而变化了，方法是一样的，自己试咯。

      如何使界面更好看，让我们下面来继续修改，我想要个主题栏，栏目上有图片还有字，让我们继续来绘制，现在修改只需要修改OnPaint事件中一些东西，增加一个标题栏的绘制，一个标题栏的图标，再绘制点字上去，代码如下

 

Code
//标题栏绘制
bmp = AlphaImage.CreateFromFile(path + @"\" + Program.ScreenFileName + @"\indexP_alphaBar.png");
imgRect = new Rectangle(0, 0, 320, 39);
bmp.Draw(gxBuffer, imgRect);
//标题图片绘制
bmp = AlphaImage.CreateFromFile(path + @"\" + Program.ScreenFileName + @"\indexPeople_04.png");
imgRect = new Rectangle(10, 10, 19, 22);
bmp.Draw(gxBuffer, imgRect);
//文字绘制
gxBuffer.DrawString("Hello Bright!", font, brush, 60, 10);

需要注意的是，绘制文字需要使用画笔，所以请先实例一个画笔，由于我背景是黑色，所以我画笔颜色为白色，在构造函数中将画笔颜色设置为白色，

Brush brush;
public FrmIndex()
        {
            brush = new SolidBrush(Color.White);
            InitializeComponent();
        }

 画面效果如下：

      背景，图片，文字的绘制基本完成，我代码里为了方便，坐标都写死了，最好能根据屏幕大小按比例绘制，因为最新的手机屏幕大小已经远远超了320*320了，按比例绘制，你只需要替换到图片就能使用，写死坐标你会发现调坐标会郁闷死的。最后给大家展示一张比较完整的主页面图，

      绘制也就到这了，如果有时间我会再写一些修改过的高人写的有用的控件，或者今日插件打包，输入法挡住屏幕自动切换等。其中也有很多都是借用别人的东西，哎，自己水平有限，写不出来，请大家留口德，不要丢鸡蛋。。。