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 <jer...@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 <jer...@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.m...@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@qt-project.org
>>> http://lists.qt-project.org/mailman/listinfo/interest
>>>
>>>
>>
>
_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest
