如何在 wpf 中创建不缩放的不透明蒙版？答案

【问题标题】：How can I create an opacity mask in wpf that doesn't scale?如何在 wpf 中创建不缩放的不透明蒙版？
【发布时间】：2011-04-07 08:59:31
【问题描述】：

好的，我创建了一个具有透明度的 PNG-24。它基本上是一个灰度图像，在黑色和透明之间使用“颜色”而不是黑白。我这样做是为了可以将其用作彩色矩形的不透明度蒙版，从而仅使用单个图形以我想要的任何颜色渲染图像。

但是，就我的一生而言，我无法让 WPF 停止对 da*n 图像进行抗锯齿！！

我已在应用画笔的矩形上设置“SnapesToDevicePixels”...我已将 ImageBrush 的 Scale 设置为“None”...我已将其 ViewPort 和 ViewBox 设置为绝对单位和大小它们与源图像完全一致。但无论我怎么尝试，WPF 仍然坚持试图让事情变得顺畅！这太令人沮丧了！！！

所以...有人知道如何使用图像作为不透明蒙版，但不会丢失我们所做的像素精确绘图吗？我只是想让 WPF 在我们绘制它时渲染该死的东西，句号！

【问题讨论】：

请发布您的代码，根据经验，房间里可能有一头大象，您看不到，其他人会在他们看到您的代码的那一刻发现，否则您可能会在这里转圈.
@MarquelV：那你认为这个问题在对象树中不会更高？
这是一行代码...一个简单的 ImageBrush 设置为具有实心填充的矩形的不透明度蒙版。（好吧......如果你也包括矩形，两个。）任何地方都没有大象。画质也不错。我已经在几个程序中打开它，并使用屏幕放大镜来确保我没有在 Photoshop 中吐出一些东西。没关系。但是 WPF 仍在“增强”我故意锯齿状图像的边缘，但仅在用作画笔时。我也没有看到任何可以在画笔上设置的与像素对齐相关的内容。
对不起...我通过剪切复制对其进行了编辑，但它把它弄乱了。至于视觉树......再次......它只是一个矩形和一个图像画笔。那是我的测试窗口的根控制。当我删除不透明蒙版时，矩形与我正在使用的图像大小相同的像素固定（因为我将其设置为 SnapsToDevicePixels 并将其水平和垂直对齐设置为左上角）所以我知道它也不是.添加不透明蒙版、BAM...抗锯齿蒙版。
you 可以给我看一个你知道有效的例子吗？创建仅使用黑色和透明的菱形图像（例如 16x16）。没有其他的。将其加载到您已将 Viewport 和 ViewBox 设置为 0,0,16,16 和绝对单位的图像刷中，并且 TileMode 为 None 和 Stretch 也没有...将其设置为矩形的 OpacityMask使用 SnapsToDevicePixels 设置为 16x16，你仍然会得到该死的图像抗锯齿。

标签： wpf antialiasing imagebrush opacitymask snapstodevicepixels

【解决方案1】：

我已尝试重现您的问题。就像这样：

        <Rectangle Width="200" Height="200" Fill="Red">
            <Rectangle.OpacityMask>
                <ImageBrush ImageSource="/mask.png"/>
            </Rectangle.OpacityMask>
        </Rectangle>

mask.png 包含一个简单的对角线蒙版，就像矩形的一半是可见的，而另一半是 100% 透明的。并且 recrangle 正在渲染像素完美（以及别名，如您所愿）。我认为，您可能是 DPI 设置，这不是您显示器的原生设置，而 WPF 无法正确渲染图像。

【讨论】：

这就是我们拥有的确切代码，它为我们添加了“模糊”，但仅在用作画笔时。它也是具有适当 DPI 的原始分辨率 LCD，因此也不是这样。你的对角线是一条完美的对角线，源中只有黑色和透明像素吗？您的输出是否只有 100% 不透明和 100% 透明？同样，当我们直接使用图像时，我们得到了完美的结果，但当我们将它用作画笔时，就不行了。
我知道这已经过时了，但我掌握了两年多的 WPF 知识，我想我误解了你的回答。 DPI 问题可能是图形本身未设置为 96 DPI。 Photoshop 默认为 72，有些设计师忘记更改它。不过，不确定 UseLayoutRounding 会如何解决这个问题，但如果不出意外，我将投票赞成，以便其他人也可以将其视为可能的原因/原因。

【解决方案2】：

知道了！这是一个布局问题，由于某种原因，没有简单的方法可以改变。但是，您可以设置一个名为 UseLayoutRounding 的值来修复它。我只是将它设置在根级别（对于这个假样例，一个网格......）

<Grid UseLayoutRounding="True">
    ....
</Grid>

...和 BAM！奇迹般有效！ “有点”类似于“SnapsToDevicePixels”，但用于定位元素（即，它会舍入所有与布局相关的值，如左、宽度等，而 SnapsToDevicePixels 在渲染时将布局捕捉到屏幕上的像素。）

【讨论】：