How to design a triangle in qml?
-
I want to design a triangle in qml, how this can be done?
Below is a simple example:
Note: I don't want to use image.
-
seems like a QML Canvas is what you're looking for
-
Hi @J-Hilk ,
Thanks for your response but m not getting how to draw a triangle?
-
@JasmineSethi
you define a Canvas element, let it fill the parentand inside the
onPaint
signal you draw your rectangle using HTML5 syntaxRectangle{ width: 400 height:400 color:"black" Canvas{ anchors.fill:parent onPaint:{ var context = getContext("2d"); // the triangle context.beginPath(); context.moveTo(100, 100); context.lineTo(100, 300); context.lineTo(300, 300); context.closePath(); // the fill color context.fillStyle = "#FFCC00"; context.fill(); } }
-
@JasmineSethi said in How to design a triangle in qml?:
Thanks for your response but m not getting how to draw a triangle?
A good tutorial (in my eyes) for Canvas with QML can be found here: https://qmlbook.github.io/ch08-canvas/canvas.html
-
@JasmineSethi said in How to design a triangle in qml?:
Can we rotate it to the position as shown in image?
you have to modify the x and y values to fit your needs
these
context.moveTo(100, 100); context.lineTo(100, 300); context.lineTo(300, 300);
are just a basic example
-
canvas is slow, recommend use QtQuick.Shape
Shape { width: 200 height: 150 anchors.centerIn: parent ShapePath { strokeWidth: 4 strokeColor: "red" fillGradient: LinearGradient { x1: 20; y1: 20 x2: 180; y2: 130 GradientStop { position: 0; color: "blue" } GradientStop { position: 0.2; color: "green" } GradientStop { position: 0.4; color: "red" } GradientStop { position: 0.6; color: "yellow" } GradientStop { position: 1; color: "cyan" } } strokeStyle: ShapePath.DashLine dashPattern: [ 1, 4 ] startX: 20; startY: 20 PathLine { x: 180; y: 130 } PathLine { x: 20; y: 130 } PathLine { x: 20; y: 20 } } }