[Interest] [Quick Controls 2] Best way to add binding arrow tip to Popup?

[Oleg Evseev]

After looking on QSGDefaultRectangleNode::updateGeometry() where geometry
of standard rectangle with rounded corners is build, I decided to use
workaround with rotated qml rectangle.

As I mentioned before lack of this workaround: it is not appropriate
decision to set border and opacity simultaneously.
After all in other cases it looks pretty well.

But I found that using such tipped rectangle with border for *Popup *background
is not a good idea - changing width of application (and that is Popup)
quite often show 1px dark segment of border between tip and main rectangle
(see the pic):

[image: Встроенное изображение 1]
​
To manage border case I use anchors.leftMargin: -border.width of background
main rectangle so that tip triangle overlaps it and hide border segment.

But I found that even without border there is such dark 1px in Popup. Even
increasing x shift is not helping!
On this pic tip is the same size as previously but x offset is increased
for additional 10px.

[image: Встроенное изображение 3]

p.s. This appears not for all width of app/Popup.

p.p.s. Jérôme, in your code there is a mistake with shift. x at least
should be as long as half of diagonal of component.

I think even better would be as I did:

Item    {
        id: tip
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        width: tipsize
        height: tipsize
        clip: true

        Rectangle        {
            id: rect_
            width: tipsize/Math.SQRT2
            height: tipsize/Math.SQRT2
            transformOrigin: Item.TopLeft
            rotation: -45
            x: tipsize*0.5
            y: tipsize*0.5
        }
    }

2016-10-06 21:30 GMT+03:00 Jérôme Godbout <jerome at bodycad.com>:

> My bad, oups 90 deg and bad rotation center...
>
> Item
>
> {
>
> id: component
>
> property real sizing: 100
>
> property alias color: rect_.color
>
> property alias border: rect_.border
>
> width: sizing
>
> height: sizing
>
> clip: true
>
>
> Rectangle
>
> {
>
> id: rect_
>
> width: component.width
>
> height: component.height
>
> color: "gray"
>
> transform: Rotation { angle: 45 }
>
> // change the translation values based on orientation here
>
> x: component.width * -0.5
>
> y: 0
>
> }
>
> }
>
> On Thu, Oct 6, 2016 at 2:19 PM, Jérôme Godbout <jerome at bodycad.com> wrote:
>
>> More a workaround then a real solution, but could work as long as the
>> triangle is still sharp 90 angle.
>>
>> Item
>> {
>>   id: component
>>   property real sizing: 10
>>   property alias color: rect_.color
>>   property alias border: rect_.border
>>   width: sizing
>>   height: sizing
>>   clip: true
>>
>>   Rectangle
>>   {
>>      id: rect_
>>      width: component.width
>>      height: component.height
>>      color: "gray"
>>      // change the rotation values based on orientation here
>>      transform: Rotation { origin.x: 0; origin.y: 0; angle: 90 }
>>   }
>> }
>>
>> On Thu, Oct 6, 2016 at 7:12 AM, Oleg Evseev <ev.mipt at gmail.com> wrote:
>>
>>> Hi everyone,
>>>
>>> I'm interesting how to add arrow tip to popup, that looks like this:
>>>
>>>
>>>
>>> If I understand correctly, according to http://doc.qt.io/qt-5/qtquick-
>>> scenegraph-customgeometry-example.html I have an option to do custom
>>> shape qt quick item instead of simple rectangle with help of QSGGeometry.
>>>
>>> Is this a best way to do such things?
>>>
>>> Thanks in advance for recommendations.
>>>
>>> ---
>>> Regards, Oleg
>>>
>>> _______________________________________________
>>> Interest mailing list
>>> Interest at qt-project.org
>>> http://lists.qt-project.org/mailman/listinfo/interest
>>>
>>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20161009/23343a27/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: with border3.png
Type: image/png
Size: 6504 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20161009/23343a27/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: with border.png
Type: image/png
Size: 8023 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20161009/23343a27/attachment-0001.png>