一瞬间的错觉 发表于 2011-4-1 14:20:15

WPF/Silverlight深度解决方案:(四)基于像素的图像合成(For WPF)

本帖最后由 一瞬间的错觉 于 2011-4-1 14:21 编辑

传统的基于GDI或GDI+的图形开发大家再熟悉不过了,通过Drawing类可以轻松的对位图进行处理,那么在WPF中的Media类是否也拥有同样类似的方法功能呢?这是肯定的。本节我以精灵装备合成Show(纸娃娃)为例向大家演示如何在WPF中实现基于像素的图象合成。首先准备一下合成用的素材:统一好它们的规格尺寸及命名后将之嵌入进项目资源:接下来是进行绘图的第一步:创建绘图工具实例并开启绘图:
DrawingVisual drawingVisual = new DrawingVisual();
DrawingContext drawingContext = drawingVisual.RenderOpen();接着按深度顺序从底到外逐个对象绘制:

BitmapSource weapon = GetImage(string.Format("Image/Weapon_{0}.png", (comboBox1.SelectedItem as ComboBoxItem).Content));
drawingContext.DrawImage(weapon, new Rect(18, 18, 120, 120));通过以上代码,我们将位于"Image/Weapon_{0}.png"的武器图片绘制到一个x,y方向偏移量分别为(18,18)的120*120像素的矩形上,其中的GetImage方法为:
//图片加载
private BitmapSource GetImage(string uri) {
try {
return BitmapFrame.Create(new Uri(string.Format(@"{0}", uri), UriKind.Relative));
} catch {
return null;
}
}然后通过相类似的代码再分别依次绘制身体、左手、右手、头部、坐骑等部位://绘制身体
BitmapSource body = GetImage(string.Format("Image/Body_{0}.png", (comboBox2.SelectedItem as ComboBoxItem).Content));
drawingContext.DrawImage(body, new Rect(50, 50, 100, 100));//绘制左手
BitmapSource LeftHand = GetImage(string.Format("Image/LeftHand_{0}.png", (comboBox3.SelectedItem as ComboBoxItem).Content));
drawingContext.DrawImage(LeftHand, new Rect(72, 52, 30, 30));//绘制右手
BitmapSource RightHand = GetImage(string.Format("Image/RightHand_{0}.png", (comboBox4.SelectedItem as ComboBoxItem).Content));
drawingContext.DrawImage(RightHand, new Rect(98, 59, 30, 30));//绘制头部
BitmapSource Head = GetImage(string.Format("Image/Head_{0}.png", (comboBox5.SelectedItem as ComboBoxItem).Content));
drawingContext.DrawImage(Head, new Rect(86, 38, 20, 30));//绘制坐骑
BitmapSource Horse = GetImage(string.Format("Image/Horse_{0}.png", (comboBox6.SelectedItem as ComboBoxItem).Content));
drawingContext.DrawImage(Horse, new Rect(63, 71, 70, 120));所有对象绘制完后即可以关闭画板并呈现出来:
drawingContext.Close();
RenderTargetBitmap composeImage = new RenderTargetBitmap(200, 200, 0, 0, PixelFormats.Pbgra32);
composeImage.Render(drawingVisual);最后将composeImage这个合成的图片作为图片源赋值给精灵即完成了整个合成流程:Spirit.Source = composeImage;实现后的系统界面如下:本节以展示如何在WPF中对像素位图进行合成,由于素材资源有限,因此无法为大家演示动画效果的纸娃娃图片合成系统。但是万变不离其中,只要您掌握了本文的方法并合理的处理好图片组的缓存,这将为您的图片合成带来更高的性能与效果。下一节我将为大家讲解如何在Silverlight中实现一模一样的效果,这就是传说中的移植,敬请关注。

作者:深蓝色右手


天空知音 发表于 2011-4-2 09:01:21

楼主辛苦了 分享是快乐的
好贴!

3Dmax123 发表于 2011-4-2 09:43:58

愿风指引你的道路 愿阳光照耀着你

TopoGun 发表于 2011-4-2 09:46:07

活活~我来了

haokan 发表于 2011-4-2 09:47:44

好人!好人好人~~
好贴!

Autodesk123 发表于 2011-4-2 09:51:18

没有什么能够阻挡 你对自由的向往

页: [1]
查看完整版本: WPF/Silverlight深度解决方案:(四)基于像素的图像合成(For WPF)