[Interest] Reuse Qml Shape

[Jérôme Godbout]

Hi,
I'm having a weird behavior with Qml Shape that try to reuse the same ShapePath. I have declare a new ShapePath each time it work for all of them, but if I do multiple shape with the same shape path, it only draw the first one!?

Working multiple circle:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Shapes 1.12

Window
{
    id: component
    width: 640
    height: 480
    property var sections: [{'x': 10, 'y': 10}, {'x': 30, 'y': 30}]
    property int circleRadius: 5

    Repeater
    {
        model: sections
        Shape
        {
            x: sections[index].x - component.circleRadius
            y: sections[index].y + component.circleRadius
            ShapePath // Empty circle
            {
                strokeColor: "blue"
                strokeWidth: 2
                fillColor: "transparent"

                PathArc {
                    x: 1; y: 0
                    radiusX: component.circleRadius
                    radiusY: component.circleRadius
                    useLargeArc: true
                }
            }
            Component.onCompleted: console.log(x,y)
        }
    }
}

Only draw a single Shape:


import QtQuick 2.12

import QtQuick.Window 2.12

import QtQuick.Controls 2.5

import QtQuick.Shapes 1.12



Window

{

    id: component

    width: 640

    height: 480



    property var sections: [{'x': 10, 'y': 10}, {'x': 30, 'y': 30}]

    property int circleRadius: 5



    ShapePath // Empty circle

    {

        id: path_

        strokeColor: "blue"

        strokeWidth: 2

        fillColor: "transparent"



        PathArc {

            x: 1; y: 0

            radiusX: component.circleRadius

            radiusY: component.circleRadius

            useLargeArc: true

        }

    }



    Repeater

    {

        model: sections

        Shape

        {

            x: sections[index].x - component.circleRadius

            y: sections[index].y + component.circleRadius

            data: [path_]

            Component.onCompleted: console.log(x,y)

        }

    }

}


Both print the log so both sections are rendered, but only one shape is draw.

This also work and draw 2 shapes:

import QtQuick 2.12

import QtQuick.Window 2.12

import QtQuick.Controls 2.5

import QtQuick.Shapes 1.12



Window

{

    id: component

    width: 640

    height: 480

    property var sections: [{'x': 10, 'y': 10}, {'x': 30, 'y': 30}]

    property int circleRadius: 5



    PathArc

    {

        id: pathArc_

        x: 1; y: 0

        radiusX: component.circleRadius

        radiusY: component.circleRadius

        useLargeArc: true

    }



    Repeater

    {

        model: sections

        Shape

        {

            x: sections[index].x - component.circleRadius

            y: sections[index].y + component.circleRadius

            ShapePath // Empty circle

            {

                strokeColor: "blue"

                strokeWidth: 2

                fillColor: "transparent"



                pathElements: [pathArc_]

            }

            Component.onCompleted: console.log(x,y)

        }

    }

}


So it's really ShapePath that cannot be reused, any link to the parent under the hood? only the first item get rendered. The shape are not set asynchronous, so it should not matter.



[36E56279]
une compagnie  [cid:image014.jpg at 01D4E97B.43F16610]
RAPPROCHEZ LA DISTANCE

Jérôme Godbout
Développeur Logiciel Sénior /
Senior Software Developer

p: +1 (418) 800-1073 ext.:109

amotus.ca<http://www.amotus-solutions.com/>
statum-iot.com<http://statum-iot.com/>
[cid:image015.png at 01D4E97B.43F16610]<https://www.facebook.com/LesSolutionsAmotus/> [cid:image016.png at 01D4E97B.43F16610] <https://www.linkedin.com/company/amotus-solutions/>  [cid:image017.png at 01D4E97B.43F16610] <https://twitter.com/AmotusSolutions>  [cid:image018.jpg at 01D4E97B.43F16610] <https://www.youtube.com/channel/UCoYpQgsmj1iJZyDjTQ3x8Ig>





-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190402/72e5dcc5/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image013.jpg
Type: image/jpeg
Size: 6726 bytes
Desc: image013.jpg
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190402/72e5dcc5/attachment.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image014.jpg
Type: image/jpeg
Size: 1015 bytes
Desc: image014.jpg
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190402/72e5dcc5/attachment-0001.jpg>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image015.png
Type: image/png
Size: 483 bytes
Desc: image015.png
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190402/72e5dcc5/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image016.png
Type: image/png
Size: 506 bytes
Desc: image016.png
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190402/72e5dcc5/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image017.png
Type: image/png
Size: 500 bytes
Desc: image017.png
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190402/72e5dcc5/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image018.jpg
Type: image/jpeg
Size: 713 bytes
Desc: image018.jpg
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190402/72e5dcc5/attachment-0002.jpg>