令我惊讶的是, Image
组件没有 radius
属性 . 我尝试通过将图像放在圆形的 Rectangle
中来模拟圆角,但它不会剪切角落 .
Rectangle {
anchors.right: rectContentBg.left
anchors.top: rectContentBg.top
anchors.margins: 8
radius: 8
width: 64
height: 64
Image {
id: imgAuthor
opacity: 1
smooth: false
anchors.fill: parent
source: "qrc:/res/sample_avatar.jpg"
}
}
如何正确创建圆角图像?
7 回答
由于
QtGraphicalEffects
模块,在Qt 5中存在内置的官方解决方案,我很惊讶地发现没有人提供这样简单的解决方案 .在其他效果中,
OpacityMask
是为此目的而被利用的类型 . 我的想法是使用Rectangle
屏蔽源Image
,该Rectangle
已正确设置radius
. 这是使用layering的最简单的例子:这个最小代码为方形图像产生了很好的结果,但它也通过
adapt
变量考虑了非方形图像 . 通过将标志设置为false
,无论图像大小如何,生成的蒙版始终为圆形 . 这是可能的,因为使用外部Item
填充源并允许真正的掩码(内部Rectangle
)在适当的大小 . 你可以显然摆脱外部的Item
,如果你只是瞄准一个填充源的面具,无论它的纵横比如何 .这是一个可爱的猫图像,方形格式( left ),非方格式
adapt: true
( center ),最后是非方格式和adapt: false
( right ):这个解决方案的实现细节非常类似于其他nice answer中基于着色器的答案(cfr . 可以找到
OpacityMask
的QML源代码here -SourceProxy
只返回格式正确的ShaderEffectSource
来提供效果) .如果您不想依赖
QtGraphicalEffects
模块(实际上,在存在OpacityMask.qml
的情况下),您可以使用着色器重新实现效果 . 除了已经提供的解决方案,另一种方法是使用step,smoothstep和fwidth函数 . 这是代码:与第一种方法类似,添加
rounded
和adapt
属性以控制效果的视觉外观,如上所述 .当您的背景是纯色或者您从未移动图像时,快速制作圆角的方法是将
Image
与仅绘制角落的另一个(或BorderImage)重叠 .如果这不是一个选项,但您使用的是OpenGL,那么另一种方法是通过像素着色器将遮罩应用于图像 . 有关在Qt 4之上工作的插件,请参阅http://blog.qt.digia.com/blog/2011/05/03/qml-shadereffectitem-on-qgraphicsview/ .
最后,还可以编写一个预处理图像的QDeclarativeImageProvider来使角落变圆 .
QML目前仅支持矩形剪切,但您可能需要查看qt-components项目中的DeclarativeMaskedImage:
http://qt.gitorious.org/qt-components/qt-components/blobs/master/src/symbian/sdeclarativemaskedimage.h
如果您有单色背景,则可以使用顶部圆角矩形的边框进行绘制 .
这段代码可以帮到你
我知道我参加派对有点晚了,但是我通过谷歌搜索来到这里,所以我想我会帮助后代:) QtGraphicalEffects OpacityMask应该更简单地做到这一点(我有层效应方法的问题)
虽然接受的答案和the one from @fury对我来说同样有效(Qt 5.9.3),但是当应用于光栅图像(没有SVG的那些)时,它们都在角落中留下了一些像差 . 在所有情况下最适合我的是将
OpacityMask
应用于周围的项目,例如喜欢原帖中的矩形 .