How to design a triangle in qml?

[JasmineSethi]

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.

[J.Hilk]

hi @JasmineSethi

seems like a QML Canvas is what you're looking for

https://doc.qt.io/qt-5/qml-qtquick-canvas.html

[JasmineSethi]

Hi @J-Hilk ,

Thanks for your response but m not getting how to draw a triangle?

[J.Hilk]

@JasmineSethi
you define a Canvas element, let it fill the parent

and inside the onPaint signal you draw your rectangle using HTML5 syntax

Rectangle{
  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();
}
}

[KroMignon]

@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]

@J.Hilk

Can we rotate it to the position as shown in image?

[J.Hilk]

@JasmineSethi said in How to design a triangle in qml?:

@J.Hilk

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

[JaredTao]

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 }
      }
  }