如何在blackberry cascades中使用qml对从web下载的图像进行取整

我有一个listview，它在右边显示一个userdetails列表，在左边显示我从后端获得的profile pic。为了下载和加载图像，我使用了来自github的webviewsample图像类，它工作得很好。现在我需要把图像弄圆。当我在网上搜索时，我知道九层切片是用来做这件事的，但我不知道怎么做。我的每个列表项都有一个随机变化的不同背景。下面是我所做的和我真正想要的示例图像

这是我当前的列表视图

这就是我所需要的

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

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()

            }



    }

如果由于您的Qt版本不支持QtGraphicalEffects而无法使用，那么您可以使用Qt5.0以来支持的功能来执行相同的操作

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”

，因此将在以前的图形中执行上下文操作。查看以获取更多信息，并获取复合操作的图形说明。

如果您有较旧版本的Qt，但不直接支持此操作，则可以通过以下方式进行操作：

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

现在你所需要做的就是把所有的元素排列成这样，就好像剖面图已经被剪掉一样。如果先放置个人资料图片，然后放置背景图像，背景图像将覆盖个人资料图片，只留下可见的圆形部分（请注意，它应该是PNG以便工作）

正确的顺序是：

   a. Profile Image
   b. Background Image
   c. Text 

您可以按该顺序写入这些元素，也可以使用元素的

z

值

Image // Background Image 
{
    z = 2;  
}

Image // Profile Image 
{
    z = 1; 
}

Text  
{
    z = 3; 
}

另外，这是伪代码，希望你能理解。我用Qt4.8长背做了类似的事情，效果很好

---

编辑1。

如果您希望使用随机颜色的背景而不是图像（如您在评论中所要求的），您可以尝试使用Qt进行此操作

使用QPainter或类似类和一些剪切遮罩创建自定义背景，以雕刻出圆形部分

将此类作为Qml元素公开

通过在绘图时传递随机颜色，将其用于您的案例

他们在这里谈论类似的事情：

---

p.S.我自己还没有尝试过，但如果您遇到其他问题，这看起来是一个很好的方向。

我不知道级联是否可行，但您尝试过吗？正如我检查的，我需要在qml中导入QtGraphicalEffects 1.0，但它显示未知库，你知道我必须在我的pro文件中包含什么库才能访问它吗？你使用的是哪个版本的Qt？QtGraphicalEffects仅在Qt5.4中受支持。我使用momentics在blackberry cascades中实现了这一点。它使用cpp和qml。感谢您的回复，但不幸的是级联支持Qt4.8，我只能导入QtQuick 1.0，而不能导入具有Canvas类的2.0。有没有其他库可以包含在cascades中？对不起，我想cascades至少支持Qt5.0。我不知道任何直接的方法。可能您可以使用从QDeclarativeImageProvider继承的自定义类[向QML提供图像。当请求图像时，您将返回使用QPainter构建的图像，并返回与我的回答中所述相同的步骤。您提供的链接已断开。是否有其他参考链接？抱歉，它以括号结尾。这是一个好主意，但正如我前面提到的，我的背景随机填充颜色，因此固定背景不起作用好的，如果有100种颜色，我就必须创建100种像这样的背景。还有其他哈基什风格吗？；）