LineItem

The LineItem can be used to display colored single and segmented lines. More...

Import Statement: import VPlay 2.0
Since: V-Play 2.0.4
Inherits:

Item

Properties

Detailed Description

The LineItem is an element which can display primitive lines. The lines can have different segments and can be colored.

Example Usage

Following examples show different use cases of the LineItem.

Point-To-Point Line

This example demonstrates how to use the LineItem to create a simple white line with thickness 1 from one point to another.

 import VPlay 2.0
 import QtQuick 2.0

 GameWindow {
   Scene {
     LineItem {
       anchors.centerIn: parent
       points: [
         {"x": 0, "y": 0},
         {"x": 10, "y": 10}
       ]
     }
   }
 }

Point-To-Movingpoint Line

This example demonstrates how to connect lines to another object which can be moved.

 import VPlay 2.0
 import QtQuick 2.0

 GameWindow {
   Scene {
     id: scene

     LineItem {
       color: "green"
       points: [
         {"x":0, "y":0},
         {"x":mousePos.x, "y":mousePos.y}
       ]
     }

     LineItem {
       color: "red"
       points: [
         {"x":scene.width, "y":scene.height},
         {"x":mousePos.x+20, "y":mousePos.y+20}
       ]
     }

     Rectangle {
       id: mousePos
       width: 20
       height: 20
     }

     MouseArea{
       anchors.fill: parent
       onPositionChanged: {
         mousePos.x = mouseX
         mousePos.y = mouseY
       }
     }
   }
 }

See also PolygonItem.

Property Documentation

color : color

This property is used to define the color of the line. The default value is black.


lineWidth : int

This property is used to define the thickness of the line. The default value is 1.


points : variant

This property is used to provide the segment points of the line. Each point needs a x and y property stated as map properties. You can add as many points in the point array as you like.

 import VPlay 1.0
 import QtQuick 1.1

 GameWindow {
   Scene {
     LineItem {
       points: [
         {"x": 0, "y": 0},
         {"x": 40, "y": 10},
         {"x": 100, "y": 106},
         {"x": 20, "y": 310}
       ]
     }
   }
 }

rounded : bool

This property is used enable rounded edges at the start and the end of the line. The default value is false.


Videos

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support