将图像分割成小块

Question

嗨。 我有一张480 x 800的图片，想把它放在我的瓷砖地图上。我正在尝试将图像分成网格(6 x 10)，并为每个瓷砖分配特定部分的图像。本质上，瓷砖地图看起来像一个大图像，因为每个瓷砖都附有相关部分的图像。最好的方法是什么？ 我已经尝试了遍历每个瓷砖并将其绘制到可写位图中，但所有图像都相同。

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)只是在遍历瓦片地图时使用的索引，80是瓦片的高度和宽度，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;                     
        }

- Skoder

---

那段代码看起来正确。你能发一下整个循环吗？ - Olivier Payen

@Olivier Payen - 我已经添加了完整的循环。 - Skoder

Answer 1

你可以使用一个巧妙的技巧来实现 - 只需使用画布每次裁剪图像，并移动图像，使得每次显示另一部分：

        <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>

- Elad Katz

---

我已经在原始问题中添加了一些代码。我应该在循环中的代码后台执行此操作，并修改“SetImage”方法以接受“canvas”参数吗？ - Skoder

你可以按照你建议的方式进行操作，但最优雅的方法是使用数据绑定。将上述画布放置在ItemsControl.DataTemplate中，并将其绑定到包含相关坐标的对象列表。该列表应在代码后台中创建。 - Elad Katz