仅平铺图像时如何有效使用DrawingGroup？

Question

I'm having trouble understanding my problem with drawing groups. I'm creating a map editor in wpf which is my first wpf project and I have been searching/playing around with drawing groups.

I have a set of tiles on the left side that on app startup populate based off of a folder of sprites. They all layout according to rules I have set(3 sets of tiles per row at 32 pixels each). Example below:

    private void RefreshTileList()
    {
        // For now load in all textures as possible tiles
        DrawingGroup dGroup = new DrawingGroup();
        Rect r = new Rect();
        r.X = 0.0;
        r.Y = 0.0;
        r.Width = Settings.Default.TileThumbWidth;
        r.Height = Settings.Default.TileThumbHeight;
        foreach (WPFTexture tex in imgFind.TileTextures)
        {
            ImageDrawing iDraw = new ImageDrawing(tex.src, r);

            dGroup.Children.Add(iDraw);

            r.X += r.Width;
            if (r.X > r.Width * Settings.Default.TileThumbMaxColumns)
            {
                r.X = 0.0;
                r.Y += r.Height;
            }
        }

        // Make a drawing image and send it to the Image in canvas
        DrawingImage drawImage = new DrawingImage(dGroup);
        tileImage.Source = drawImage;
    }

Now I Image control in another canvas which I want to do the same exact thing with exception that the tiles are placed dynamically. Here is what I have so far:

    private void AreaDrawingCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        if(curSelIndex > -1 && curSelIndex < imgFind.TileTextures.Count)
        {
            BitmapSource tileSrc = imgFind.TileTextures[curSelIndex].src;

            Point mousePos = e.GetPosition(sender as Canvas);
            Size size = new Size(tileSrc.Width, tileSrc.Height);
            Rect r = new Rect(mousePos, size);
            ImageDrawing iDraw = new ImageDrawing(tileSrc, r);

            areaDrawGroup.Children.Add(iDraw);

        }
    }

And here is the initialization of what uses areaDrawGroup:

        // Setup drawing for area
        DrawingImage areaDrawImage = new DrawingImage(areaDrawGroup);
        areaImage.Source = areaDrawImage;
        areaImage.Stretch = Stretch.None;
        AreaDrawingCanvas.Children.Add(areaImage);

If I do not add in a dead image located at point(0, 0) in the draw group and I click on the image control. It will offset to a weird location. As I continue to click more towards the top left location it correct where it draws the tile while shifting all the other ones over.

My question is where could I find a good tiling example or what have I done wrong? Because adding in a dead image to fix where other images locate seems like a really bad hack to something simple I missed.

Answer 1

Here is what I did to solve this for now. I have a i7 and used a list of drawingvisuals. Don't have a problem with it. I thought at one point I should use one drawing visual and add each image to the same visual. The problem with that is if I add a tile I have to re-open the render and redo all the drawing. Since I don't have any hiccups I decided not to use my time on that method.

Here is code to copy and paste:

1. Make a class that derives framework element and add in the overrides as seen

   public class AreaDrawingEdit : FrameworkElement { public VisualCollection Visuals { get; set; } const double COLLISION_OPACITY = 0.8;

    public AreaDrawingEdit() { Visuals = new VisualCollection(this); } public void AddRenderTile(DrawingTile tile) { // Add the tile visual tile.visual = new DrawingVisual(); InvalidateTile(tile); Visuals.Add(tile.visual); // Add in collision visual tile.colVol.visual = new DrawingVisual(); InvalidateCollisionVol(tile.colVol); Visuals.Add(tile.colVol.visual); } public void RemoveRenderTile(DrawingTile tile) { Visuals.Remove(tile.visual); Visuals.Remove(tile.colVol.visual); } public void InvalidateTile(DrawingTile tile) { // Set up drawing rect for new tile Rect r = new Rect(tile.pos, new Size(tile.tileTex.src.PixelWidth, tile.tileTex.src.PixelHeight)); DrawingContext dc = tile.visual.RenderOpen(); dc.DrawImage(tile.tileTex.src, r); dc.Close(); } public void InvalidateCollisionVol(CollisionVol vol) { Rect r = new Rect(vol.pos, vol.size); DrawingContext dc = vol.visual.RenderOpen(); dc.PushOpacity(COLLISION_OPACITY); dc.DrawImage(vol.src, r); dc.Pop(); dc.Close(); } protected override int VisualChildrenCount { get { return Visuals.Count; } } protected override Visual GetVisualChild(int index) { if (index < 0 || index >= Visuals.Count) { throw new ArgumentOutOfRangeException(); } return Visuals[index]; } 

   }

2. Add the framework element thing you made into your xaml file somewhere. lessthan local:AreaDrawingEdit Canvas.Left="0" Canvas.Top="0" OpacityMask="Black" x:Name="areaDrawingEdit" backslashgreaterthan

Enjoy the solution to my misery of figuring it out the hard-way.