6

我想在 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% 不透明。但我想要一种方法来解决它。

我总是可以让矩形重叠，但我并不总是事先知道它们将采用什么模式（这是为最终将支持地图编辑器的游戏）。此外，当事物被放大时，这会导致重叠区域周围的伪影（除非我在重叠部分做了斜切角，这是一项非常大量的工作，并且仍然会在角落造成问题）。

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

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

4

2 回答 2

2

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

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

Microsoft 似乎也意识到了这个问题 - WPF 4.0 预计将具有 Layout Rounding 功能，与 Silverlight 中的版本一样，当启用布局舍入时，会在 Render pass 中舍入非整数值。

于 2009-06-07T20:52:16.627 回答
0

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

<页面 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      背景="黑色">
  <Canvas SnapsToDevicePixels="False">
    <Canvas.RenderTransform>
      <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
    </Canvas.RenderTransform>
    <Rectangle Canvas.Left="25" Width="100" Height="100" Fill="#CFC" Stroke="#CFC"/>
    <Rectangle Canvas.Left="125" Width="100" Height="100" Fill="#CCF" Stroke="#CCF"/>
  </画布>
</页面>
于 2012-11-21T10:07:04.327 回答