Note that there are some explanatory texts on larger screens.

plurals
  1. POTiling rectangles seamlessly in WPF
    text
    copied!<p>I want to seamlessly tile a bunch of different-colored Rectangles in WPF. That is, I want to put a bunch of rectangles edge-to-edge, and not have gaps between them.</p> <p>If everything is aligned to pixels, this works fine. But I also want to support arbitrary zoom, and ideally, I don't want to use SnapsToDevicePixels (because it would compromise quality when the image is zoomed way out). But that means my Rectangles sometimes render with gaps. For example:</p> <pre><code>&lt;Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Black"&gt; &lt;Canvas SnapsToDevicePixels="False"&gt; &lt;Canvas.RenderTransform&gt; &lt;ScaleTransform ScaleX="0.5" ScaleY="0.5"/&gt; &lt;/Canvas.RenderTransform&gt; &lt;Rectangle Canvas.Left="25" Width="100" Height="100" Fill="#CFC"/&gt; &lt;Rectangle Canvas.Left="125" Width="100" Height="100" Fill="#CCF"/&gt; &lt;/Canvas&gt; &lt;/Page&gt; </code></pre> <p>If the ScaleTransform's ScaleX is 1, then the Rectangles fit together seamlessly. When it's 0.5, there's a dark gray streak between them. I understand why -- the combined semi-transparent edge pixels don't combine to be 100% opaque. But I would like a way to fix it.</p> <p>I could always just make the Rectangles overlap, but I won't always know in advance what patterns they'll be in (this is for a game that will eventually support a map editor). Besides, this would cause artifacts around the overlap area when things were zoomed way <em>in</em> (unless I did bevel-cut angles on the underlapping portion, which is an awful lot of work, and still causes problems at corners).</p> <p>Is there some way I can combine these Rectangles into a single combined "shape" that does render without internal gaps? I've played around with GeometryDrawing, which does exactly that, but then I don't see a way to paint each RectangleGeometry with a different-colored brush.</p> <p>Are there any other ways to get shapes to tile seamlessly under an arbitrary transform, without resorting to SnapsToDevicePixels?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload