如何使用qml圆形从黑莓级联中下载的图像

Question

我有一个列表视图，显示右侧的用户详细信息列表和左侧的配置文件图片，我从后端获取。为了下载和加载图像我使用github的webviewsample图像类，它工作正常。现在我需要制作图像。当我在网上搜索时，我理解九个切片是用来做这个但我不确定如何。我的每个listitem都有不同的背景，随机变化。以下是我所做的和我真正想要的样本图像。

这是我当前的列表视图

这就是我需要的方式

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

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旧版本不直接支持，那么 hackish 的方法就是：

1. 从背景图像中切出一个圆孔（使用Photoshop / GIMP等）并将其另存为PNG。



1. 现在您需要做的就是以出现的方式排列所有元素，就好像已删除了个人资料照片。如果您首先放置您的个人资料图片然后放置背景图片，背景图片会覆盖个人资料图片，只留下其中的圆形部分（请注意，它应该是PNG才能使其工作）。

正确的顺序是：

   a. Profile Image
   b. Background Image
   c. Text 

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

Image // Background Image 
{
    z = 2;  
}

Image // Profile Image 
{
    z = 1; 
}

Text  
{
    z = 3; 
}

P.S。这是伪代码，我希望你能得到这个想法。我做了类似这样的事情，长了qt 4.8，它很有魅力。

---

修改1。

如果你想要随机颜色的背景而不是图像（正如你在评论中提到的那样），你可以尝试使用Qt。

1. 使用QPainter或类似的类和一些剪贴蒙版创建自定义背景，以创建圆形部分。
2. 将此类公开为Qml元素。
3. 在绘图时通过随机颜色将其用于您的案例。

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

P.S。 Haven并没有自己尝试过，但如果你遇到困难，看起来就是一个很好的方向。

Answer 2

如果您不能使用OpacityMask，因为您的Qt版本不支持QtGraphicalEffects，您可以使用自Qt 5.0支持的Canvas同样的技巧。

Rectangle{
  id: root
  width: 400
  height: 400

  color: "gray"

  property string imageUrl: "./rabbid.jpg"

  Canvas{
    anchors{
        fill: parent
        margins: 50
    }

    Component.onCompleted:{
        loadImage(imageUrl); // Ready to be used in onPaint handler
    }

    onPaint:{
        console.log("Painting...");
        var context = getContext("2d");
        context.save();

        context.fillStyle = "black";
        context.arc(width/2, height/2, width/2, height/2, width);
        context.fill();

        context.globalCompositeOperation = "source-in";
        context.drawImage(root.imageUrl, 0, 0, width, height);

        context.restore();
    }
  }
}

结果：

自设置Context.globalCompositeOperation = "source-in"以来，上下文操作将在内部之前的绘图中完成。请查看Context2D以获取更多信息，并here查看复合操作的图形说明。