人气 169

[游戏程序] WPF/Silverlight深度解决方案:(五)基于像素的图像合成(For Silverlight) ... [复制链接]

九艺网 2017-3-10 17:00:16

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

x


本节我将为大家讲解如何在Silverlight平台上实现上一节中的纸娃娃系统,即WPF->Silverlight的移植。

众所周知Silverlight是WPF的子集,Silverlight对像素位图的处理是在3.0版本之后才开始支持,本节我将大量的用到它: WriteableBitmap – 传说中神话的代言人。

移植过程分两步。

首先移植表现层xaml,大家需要特别注意的是Silverlight中ComboBoxItem中的IsSelected和Content与WPF中的有明显书写区别,不清楚为什么微软不对此进行一致化以便可以轻松移植。

接着移值逻辑代码:

首先创建绘图用对象WriteableBitmap writeableBitmap = new WriteableBitmap(200, 200);

接着定义平移对象TranslateTransform translateTransform = new TranslateTransform();

该对象将用于实现上一节中的x,y偏移处理。

然后同样的首先以绘制武器为例:


Image image = new Image();



image.Source = GetImage(

string.Format("/Image/Weapon_{0}.png",

(comboBox1.SelectedItem as ComboBoxItem).Content)

);


translateTransform.X = 18; translateTransform.Y = 18;


writeableBitmap.Render(image, translateTransform);

大家不妨与上一节的代码进行比较,就会发现非常之相似,只是用了不同的类工具替换罢了。

那么后面是同样的,逐层绘制其他部位:

//绘制身体


image.Source = GetImage(

string.Format("/Image/Body_{0}.png",

(comboBox2.SelectedItem as ComboBoxItem).Content)

);


translateTransform.X = 50; translateTransform.Y = 50;


writeableBitmap.Render(image, translateTransform);

//绘制左手


image.Source = GetImage(

string.Format("/Image/LeftHand_{0}.png",

(comboBox3.SelectedItem as ComboBoxItem).Content)

);


translateTransform.X = 72; translateTransform.Y = 52;


writeableBitmap.Render(image, translateTransform);

//绘制右手


image.Source = GetImage(

string.Format("/Image/RightHand_{0}.png",

(comboBox4.SelectedItem as ComboBoxItem).Content)

);


translateTransform.X = 98; translateTransform.Y = 59;


writeableBitmap.Render(image, translateTransform);

//绘制头部


image.Source = GetImage(

string.Format("/Image/Head_{0}.png",

(comboBox5.SelectedItem as ComboBoxItem).Content)

);


translateTransform.X = 86; translateTransform.Y = 38;


writeableBitmap.Render(image, translateTransform);

//绘制坐骑


image.Source = GetImage(

string.Format("/Image/Horse_{0}.png",

(comboBox6.SelectedItem as ComboBoxItem).Content)

);


translateTransform.X = 63; translateTransform.Y = 71;


writeableBitmap.Render(image, translateTransform);

全部绘制完后别忘记了将之提交writeableBitmap.Invalidate();

并将最终的合成图象赋值给精灵:

Spirit.Source = writeableBitmap;

是不是很神奇~原来移植可以这么简单的,更重要的,WriteableBitmap使我们能够在Silverlight中对像素位图进行处理,这难道不是伟大的历史时刻吗?

演示Demo:

1ddbe153e823253e228fbc05da09fd53.png


   
作者:深蓝色右手


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

QQ|手机版|小黑屋|九艺游戏动画论坛 ( 津ICP备2022000452号-1 )

GMT+8, 2024-5-13 09:24 , Processed in 0.058977 second(s), 26 queries .

Powered by Discuz! X3.4  © 2001-2017 Discuz Team.