问题标签 [opacitymask]

我目前正在创建一个虚拟仪表板，我想在此链接中获取针后面的进度条类型：https ://forum.qt.io/topic/89307/qml-circular-gauge-styling-needle-trailing -颜色发光。

到目前为止，我只使用 Canvas 完成了针状进度条。我不明白如何使用 conicalGradient 和不透明蒙版来达到我需要的效果。

我将非常感谢带有解释的示例代码。

这是在黑暗中拍摄的，但也许有办法做到这一点：

我在 中的行和伪列中布置了数据<svg>，并且我在伪表中“低亮”了不活动的伪列。一次只有一组连续的列是“活动的”，所以它是两个低光区域，一个在活动列的每一侧。

我目前使用<rect>放置在表格顶部的两个元素来执行此操作。这些矩形填充了与网页正文背景相同的颜色。表格本身没有背景填充，它是透明的，并且 HTML 正文的背景颜色会透出来。在 javascript 中，我动态设置这两个矩形的大小和位置，以及它们的不透明度。它们的不透明度是造成低光效果的原因。我没有突出显示活动列，而是降低了非活动列中数据的不透明度。

这有效，但它阻止我将背景纹理应用于文档正文。在这些低光区域和文档正文之间对齐图案几乎是不可能的。我想知道是否有任何方法可以使用面罩或过滤器来做到这一点。我没有看到，但也许其他人看到了。

我看到这样做的唯一方法是更多地了解非活动列，并为这些列内的数据设置不透明度。但它们是 SVG 列，伪列。这是乐谱，不是数字/文本数据，列是音乐中的小节。SVG 不会通过度量来分隔数据，让我隔离所有非活动度量并更改它们的不透明度。这将是一项重大的重组工作，并将显着增加项目的规模和复杂性，以实现相对较小的视觉改进。

我尝试通过这个 xaml 为 wpf 中的图像制作不透明蒙版：

这个 xaml 可以正常工作并且很好，但是当我将Elementname更改为border1时不起作用？为什么会这样？

编辑（另一个问题）：

在上面的 xaml 中，直到我设置了边框 2 的背景属性，图像才会显示，但是会 发生这种情况吗？为什么没有背景属性图像不显示？

我有一个包含图像的矩形。我正在尝试创建带有黑色边框的圆形图像。我试过使用 OpacityMask，但是当我这样做时，它会降低图像质量。在边框和图像之间的某些地方也有非常少量的空白。我提供了下面的代码。注释掉的行是我尝试过但无济于事的事情。我还尝试使用单独的兄弟 OpacityMask 使包含在 Item 中的 Rectangle 和 Image 兄弟姐妹但得到相同的结果。

有谁知道这样做的更好方法。还有谁知道创建边界的更好方法 - 目前我正在通过使用停止覆盖边界的图像

任何人都知道如何解决这个问题？

我没有任何代码可以展示，因为我不知道从哪里开始，这就是我发布这个的原因。

我的计划是在带有隐藏背景图像的 WPF App WrapWindow 上动态加载大约 7000 个单词的字符串数组。文本应该是透明的以暴露后面的图像（类似于标签云）。我已附上示例的链接，这将帮助您可视化问题。

我曾尝试使用 ImageBrush，但它不支持直接内容（即字符串）。我也尝试过使用不透明蒙版，但没有任何成功。

为了给你一个想法，下面是图片和链接到类似的未回答的主题，但我试图达到的效果。

不透明背景的透明文本

欢迎任何想法。

谢谢

好的，这就是我目前所拥有的，也是我能够用单个硬编码字符串实现的。

简单的 xaml、图像作为背景和 WrapPanel，它由 TEST STRING 以按钮的形式动态填充。

只是背后代码的草稿副本。

这给了我下面的输出：

然后，经过一些实验，我资助了将 VisulaBrush 设置为 TextBlock 的方式应用图像不透明蒙版，这给了我想要的效果。现在的问题仍然是我将如何使用字符串数组动态地做与上面相同的事情，但效果如下？

BrushVisual 只能有一个 Item，所以我将 WrapPanel 放在 MaterialDesign DialogHost 中。我现在可以用我的字符串填充 WrapPanel。我现在遇到的问题是，无论我做什么，我都无法控制按钮上的文本大小，而且当我调整窗口大小时，我放置的按钮越多，图像就会被扭曲和挤压（下图）并拉伸或压缩。

我正在尝试创建一个圆角矩形，顶部填充纯色，下部填充文本。我正在用另一个矩形（红色的innerTopRectangle ）覆盖圆角矩形的上部（白色的outerRectangle和黑色的边框）。但是，不是舍入我的 innerTopRectangle 的顶部，而是舍入底部的角：

我希望innerTopRectangle在顶部四舍五入（裁剪并在outerRectangle边框内），但在底部平坦。

有人可以提出什么问题吗？从逻辑上讲，我认为我的 opacitymask 顶部应该锚定到我的 innerTopRectangle 上，并且由于 innerTopRectangle 没有那么高，所以只应该掩盖顶角。

我有一个六边形Polygon，我试图将其用作OpacityMask，然后在多边形内包含可以滚动并在边缘被剪裁的内容。我遇到的问题是，随着内容的移动，OpacityMask它也会随之移动（尽管数量不同）。下面是我的代码：

如何锚定不透明蒙版，以便网格内容可以在蒙版保持静止的情况下移动？

编辑：回答结果和附加测试

使用提供的答案中的代码，我仍然可以移动六边形：

开始： 开始状态 结束： 结束状态

但是，我发现通过添加第二个透明的矩形并沿红色矩形的相反方向移动，我可以达到预期的效果。虽然这确实有效，但似乎应该有更好的方法来做到这一点。

我有一组图像，我需要将其旋转 90 度才能放入将打印在纸张上的网格中。

我原来的带有图像包的 UserControl 比更高的更宽，所以我将它旋转了 90 度。

我的问题是，如果我保持适当的容器大小，则在旋转之前绘制在容器外部的图像包部分将不会出现在旋转的元素中。

如果我让容器变大以适应未旋转的包装，然后旋转，它看起来不错，但之后我无法缩小容器。

我最后的尝试是用纸张大小创建一个边框，并将其用作旋转元素上的 OpacityMask。像这样：

这是它在 VisualStudio 编辑器中的样子：

但这就是我启动程序并且纸张显示为嵌入时的样子：

欢迎任何关于如何在没有过度生长的容器的情况下旋转或事后正确涂抹面膜的解决方案。

这是我到目前为止所拥有的：

• aRadialGradient如下图蓝色
• aShape如下图绿色

然而，我想要的是使用RadialGradientas ，OpacityMask这样绿色的外环Shape是 100% 不透明的，但直线应该在图像中间逐渐变细以完全透明。到目前为止，我的任何努力都没有奏效。当我同时设置 theRadialGradient和Shapetovisible: false时，除了要在其中绘制所需图像的黑匣子外，我什么也得不到。

一个理想的答案还可以解释如何解决此类问题以解决问题。

在这里，我得到了一些用 ID2D1RenderTarget::FillOpacityMask 渲染的图像（我实际上用 ID2D1DeviceContext2 指针调用了这个函数，但它引用了 ID2D1RenderTarget 接口......）。

所以我对渲染质量不满意。原始图像具有完美的分辨率，并且比我渲染它的限制矩形大得多。

这是我使用的代码。选择D2D1_INTERPOLATION_MODE喜欢DrawBitmap或喜欢DrawImage不需要任何因素。

如何提高渲染质量？