将图像分解为瓷砖

时间:2011-05-19 00:46:48

标签: c# silverlight image image-processing writeablebitmap

嘿。   我有480 x 800图像,并希望将其放在我的瓷砖地图上。我正在尝试将图像分割成网格(6 x 10)并为每个图块分配图像的特定部分。基本上,tilemap看起来像一个大图像,因为每个tile都附加了图像的相关部分。这样做的最佳方法是什么? 我已经尝试浏览每个图块并将其绘制到WriteableBitmap,但所有图像都是相同的。

WriteableBitmap wb = new WriteableBitmap(80,80);
Rect src= new Rect(x*Width,y*Height, 80, 80);
Rect dest= new Rect(0, 0, 80, 80);
wb.Blit(dest, mainWb, src); 
tile.SetImage(wb);

(x和y)是迭代tilemap时使用的索引,80是tile的高度和宽度,mainWb是我要分割的大图像。谢谢你的帮助。

编辑:完整循环代码:

    var mainImage = Application.GetResourceStream(new Uri("MainImage.jpg", UriKind.Relative)).Stream;
                    WriteableBitmap mainWb = new WriteableBitmap(480, 800);           

                    mainWb.SetSource(mainImage);
                    for (int x = 0; x < 6; x++)
                    {
                        for (int y = 0; y < 12; y++)
                        {
                            Tile tile = new Tile();

                            WriteableBitmap wb = new WriteableBitmap(80,80);


 Rect src = new Rect(x*Width,y*Height, 80, 80);

                        Rect dest = new Rect(0, 0, 80, 80);

                        wb.Blit(dest, mainWb, src); 
                        tile.SetImage(wb);    

                        Canvas.SetLeft(tile, x * WIDTH);
                        Canvas.SetTop(tile, y * HEIGHT);  


                        LayoutRoot.Children.Add(tile);
                        ls.Add(tile);
                    }
                }

Tile类是一个简单的80x80画布,其图像控件名为img。上面的SetImage方法就是:

 public void SetImage(WriteableBitmap wb)
        {                
            img.Source = wb;                     
        }

1 个答案:

答案 0 :(得分:4)

你可以用一个很好的技巧来做 - 只需每次使用画布裁剪图像,并在每次显示另一个部分时移动图像:

        <Canvas Width="80" Height="80">
            <Canvas.Clip>
                <RectangleGeometry Rect="0,0,80,80" />
            </Canvas.Clip>
            <Image Source="your_image.png" 
   Canvas.Left="0" Canvas.Top="0" />
            <!-- or -80, -160, -240 etc.. -->
        </Canvas>