Canvas

画布元素（canvas element）的基本思想是使⽤⼀个2D对象来渲染路径。这个2D对象包括了必要的绘图函数，画布元素（canvas element）充当绘制画布。2D对象⽀持画笔，填充，渐变，⽂本和绘制路径创建命令。canvas项目允许绘制直线和曲线，简单和复杂的形状，图形以及参考的图形图像。它还可以添加文本，颜色，阴影，渐变和图案，并执行低级像素操作。canvas输出可以保存为图像文件或序列化为URL。

在QML中，画布元素（canvas element）充当了绘制的容器。2D绘制对象提供了实际绘制的⽅法。绘制需要在onPaint事件中完成以下代码创建一个Canvas项目，画一条直线。

典型绘制命令调⽤如下：

1. 装载画笔或者填充模式

2. 创建绘制路径

3. 使⽤画笔或者填充绘制路径

import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Canvas {id: mycanvaswidth: 100height: 200onPaint: {var ctx = getContext("2d");// setup the strokectx.strokeStyle = "red"// create a pathctx.beginPath()ctx.moveTo(50,50)ctx.lineTo(150,50)// stroke pathctx.stroke()}}
}

在绘制矩形时，我们提供了⼀个便捷的接⼝，而不需要调⽤stroke或者fill来完成。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4Window {visible: truewidth: 640height: 480title: qsTr("Hello World")//定位元素，画四个带颜色的正方形Row {id: colorToolsanchors {horizontalCenter: parent.horizontalCentertop: parent.toptopMargin: 8}property color paintColor: "#33B5E5"spacing: 4//清楚按钮Button {text: "Clear"onClicked: {canvas.clear()}}//绑定点击更换颜色Repeater {model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]Rectangle {id: colorSquare;width: 48; height: 48color: modelDatasignal clickedproperty bool active: falseborder.color: active? "#666666" : "#f0f0f0"border.width: 2MouseArea {id: area1anchors.fill :parentonClicked: {colorTools.paintColor = color}}}}}//画框Rectangle{anchors.fill: canvasborder.color: "#666"border.width: 4;}Canvas {id: canvasanchors {left: parent.leftright: parent.righttop: colorTools.bottombottom: parent.bottommargins: 8}property real lastXproperty real lastYproperty color color: colorTools.paintColor  //继承颜色//清除函数function clear() {var ctx = getContext('2d')ctx.reset();canvas.requestPaint();}onPaint: {var ctx = getContext('2d')ctx.lineWidth = 1.5ctx.strokeStyle = canvas.colorctx.beginPath()ctx.moveTo(lastX, lastY)lastX = area.mouseXlastY = area.mouseYctx.lineTo(lastX, lastY)ctx.stroke()}MouseArea {id: areaanchors.fill: parentonPressed: {canvas.lastX = mouseXcanvas.lastY = mouseY}onPositionChanged: {canvas.requestPaint()}}}
}

效果如下：

画布绘制（Canvas Paint）

1. 在这个例⼦中我们将使⽤画布（Canvas）创建⼀个简单的鼠标绘制程序。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4Window{id: rootwidth: 640height: 480visible: true//鼠标点击坐标位置property real startX     //储存鼠标开始时的坐标property real startYproperty real stopX      //储存鼠标结束时的坐标property real stopY//在root上画一个方框Rectangle{anchors.fill: canvasborder.color: "#666"border.width: 4;}//创建一个画布Canvas{id:canvas;anchors.fill:parentonPaint: {var ctx = getContext("2d")ctx.lineWidtn = 3ctx.strokeStyle = "blue";//开始绘制ctx.beginPath()ctx.moveTo(startX,startY)//纪录鼠标开始的位置的坐标点startX = area.mouseX;startY = area.mouseY;ctx.lineTo(startX,startY)ctx.stroke()}}MouseArea{id:area;anchors.fill: parent;//当鼠标按下时调用本函数onPressed: {startX = mouse.x;startY = mouse.y;isMouseMoveEnable = true}//当鼠标释放时调用本函数onReleased: {isMouseMoveEnable = falsecanvas.requestPaint()      //当鼠标released时，调用绘制paint}//当鼠标press位置改变，调用本函数onPositionChanged: {if (isMouseMoveEnable){canvas.requestPaint()   //绘制函数}}}
}

效果如下：

对上述例子进行扩展：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Row {id: colorToolsanchors {horizontalCenter: parent.horizontalCentertop: parent.toptopMargin: 8}property color paintColor: "#33B5E5"spacing: 4Button {text: "Clear"onClicked: {canvas.clear()}}Repeater {model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]Rectangle {id: colorSquare;width: 48; height: 48color: modelDatasignal clickedproperty bool active: falseborder.color: active? "#666666" : "#f0f0f0"border.width: 2MouseArea {id: area1anchors.fill :parentonClicked: {colorTools.paintColor = color}}}}}Rectangle{anchors.fill: canvasborder.color: "#666"border.width: 4;}Canvas {id: canvasanchors {left: parent.leftright: parent.righttop: colorTools.bottombottom: parent.bottommargins: 8}property real lastXproperty real lastYproperty color color: colorTools.paintColorfunction clear() {var ctx = getContext('2d')ctx.reset();canvas.requestPaint();}onPaint: {var ctx = getContext('2d')ctx.lineWidth = 1.5ctx.strokeStyle = canvas.colorctx.beginPath()ctx.moveTo(lastX, lastY)lastX = area.mouseXlastY = area.mouseYctx.lineTo(lastX, lastY)ctx.stroke()}MouseArea {id: areaanchors.fill: parentonPressed: {canvas.lastX = mouseXcanvas.lastY = mouseY}onPositionChanged: {canvas.requestPaint()}}}
}

效果如下：

2. 鼠标绘制长方形，无绘制轨迹

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4Window{id: rootwidth: 640height: 480visible: true//鼠标点击坐标位置property real startX     //储存鼠标开始时的坐标property real startYproperty real stopX      //储存鼠标结束时的坐标property real stopYproperty bool isMouseMoveEnable: false //是否允许鼠标移动绘制事件//在root上画一个方框Rectangle{anchors.fill: canvasborder.color: "#666"border.width: 4;}//创建一个画布Canvas{id:canvas;anchors.fill:parentonPaint: {var ctx = getContext("2d")ctx.lineWidtn = 3ctx.strokeStyle = "blue";if (!isMouseMoveEnable) {ctx.clearRect(0,0,width,height) //清空所画图形return;}if (isMouseMoveEnable){ctx.clearRect(0,0,width,height)}//开始绘制ctx.beginPath()ctx.moveTo(startX,startY)//记录移动终点stopX = area.mouseXstopY = area.mouseY//绘制长方形ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)ctx.stroke()}}MouseArea{id:area;anchors.fill: parent;//当鼠标按下时调用本函数onPressed: {startX = mouse.x;startY = mouse.y;isMouseMoveEnable = true}//当鼠标press位置改变，调用本函数onPositionChanged: {if (isMouseMoveEnable){canvas.requestPaint()   //绘制函数}}}
}

效果如下：

3. 鼠标释放长方形消失

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4Window{id: rootwidth: 640height: 480visible: true//鼠标点击坐标位置property real startX     //储存鼠标开始时的坐标property real startYproperty real stopX      //储存鼠标结束时的坐标property real stopYproperty bool isMouseMoveEnable: false //是否允许鼠标移动绘制事件//在root上画一个方框Rectangle{anchors.fill: canvasborder.color: "#666"border.width: 4;}//创建一个画布Canvas{id:canvas;anchors.fill:parentonPaint: {var ctx = getContext("2d")ctx.lineWidtn = 3ctx.strokeStyle = "blue";if (!isMouseMoveEnable) {ctx.clearRect(0,0,width,height) //清空所画图形return;}if (isMouseMoveEnable){ctx.clearRect(0,0,width,height)}//开始绘制ctx.beginPath()ctx.moveTo(startX,startY)//console.log(startX,startY)//记录移动终点stopX = area.mouseXstopY = area.mouseY//绘制长方形ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)ctx.stroke()}}MouseArea{id:area;anchors.fill: parent;//当鼠标按下时调用本函数onPressed: {startX = mouse.x;startY = mouse.y;isMouseMoveEnable = true}//当鼠标释放时调用本函数onReleased: {isMouseMoveEnable = falsecanvas.requestPaint()      //当鼠标released时，调用绘制paint}//当鼠标press位置改变，调用本函数onPositionChanged: {if (isMouseMoveEnable){canvas.requestPaint()   //绘制函数}}}
}

效果如下：

4. 有绘制轨迹的

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4Window{id: rootwidth: 640height: 480visible: true//鼠标点击坐标位置property real startX     //储存鼠标开始时的坐标property real startYproperty real stopX      //储存鼠标结束时的坐标property real stopYproperty bool isMouseMoveEnable: false //是否允许鼠标移动绘制事件//在root上画一个方框Rectangle{anchors.fill: canvasborder.color: "#666"border.width: 4;}//创建一个画布Canvas{id:canvas;anchors.fill:parentonPaint: {var ctx = getContext("2d")ctx.lineWidtn = 3ctx.strokeStyle = "blue";//开始绘制ctx.beginPath()ctx.moveTo(startX,startY)//console.log(startX,startY)//记录移动终点stopX = area.mouseXstopY = area.mouseY//绘制长方形ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)ctx.stroke()}}MouseArea{id:area;anchors.fill: parent;//当鼠标按下时调用本函数onPressed: {startX = mouse.x;startY = mouse.y;isMouseMoveEnable = true}//当鼠标press位置改变，调用本函数onPositionChanged: {if (isMouseMoveEnable){canvas.requestPaint()   //绘制函数}}}
}

效果如下：

扩展可以仿照前面的写，这里就不在叙述了。

Qt-quick(qml) Canvas用法及鼠标绘制图形相关推荐

Qt Quick Qml 之QML与C++ 混合编程学习
<QML与C++ 混合编程学习> 1. 在 QML 中使用 C++ 类和对象 1) C++ 类的修改 2) 注册 QML 类型 3) 在 QML 中导入类型 4) 在 QML 创建由 C+ ...
Qt Quick QML 实例之疯狂数字游戏（QML C++混合编程、翻译、QSetting ）【建议收藏】
文章目录一.开门见山二.最基本的框架(v0.1) 1. 后端数据处理 2. 导出 C++ 对象的 QML 的属性 3. 前台 UI 数据三.完善执行逻辑(v0.2) 四.发布版本(v1.0) 1 ...
QT Quick QML 实例之 Popup 弹出界面
QT Quick QML 实例之 Popup 弹出界面一.演示二.实现过程 1. 居中弹出 2. 正下方弹出所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧! GIT工程文件 ...
QT Quick Qml 实例——滑块拖动颜色框的平移(Gradient、drag、clip、transform、antialiasing)
<实例--滑块拖动颜色框的平移> 1. 简介 2. 详解所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧! QML其它文章请点击这里: QT QUICK QM ...
Qt Quick QML实现自定义虚拟软键盘详解
Qt Quick QML实现自定义虚拟软键盘详解在Qt5.8版本推出的QML软键盘功能中,有两种实现方案.一种是基于中文汉字数据库,另一种是基于Google拼音输入引擎.然而,相比于官方软键盘,这两 ...
Qt Quick QML
Qt Quick简介 Qt Quick是一个用于帮助开发者设计直观,现代,流畅的用户界面的技术集,近年来被广泛应用于手机,媒体播放器,机顶盒和其他手提设备.Qt Quick中包含了大量的用户界面元素, ...
【Qt5开发】Qt Quick/QML快速入门视频教程
learnqml 免费试看地址:https://jiaoyu.taobao.com/course/QKT_2081022 完整视频购买地址:https://item.taobao.com/item.h ...
Qt Widgets 和 Qt Quick / QML
简述 Qt Widget 是Qt传统的C++界面类库: Qt Quick 是Qt新生的QML界面类库: QML(Qt Modeling Language)是一种用户界面规范的声明式语言,用于替换Qt ...
Qt Quick 3D学习：使用鼠标键盘控制节点位置和方向
(注意,开源版的 Qt Quick 3D 是狗都不用的 GPL 协议) Qt Quick 3D 模块提供了 WasdController 类型来控制节点的位置和方向,受控节点一般是 Camera.( ...

Qt-quick(qml) Canvas用法及鼠标绘制图形

Canvas

画布绘制（Canvas Paint）

Qt-quick(qml) Canvas用法及鼠标绘制图形相关推荐

最新文章

热门文章