Stack polygons on top of each other, join by diagonal lines

Question

I want to do a perfectly simple thing. I want to draw two quadrilateral polygons, which have the top and bottom lines as parallel diagonals. I also want to draw these polygons stacked on top of each other.

However, after I draw the two polygons, there is a tiny but visible gap between them. It looks like this:

enter image description here

Here's the code that I use (I'm with Silverlight, which means WriteableBitmap):

var bmp = new System.Windows.Media.Imaging.WriteableBitmap((int)this.displayImage.Width, (int)this.displayImage.Height);

var polygon = new System.Windows.Shapes.Polygon()
{
    StrokeThickness = 0,

    Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Black),

    Points = new System.Windows.Media.PointCollection()
    {
        new System.Windows.Point(10, 10),
        new System.Windows.Point(100, 40),
        new System.Windows.Point(100, 130),
        new System.Windows.Point(10, 100)
    }
};

var polygon2 = new System.Windows.Shapes.Polygon()
{
    StrokeThickness = 0,

    Fill = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Colors.Black),

    Points = new System.Windows.Media.PointCollection()
    {
        new System.Windows.Point(10, 100),
        new System.Windows.Point(100, 130),
        new System.Windows.Point(100, 220),
        new System.Windows.Point(10, 190)
    }
};

bmp.Render(polygon, null);
bmp.Invalidate();
bmp.Render(polygon2, null);
bmp.Invalidate();

displayImage.Source = bmp;

Here displayImage is an Image control on the main grid.

What do I do to get rid of this gap?

P.S. If possible, I'd like solutions that do not use the WriteableBitmapEx library, as I don't want to drag an entire library into my project for such a small task. Also, if possible, I'd like to leave the polygons' size and coordinates the same.

Without being able to provide a solution, the problem looks like being due to Anti-aliasing. You could try and move the shapes a pixel up or down so the one being drawn second takes the solid black of the first one as the background. Or draw a black rectangle in the middle of the polygons, overlapping both — Jens, Apr 16 '15 at 20:23
@Jens: it's not that simple. The real code uses an ImageBrush, and your solution would cause undesirable visual artifacts. I just want their borders to be matching lines... — , Apr 16 '15 at 20:27
Can you make the StrokeThickness 1 pixel and see if the gap disappears? Jens is right, it's an anti-aliasing issue — Jon, Apr 16 '15 at 20:27
@Mangist: that would be undesirable, see my previous comment... — , Apr 16 '15 at 20:28
Try this RenderOptions.SetBitmapScalingMode(i, BitmapScalingMode.NearestNeighbor); RenderOptions.SetEdgeMode(i, EdgeMode.Aliased); — Jon, Apr 16 '15 at 20:30
If you don't want to use the WriteableBitmapEx library, then I suggest a WPF app with RenderOptions, or use an HTML5 Canvas with SVG instead. I don't know of any other options... — Jon, Apr 16 '15 at 20:45
@Mangist: I want this to work on Windows Phone, so, if there are no other options, I'll have to settle for WriteableBitmapEx. How do you do this with it? — , Apr 16 '15 at 20:46
I've never used the WriteableBitmapEx library, so I can't help but you can use an HTML5 app on Windows Phone 8 http://blogs.msdn.com/b/matthiasshapiro/archive/2013/02/15/getting-started-with-windows-phone-8-html5-apps.aspx — Jon, Apr 16 '15 at 20:48
By the way, why do you use two polygons in the first place instead of a single large one with a scaled texture in case of your imagebrush? — Jens, Apr 16 '15 at 21:31
@Jens: it's part of a grid distortion algorithm. I break a bitmap into lots of such polygons, then distort each of them, move the image from each original polygon to its distorted version, and render the distorted polygons. However, I get the nasty gaps between the rendered polygons... — , Apr 16 '15 at 21:33

Stack polygons on top of each other, join by diagonal lines

0 Answers0