Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
New Developer
Posts: 3
Registered: ‎09-06-2013
My Device: q10
My Carrier: ZaXeR

Draw shapes using QML

Hello, i want to draw some kinds of shapes like circles or rectangles using qml, but i don't know how can i do that.

 

Thanks

Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: Draw shapes using QML

[ Edited ]

you wont be able to draw anything using qml however you can use nineslice with a rounded image to produce 'rounded' containers.... it's touchy though.

similar post

http://supportforums.blackberry.com/t5/Native-Development/Rounded-border-for-imageview/td-p/2181833

 

alternatively you can use HTML5 (webview) or C++ 

 

one of the many various C++ methods

http://supportforums.blackberry.com/t5/Native-Development-Knowledge/Using-QImage-and-QPainter-to-Pre...

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Draw shapes using QML

For something more sophisicated you can also use one of the many graphics libraries around such as opengl, etc....

 

http://developer.blackberry.com/native/documentation/cascades/graphics_multimedia/embedded_graphics/


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
BlackBerry Development Advisor
Posts: 143
Registered: ‎03-08-2012
My Device: Z10
My Carrier: Bell

Re: Draw shapes using QML

Hi.

 

I'm currently finishing off a sample app built with the latest version of my Cascades OpenGL framework, first included in GoodCitizenCascades, and the latest version of the framework will include a custom view with a simple 2D graphics API to provide developers with a simple way to include 2D graphics in their apps.  I will try to include a custom control for the view to provide developers with some slots that they can call to render to the view from QML.  It might not be in the initial sample but if there is interest from the community, I will definitely prioritize it for a follow-up sample.  I will do my best to get that interface in place for the initial release.

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Draw shapes using QML

Sounds good.

 

On a different subject I haven't heard from you for a while about fixing peek on UI elements that have a left to right movement, anything going on on that?

 

No movement on JIRA either.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
BlackBerry Development Advisor
Posts: 143
Registered: ‎03-08-2012
My Device: Z10
My Carrier: Bell

Re: Draw shapes using QML

We switched to a new tracking system internally and the external system issues previously escalated became disconnected.  According to the corresponding issue on the new system, the issue was closed as the problem is gone on 10.2.  If you try the latest SDK release posted for 10.2, it should be fixed.  I will close the external issue now.

Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: Draw shapes using QML

does this mean we should comment on open tickets to bring them back to life?

Highlighted
BlackBerry Development Advisor
Posts: 143
Registered: ‎03-08-2012
My Device: Z10
My Carrier: Bell

Re: Draw shapes using QML

If it seems to be stuck in the same status for a while, feel free to add a comment. The assignee receives an e-mail whenever a comment is added. Sometimes, we just get busy and forget to check on older tickets that were escalated. Escalation to the internal ticket system is expected to be working again soon so newer issues should stay in sync after escalation going forward.
New Developer
Posts: 11
Registered: ‎04-03-2014
My Device: Blackberry Z10
My Carrier: Koodo

Re: Draw shapes using QML

Hey there, wondering if I can use this CustomControl you've created? Thanks

Developer
Posts: 1,177
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: Draw shapes using QML

[ Edited ]

I don't know how comfortable you are with a bit of C++ behind the scenes, but this is what I would try...

 

  • Inherit a new C++ class from bb/cascades/ImageView, call it something like DrawableImageView
  • Inside DrawableImageView define a private variable that holds a pointer to a QtImage
  • In the constructor create a QtImage and assign to the private variable
  • Create a private method that converts QtImage to Cascades Image (you can't go the other way)
  • Create Q_INVOKABLE public methods called drawCirc(...) and drawRect(...)
  • Write code for those functions that draws on the QtImage then converts it to Cascades Image
  • Call setImage() to update the DrawableImageView with the converted Image.
  • Call qmlRegisterType() to make DrawableImageView available from QML

Now from QML you should be able to do something like this...

 

Page {
    Container {
        DrawableImageView {
            id: div
paletteWidth: 100
paletteHeight: 100 } } onCreationCompleted: { div.drawCirc( 25, 25, 10 ); div.drawRect( 25, 35, 10, 15 ); } }

The reason we do our drawing on QtImage and then convert it is because the Cascades Image class is bare-bones and has no functionality for doing anything except importing image files. I realize this is not a pure QML solution, but once you create the DrawableImageView class all your coding after that is QML. I have a function in my app that does the QtImage >> Image conversion and I'd happily share it if you want to go this route. I may even be convinced to assist in coding the new class because it interests me.

 

 

EDIT: Just realized this is a VERY old thread, but it still interests me.

 



Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.  multiFEED Icon

Play nice: Clicking Like Button on posts that helped you not only encourages others to continue sharing their experience, but also improves your own rating on this board. Also, don't forget to accept a post if it solves your problem or answers your question.