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

来源：互联网发布：中国10月份经济数据编辑：程序博客网时间：2024/05/01 21:58

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

import QtQuick 2.6import QtQuick.Window 2.2import QtQuick.Controls 2.2Window {    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();        }    }}}

阅读全文

0 0