Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Drawing lines in QML

From Wiki
Jump to: navigation, search

This article explains how to draw lines using the Qt Quick Rectangle element

Article Metadata
Tested with
Platform(s): Qt
Keywords: QML QtQuick
Created: oniongarlic (13 Dec 2012)
Last edited: hamishwillee (18 Mar 2013)


QML is an excellent way to describe your UI, but unfortunately it does lack an element for drawing arbitrary lines from point x1,y1 to x2,y2.

Fortunately there is the Rectangle element. And what is a rectangle with a height of 1 ? Rectangles can be set to be at x1,y1 with a specific rotation. And that gives us a line from x1,y1 with a rotation or slope. And there you have it, a line drawing algorithm straight from school. Calculate the length from x1,y1 to x2,y2 and that gives us the width of the rectangle. Then calculate the slope and we have the rotation we need.


import QtQuick 1.1
Rectangle {
id: l
property alias x1: l.x
property alias y1: l.y
property real x2: l.x
property real y2: l.y
color: "black"
height: 2
smooth: true;
transformOrigin: Item.TopLeft;
width: getWidth(x1,y1,x2,y2);
rotation: getSlope(x1,y1,x2,y2);
function getWidth(sx1,sy1,sx2,sy2)
var w=Math.sqrt(Math.pow((sx2-sx1),2)+Math.pow((sy2-sy1),2));
console.debug("W: "+w);
return w;
function getSlope(sx1,sy1,sx2,sy2)
var a,m,d;
var b=sx2-sx1;
if (b===0)
return 0;
if (a<0 && b<0)
return d+180;
else if (a>=0 && b>=0)
return d;
else if (a<0 && b>=0)
return d;
else if (a>=0 && b<0)
return d+180;
return 0;
This page was last modified on 18 March 2013, at 05:26.
408 page views in the last 30 days.