利用QML画布实现一个泡泡对话 talk bubble

偶尔查看Qt官网的例子\Qt5.9.1\Examples\Qt-5.9.1\quick\canvas\quadraticCurveTo），发现有一个利用canvas画布实现的泡泡对话。类似于微信等聊天的效果。做了简单修改。

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    id:mainwindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Column {
       // anchors.bottom: mainwindow.top
        //y:mainwindow.height-100;
        anchors.bottomMargin: 12
        Text {
            text: qsTr("Outline")
        }
        Slider {id:lineWidthCtrl; from:1; to:10; value:2;}

        Text {
            text: qsTr("Scale")
        }
        Slider {id:scaleCtrl; from:0.1; to:5; value:1; }

        Text {
            text: qsTr("Rotate")
        }
        Slider {id:rotateCtrl; from:0; to:Math.PI*2; value:0; }

    Canvas {
        id: canvas
        //anchors.bottom: rotateCtrl.bottom
        width: 320
        height: 280

        property color strokeStyle:  Qt.darker(fillStyle, 1.3)
        property color fillStyle: "#14aaff" // blue
        property int lineWidth: lineWidthCtrl.value
        property bool fill: true
        property bool stroke: true
        property real alpha: 1.0
        property real scale : scaleCtrl.value
        property real rotate : rotateCtrl.value

        antialiasing: true

        onLineWidthChanged:requestPaint();
        onFillChanged:requestPaint();
        onStrokeChanged:requestPaint();
        onScaleChanged:requestPaint();
        onRotateChanged:requestPaint();

        onPaint: {
            var ctx = canvas.getContext('2d');
            var originX = 75
            var originY = 75

            ctx.save();
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.translate(originX, originX);
            ctx.strokeStyle = canvas.strokeStyle;
            ctx.fillStyle = canvas.fillStyle;
            ctx.lineWidth = canvas.lineWidth;

            ctx.translate(originX, originY)
            ctx.rotate(canvas.rotate);
            ctx.scale(canvas.scale, canvas.scale);
            ctx.translate(-originX, -originY)

            // ![0]
            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();
            // ![0]

            if (canvas.fill)
                ctx.fill();
            if (canvas.stroke)
                ctx.stroke();

            // ![1]
            ctx.fillStyle = "white";
            ctx.font = "bold 17px sans-serif";
            ctx.fillText("Qt Quick", 40, 70);
            // ![1]
            ctx.restore();
        }
    }
}


}