我有一个Map
的小型应用程序,我想制作类似小地图的东西。
白色区域(矩形,不是正方形,它是 1200x800px )代表Map
,绿色区域代表作物(半径为正方形的正方形(大约 800x800px )),我想从地图上获取。
每当我尝试这样做(我尝试使用ShaderEffectSource
和OpacityMask
)时,整个Map
都会被拿走并调整大小为正方形,因此输出会变形。
我只想占用Map
的那一部分,被绿色区域覆盖。
Rectangle {
id: map
width: 1200
height: 800
color: "white"
Rectangle {
id: mask
anchors.centerIn: parent
width: 800
height: 800
radius: width/2
}
}
我如何实现这样的目标?
感谢您的帮助!
编辑:这是我当前的代码
ShaderEffectSource {
visible: true
id: shaderEffect
anchors.centerIn: parent
width: parent.height
height: parent.height
sourceItem: map
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: map.height
height: map.height
radius: width/2
}
}
}
//编辑:已添加图片
我的变形结果
如您所见,地图已变形-地图组件的原始大小已从1200x800调整为800x800(圆形大小)。我的目标是裁剪掉圈外的所有内容。