Question

是否可以在应用中显示非矩形项？

每个元素的右上边缘被剪裁：

我关闭了canvas元素上的剪辑并设置了剪辑上下文的区域。我甚至允许在外面画画路径。这是我用来绘制它的内容：

Canvas
{
    //id: root
    // canvas size
    height: parent.height - 8
    width: height
    anchors.top: parent.top + 4
    clip: false
    z: index + 1
    // handler to override for drawing
    onPaint:
    {
        // get context to draw with
        var ctx = getContext("2d")
        ctx.reset();

        // path that includes 1 pixel margin on all sides
        ctx.beginPath()
        ctx.moveTo( 8, 0 )
        ctx.lineTo( width + 4, 0 )
        ctx.lineTo( width - 4, height )
        ctx.lineTo( 0, height )
        ctx.closePath()
        ctx.clip();

        // setup the stroke
        ctx.lineWidth = 2
        ctx.strokeStyle = "white"
        ctx.beginPath()
        ctx.moveTo( 9, 1 )
        ctx.lineTo( 9 + width, 1 )
        ctx.lineTo( 1 + width, height - 1 )
        ctx.lineTo( 1, height - 1 )
        ctx.closePath()
        ctx.fillStyle = (roleStatus.toLowerCase().indexOf("success")!==-1) ? "green" : "red"
        ctx.fill()
        ctx.stroke()
    }
}

这将在Windows和Android上使用。

由于

Answer 1

是......您可以使用PaintedItem直接在项目上使用C ++中的Native Paint工具进行绘制，例如QPainterPath

结帐http://doc.qt.io/qt-5/qtquick-customitems-painteditem-example.html

你的画布剪裁的原因是你画的宽度+4应该是(width - 8)，但是因为你先移动到(8,0)，所以你最终画了一个额外的4像素太远了。尝试通过执行moveTo（4,0）将项目移动超过4个像素，或者通过仅使用宽度而不是width + 4来缩短线条

同时退房：anchors.fill: parent最有可能在您的情况下效果更好。

我避免像这样的疯狂错误的方法是不要硬编码宽度，高度，x或y进入我的应用程序..而是使用百分比，如

(parent.width * 0.25)获得父母的1/4

这是您修改代码的唯一方法......

Canvas
{
    //id: root
    // canvas size
    height: parent.height * 0.95
    width: height
    anchors.top: parent.top
    clip: false
    z: index + 1
    // handler to override for drawing
    onPaint:
    {
        // get context to draw with
        var ctx = getContext("2d")
        ctx.reset();

        // path that includes 1 pixel margin on all sides
        ctx.beginPath()
        ctx.moveTo( width * 0.1, 0 )
        ctx.lineTo( width * 0.9, 0 )
        ctx.lineTo( width * 0.7, height )
        ctx.lineTo( 0, height )
        ctx.closePath()
        ctx.clip();
        /* etc etc */
    }
}

Answer 2

我无法找到在项目范围之外绘制的方法。我能够达到我想要的效果。我在项目的边界内绘制了多边形并设置了“间距”。 ListView的属性为负值。这会重叠绘制的项目以获得所需的外观：

QML画布剪裁 - 非矩形可能吗？

2 个答案: