在 WPF 中无缝平铺矩形

Question

我想在 WPF 中无缝平铺一堆不同颜色的矩形。也就是说，我想将一堆矩形并排放置，并且它们之间没有间隙。

如果所有内容都与像素对齐，则可以正常工作。但我也想支持任意缩放，理想情况下，我不想使用 SnapsToDevicePixels（因为当图像被缩小时它会影响质量）。但这意味着我的矩形有时会出现间隙。例如：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Background="Black">
  <Canvas SnapsToDevicePixels="False">
    <Canvas.RenderTransform>
      <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
    </Canvas.RenderTransform>
    <Rectangle Canvas.Left="25" Width="100" Height="100" Fill="#CFC"/>
    <Rectangle Canvas.Left="125" Width="100" Height="100" Fill="#CCF"/>
  </Canvas>
</Page>

如果 ScaleTransform 的 ScaleX 为 1，则 Rectangle 可以无缝地组合在一起。当它为 0.5 时，它们之间有一条深灰色的条纹。我明白为什么 - 组合的半透明边缘像素不会组合成 100% 不透明。但我想要一种方法来解决它。

我总是可以让矩形重叠，但我不会总是提前知道它们会采用什么模式（这是针对最终将支持地图编辑器的游戏）。此外，当事物以 in 方式放大时，这会导致重叠区域周围出现伪影（除非我在重叠部分做了斜切角，这是一项非常繁重的工作，并且仍然会在拐角处引起问题)。

有什么方法可以将这些矩形组合成一个组合的“形状”，可以在没有内部间隙的情况下呈现？我玩过 GeometryDrawing，它确实可以做到这一点，但是我看不到用不同颜色的画笔绘制每个 RectangleGeometry 的方法。

有没有其他方法可以让形状在任意变换下无缝平铺，而无需借助 SnapsToDevicePixels？

Answer 1

您可以考虑使用指南（请参阅GuidelineSet on MSDN）并覆盖 Rectangle 的 OnRender 方法，以便它们的边界与设备的像素边界对齐。 WPF 使用准则来确定是否以及在何处捕捉绘图。

在内部，它正是 SnapsToDevicePixels 用来确保对象与设备的像素对齐的方法，但是通过手动放置参考线，您将能够控制何时应用捕捉行为以及何时不应用捕捉行为（所以当您的图像一直放大，您可以避免绘制指南，或者仅在您的形状位于其他形状旁边的地方绘制指南，并依靠 WPF 的抗锯齿来处理其余部分）。您可能可以使用附加属性来执行此操作，以便您可以将其应用于任何元素，但如果它只是您需要此行为的一种类型的元素（例如矩形），则可能不需要值得付出额外的努力。

Microsoft 似乎也意识到了这个问题 - WPF 4.0 is expected to feature Layout Rounding，like the version in Silverlight 在启用布局舍入后在 Render pass 中舍入非整数值。

Answer 2

我猜这些间隙不是实际的间隙，而是绘制的笔触。当您缩小它时，您只需将笔画缩小到不再可见的程度。我试图用矩形的颜色绘制笔触，在任何比例上都可以正常工作。

&ltPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 背景="黑色"&gt &ltCanvas SnapsToDevicePixels="False"&gt &ltCanvas.RenderTransform&gt &ltScaleTransform ScaleX="0.5" ScaleY="0.5"/&gt &lt/Canvas.RenderTransform&gt &lt矩形画布.Left="25" 宽度="100" 高度="100" 填充="#CFC" 描边="#CFC"/&gt &lt矩形画布.Left="125" 宽度="100" 高度="100" 填充="#CCF" 描边="#CCF"/&gt &lt/画布&gt &lt/页面&gt