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

Jérôme Godbout jerome at bodycad.com
Fri Oct 7 16:29:43 CEST 2016


Another fully Qml way (I did something similar for rounded corner filled
ouside rectangle) is to use a Shader:

import QtGraphicalEffects 1.0
ShaderEffect
{
  property color colorInside: "red"
  property color colorBorder: "black"
  fragmentShader: "
//write fragment shader here
varying highp vec2 qt_TexCoord0;
uniform sampler2D src;
uniform vec4 colorInside;
uniform vec4 colorBorder;
...
void main
{
gl_FragColor = vec4(...);
}
"
  ShaderEffect {}
}

This could be a simple way of doing this, could give the triangle or shape
info to the shader and use the sampler2D coordinate to choose the proper
color.

Surely the QSGGeometry Node is the best solution, but this one can lead to
easier testing for maket or quick demo.

Jerome


On Fri, Oct 7, 2016 at 2:51 AM, Oleg Evseev <ev.mipt at gmail.com> wrote:

> > using an Image is a very simple solution
>
> Thanks for suggestion!
>
> 2016-10-07 8:27 GMT+03:00 Gunnar Sletta <gunnar at sletta.org>:
>
>> Although you can do a custom shape like this using QSGGeometryNode, using
>> an Image is a very simple solution which also gives you complete control
>> over the look and how it integrates with the rest of the popup. And all
>> from QML..
>>
>> cheers,
>> Gunnar
>>
>> > On 06 Oct 2016, at 21:22, Oleg Evseev <ev.mipt at gmail.com> wrote:
>> >
>> > But lack of this solution - you can not set the opacity of such
>> constructed popup :)
>> >
>> > Plus, I think, set elevation to get shade of popup without doing it for
>> arrow tip will not have a good look.
>> >
>> > 2016-10-06 22:16 GMT+03:00 Oleg Evseev <ev.mipt at gmail.com>:
>> > And yes I understand that this could be done with help of clipping
>> rotated rectangle by half and get it ahead of popup with border offset
>> overlap.
>> >
>> > But lack of this solution - you can not set the opacity of such
>> constructed popup :)
>> >
>> >
>> > 2016-10-06 22:11 GMT+03:00 Oleg Evseev <ev.mipt at gmail.com>:
>> > Thanks for suggestion, Jérôme.
>> > I thought about such workaround, but for me it would be very nice to
>> have border of such popup.
>> >
>> > 2016-10-06 21:19 GMT+03:00 Jérôme Godbout <jerome at bodycad.com>:
>> > 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
>> >
>> >
>> >
>> >
>> >
>> > _______________________________________________
>> > Interest mailing list
>> > Interest at qt-project.org
>> > http://lists.qt-project.org/mailman/listinfo/interest
>>
>>
> _______________________________________________
> 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/20161007/291e44ba/attachment.html>


More information about the Interest mailing list