平铺后如何在QML中获得圆角按钮图像

Posted 2023-02-16

【中文标题】平铺后如何在QML中获得圆角按钮图像

【英文标题】：How to get rounded Corner button image in QML after tiling

【发布时间】：2013-03-13 07:15:36

【问题描述】：

我有带有圆形按钮图像的按钮图像。我正在平铺图像以在 QML 中获得更大的按钮。我将父级用作矩形，将图像用作 BorderImage。平铺后，顶部图像上的矩形可见。我需要删除矩形的一部分，以便只有圆形按钮图像（具有透明度）可见。即使我需要更改后面矩形的颜色，以便可以进行彩色动画。

请提出有效的方法来删除后面的矩形并提供彩色动画。

我将圆形按钮边框图像附加为附件和用于平铺按钮图像的源代码。

Rectangle
id:outerBorderRect
smooth:true
anchors.fill:parent
//opacity:.25
//border.width:0
BorderImage

id:innerBorderRect
smooth:true
anchors.fill:parent
borderleft:20;top:16;right:17;bottom:20
horizontalTileMode:BorderImage.Round
verticalTileMode:BorderImage.Round

source:"button_3.png"

【问题讨论】：

这是众所周知的缺少掩码问题，我认为 Qt Quick 2 中仍然存在。到目前为止，我遇到的唯一解决方案是用 C++ 编写自己的 QML 组件，然后使用它.

【参考方案1】：

一个简单的半破解方法是使用Rectangle 中的radius 属性来隐藏按钮的角。

或者您可以使用 Qt 的 OpacityMask 来使用适当的掩码。

我不确定您要寻找哪种动画。你必须提供更多细节让我回答这部分。