Qt Quick Beispiele – Canvas

„Canvas“ ist eine Sammlung kleiner QML-Beispiele zum Typ „ Canvas “. Jedes Beispiel ist eine kleine QML-Datei, die einen bestimmten Typ oder eine bestimmte Funktion hervorhebt.

Ausführen des Beispiels

Sie können das Beispiel wie folgt ausführen:

• Qt Creator

  Öffnen Sie den Modus „ Welcome “ und wählen Sie das Beispiel unter „ Examples “ aus. Weitere Informationen finden Sie unter Qt Creator: Tutorial: Erstellen und Ausführen.

• Qt Extension for Visual Studio Code

  Führen Sie den Befehl „ Qt: Open Qt examples “ über „ Command Palette “ aus und wählen Sie das Beispiel aus der Liste aus. Weitere Informationen finden Sie unter Qt Extension for Visual Studio Code: Tutorial: Erstellen und Ausführen.

Rotes Herz

„Red Heart“ verwendet die Bézier-Kurven-API, um ein rotes Herz zu umreißen und auszufüllen.

ctx.beginPath()
ctx.moveTo(75,40)
ctx.bezierCurveTo(75,37,70,25,50,25)
ctx.bezierCurveTo(20,25,20,62.5,20,62.5)
ctx.bezierCurveTo(20,80,40,102,75,120)
ctx.bezierCurveTo(110,102,130,80,130,62.5)
ctx.bezierCurveTo(130,62.5,130,25,100,25)
ctx.bezierCurveTo(85,25,75,37,75,40)
ctx.closePath()

Sprechblase

„Talk Bubble“ verwendet die „quadraticCurveTo()“-API, um eine benutzerdefinierte Sprechblase zu umreißen und zu füllen:

ctx.beginPath()
ctx.moveTo(75, 25)
ctx.quadraticCurveTo(25, 25, 25, 62.5)
ctx.quadraticCurveTo(25, 100, 50, 100)
ctx.quadraticCurveTo(50, 120, 30, 125)
ctx.quadraticCurveTo(60, 120, 65, 100)
ctx.quadraticCurveTo(125, 100, 125, 62.5)
ctx.quadraticCurveTo(125, 25, 75, 25)
ctx.closePath()

Dieses Beispiel veranschaulicht zudem die „fillText()“-API:

ctx.fillStyle = "white"
ctx.font = "bold 17px sans-serif"
ctx.fillText("Qt Quick", 40, 70)

Squircle

„Squircle“ nutzt eine Reihe einfacher „moveTo()“- und „lineTo()“-Pfad-APIs, um ein glattes Squircle zu zeichnen.

Abgerundetes Rechteck

„Abgerundetes Rechteck“ nutzt eine Reihe von „lineTo()“- und „arcTo()“-Pfad-APIs, um ein abgerundetes Rechteck zu zeichnen.

Lächelndes Gesicht

„Smile Face“ verwendet mehrere Pfade, um ein lächelndes Gesicht zu zeichnen und auszufüllen.

Ausschnitt

„Clip“ nutzt die „clip“-API, um ein bestimmtes Bild zu beschneiden.

ctx.clip()
ctx.drawImage(canvas.imagefile, 0, 0)

Tiger

„Tiger“ nutzt die SVG-Pfad-API, um mithilfe einer Reihe von SVG-Pfadzeichenfolgen einen Tiger zu zeichnen.

for (let i = 0; i < Tiger.tiger.length; i++) {
    if (Tiger.tiger[i].width !== undefined)
        ctx.lineWidth = Tiger.tiger[i].width

    if (Tiger.tiger[i].path !== undefined)
        ctx.path = Tiger.tiger[i].path

    if (Tiger.tiger[i].fill !== undefined) {
        ctx.fillStyle = Tiger.tiger[i].fill
        ctx.fill()
    }

    if (Tiger.tiger[i].stroke !== undefined) {
        ctx.strokeStyle = Tiger.tiger[i].stroke
        ctx.stroke()
    }
}

Beispielprojekt @ code.qt.io