blackberry - 如何使用qml在黑莓级联中舍入从网络下载的图像

Question

我有一个 ListView ，它在右侧显示用户详细信息列表，在左侧显示我从后端获取的个人资料图片。为了下载和加载图像，我使用了来自 github 的 webviewsample 图像类，它工作正常。现在我需要使图像变圆。当我在网上搜索时，我知道使用九个切片来做到这一点，但我不确定如何。我的每个列表项都有随机变化的不同背景。下面是我所做的和我真正想要的示例图像。

这是我当前的 ListView



这就是我需要的方式



这是显示此 View 的自定义列表项的代码

Container {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }

            Container {
                id:profileSubContainer 
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                layout: DockLayout {

                }  


            WebImageView {
                id: profilePic
                url: profilePicture

                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                scalingMethod: ScalingMethod.AspectFit
                visible: (profilePic.loading == 1.0)

            }


            ImageView {
                id: defaultPic
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                scalingMethod: ScalingMethod.AspectFit
                imageSource:  "asset:///Images/defaultProfile.png"
                visible:!profilePic.visible

            }


            layoutProperties: StackLayoutProperties 
            {
                spaceQuota: 1
            }
        }



            CustomButtonTextArea {
                id: userName
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 2
                }
                text: username
                textEditable: false
                textAreaStyle: getStyle()

            }



    }

Answer 1

如果您有不直接支持的旧版 Qt，那么一种相当黑客的方法是:

从背景图像中剪出一个圆孔(使用 Photoshop/GIMP 等)并将其保存为 PNG。

现在您需要做的就是以这样一种方式排列所有元素，使其看起来好像个人资料图片已被剪掉。如果您先放置个人资料图片，然后放置背景图片，背景图片将覆盖个人资料图片，只留下圆形部分可见(请注意，它应该是 PNG 才能正常工作)。

正确的顺序是:

   a. Profile Image
   b. Background Image
   c. Text 

您可以按该顺序编写这些元素，也可以使用 z元素的值(value)。

Image // Background Image 
{
    z = 2;  
}

Image // Profile Image 
{
    z = 1; 
}

Text  
{
    z = 3; 
}

附言这是伪代码，希望你能明白。我用 qt 4.8 long back 做了这样的事情，它的工作很有趣。

编辑 1。

如果您想要随机颜色的背景而不是图像(正如您在评论中所问的那样)，您可以尝试使用 Qt 来做到这一点。

使用 QPainter 或一些类似的类和一些剪贴蒙版来创建自定义背景来雕刻圆形部分。

将此类公开为 Qml 元素。

通过在绘图时传递随机颜色来使用它。

他们在这里谈论了类似的事情: http://qt-project.org/forums/viewthread/2066

附言自己还没有尝试过，但如果您遇到其他问题，这看起来是一个不错的方向。