QML学习笔记（二）-纯qml画图实现canvas画板-鼠标画图
作者： 狐狸家的鱼
Github： 八至
版权声明：如需转载请获取授权和联系作者
用纯qml实现canvas画板功能，用鼠标进行画图，可以画直线，画圆，画矩形，画弧线。
由于canvas画图会有延迟和卡顿，建议还是结合c++实现画图功能。
以下gif效果都没有录进鼠标
1.鼠标点击画图-无预览路径（两点实现）
贴上代码和注释：
property real startX property real startY property real stopX property real stopY property color color: colorTools.paintColor property var paintType: ["line","rect","circle","curve"]//自定义绘制类型 property var clickPoint: []//多边形画图的存点数组 未实现 property int clickNum: 0//鼠标点击 Row{ id:colorTools//颜色提取工具 anchors{ horizontalCenter: parent.horizontalCenter top: parent.top topMargin: 8 } property color paintColor: "#33b5e5"//设置初始画笔颜色 spacing: 4; // Repeater{//四个colorSquare // model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]//modelData 颜色数据 // ColorSquare{ // id:red; // color: modelData; // active: parent.paintColor == color//当选中一个colorSquare时，当前画笔颜色为选中的颜色 // onClicked: { // parent.paintColor = color // } // } // } Button { text: "Clear" onClicked: { canvas.clear() } } Button{ text: "line"; onClicked: { paintType = "line"; //canvas.requestPaint(); } } Button{ text: "rect" onClicked: { paintType = "rect"; // canvas.requestPaint(); } } Button{ text: "circle" onClicked: { paintType = "circle"; // canvas.requestPaint(); } } Button{ text: "curve" onClicked: { paintType = "curve"; // canvas.requestPaint(); } } } Rectangle{ anchors.fill: canvas border.color: "#666" border.width: 4; } Canvas{ id:canvas; anchors{ left: parent.left; right:parent.right; top:colorTools.bottom; bottom: parent.bottom; margins: 8 } //鼠标点击坐标位置 function clear() { var ctx = getContext("2d"); ctx.reset(); canvas.requestPaint(); } onPaint: { var ctx = getContext("2d") ctx.lineWidtn = 5 ctx.strokeStyle = canvas.color;//轮廓颜色 //ctx.fillStyle = canvas.color;//填充颜色 ctx.beginPath() if(paintType === "line"){ ctx.moveTo(startX,startY) startX = area.mouseX; startY = area.mouseY; ctx.lineTo(stopX,stopY) stopX = area.mouseX; stopY = area.mouseY; } if(paintType === "rect"){ //ctx.fillRect(startX,startY,stopX-startX,stopY-startY)//填充类型 //ctx.clearRect(0,0,width,height) ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)//非填充 } if(paintType === "circle"){ ctx.arc(startX,startY,Math.sqrt(Math.pow((stopX-startX),2)+Math.pow((stopY-startY),2)),0,360,false) } if(paintType === "curve"){ ctx.arcTo(startX,startY,stopX,stopY,Math.sqrt(Math.pow((stopX-startX),2)+Math.pow((stopY-startY),2))) } // ctx.fill();//完成填充 ctx.stroke() } MouseArea{ id:area; anchors.fill: parent; onClicked: {//存点 遍历 //clickPoint.push({"x":mouseX,"y":mouseY})//多边形绘制存点 多边形未实现 clickNum++; for(var i = 0;i<clickPoint.length;i++){ var point = clickPoint[i]; } if(clickNum == 1){ startX = mouseX; startY = mouseY; } if(clickNum == 2){ clickNum = 0; stopX = mouseX; stopY = mouseY; canvas.requestPaint(); } } } } }
2.鼠标按压拖动绘图-无预览路径（鼠标释放完成绘制）
代码和注释：
property real startX property real startY property real stopX property real stopY property color color: colorTools.paintColor property var paintType: ["line","rect","circle","curve"] property var clickPoint: [] property int clickNum: 0
Row{ id:colorTools//颜色提取工具 anchors{ horizontalCenter: parent.horizontalCenter top: parent.top topMargin: 8 } property color paintColor: "#33b5e5"//设置初始画笔颜色 spacing: 4; // Repeater{//四个colorSquare // model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]//modelData 颜色数据 // ColorSquare{ // id:red; // color: modelData; // active: parent.paintColor == color//当选中一个colorSquare时，当前画笔颜色为选中的颜色 // onClicked: { // parent.paintColor = color // } // } // } Button { text: "Clear" onClicked: { canvas.clear() } } Button{ text: "line"; onClicked: { paintType = "line"; //canvas.requestPaint(); } } Button{ text: "rect" onClicked: { paintType = "rect"; // canvas.requestPaint(); } } Button{ text: "circle" onClicked: { paintType = "circle"; // canvas.requestPaint(); } } Button{ text: "curve" onClicked: { paintType = "curve"; // canvas.requestPaint(); } } } Rectangle{ anchors.fill: canvas border.color: "#666" border.width: 4; } Canvas{ id:canvas; anchors{ left: parent.left; right:parent.right; top:colorTools.bottom; bottom: parent.bottom; margins: 8 } //鼠标点击坐标位置 function clear() {//此清除有问题 var ctx = getContext("2d"); ctx.reset(); canvas.requestPaint(); } onPaint: { var ctx = getContext("2d") ctx.lineWidtn = 10 ctx.strokeStyle = canvas.color; // ctx.fillStyle = canvas.color;//若想要填充的 此不注释 ctx.beginPath() if(paintType === "line"){ ctx.moveTo(startX,startY) startX = area.mouseX; startY = area.mouseY; ctx.lineTo(stopX,stopY) stopX = area.mouseX; stopY = area.mouseY; } if(paintType === "rect"){ //ctx.fillRect(startX,startY,stopX-startX,stopY-startY)//填充类型 //ctx.clearRect(0,0,width,height) ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)//非填充 } if(paintType === "circle"){ ctx.arc(startX,startY,Math.sqrt(Math.pow((stopX-startX),2)+Math.pow((stopY-startY),2)),0,360,false) } if(paintType === "curve"){//未实现 ctx.arcTo(startX,startY,stopX,stopY,Math.sqrt(Math.pow((stopX-startX),2)+Math.pow((stopY-startY),2))) } //ctx.fill(); ctx.stroke() } MouseArea{ id:area; anchors.fill: parent; // onClicked: {//存点 遍历 // clickPoint.push({"x":mouseX,"y":mouseY}) // clickNum++; // for(var i = 0;i<clickPoint.length;i++){ // var point = clickPoint[i]; // } // if(clickNum == 1){ // startX = mouseX; // startY = mouseY; // } // if(clickNum == 2){ // clickNum = 0; // stopX = mouseX; // stopY = mouseY; // canvas.requestPaint(); // } // } onPressed: { startX = mouseX; startY = mouseY; } onMouseXChanged: { stopX = mouseX; } onMouseYChanged: { stopY = mouseY; } onReleased: { canvas.requestPaint()//重绘 } // onPositionChanged: { // canvas.requestPaint()//重绘 这句话不注释 会有预览路径 但是临时区没有清理 需要在cpp中进行清除 // } } }
3.鼠标按压拖动绘制-有预览路径
因为想要绘制的过程中有预览路径，需要在cpp中实现清理临时区域，因为如果不清理 ，画直线的时候没问题，但是在画矩形圆的时候会出现如下情况：
cpp中如何画，可以参考这篇博文：https://blog.csdn.net/foruok/article/details/32698603
第三种方法可以在qml中有预览路径的同时也清理临时图区，只不过只能存在一个图元，也就是画了直线之后画圆，直线就会消失。所以还是建议结合c++中的QQuickPaintedItem方法等进行清理临时图区。这个链接有三个实例提供参考 https://www.aliyun.com/jiaocheng/173346.html ，上面那个链接就是对第一个实例的解释
以下代码我做了临时图元的简单清理，但是画线段的时候由于清理了，所以画不出来了，所以还是建议看博客结合cpp
通过gif可以看到录制把临时图元都看到了，但是在实际绘制的时候却看不到的，😂
纯Qml代码如下：
property real startX
property real startY
property real stopX
property real stopY
property color color: colorTools.paintColor
property var paintType: ["line","rect","circle","curve"]
property bool isMouseMoveEnable: false //是否允许鼠标移动绘制事件
Row{
id:colorTools//颜色提取工具
anchors{
horizontalCenter: parent.horizontalCenter
top: parent.top
topMargin: 8
}
property color paintColor: "#33b5e5"//设置初始画笔颜色
spacing: 4;
// Repeater{//四个colorSquare
// model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444"]//modelData 颜色数据
// ColorSquare{
// id:red;
// color: modelData;
// active: parent.paintColor == color//当选中一个colorSquare时，当前画笔颜色为选中的颜色
// onClicked: {
// parent.paintColor = color
// }
// }
// }
Button {
text: "Clear"
onClicked: {
canvas.clear()
}
}
Button{
text: "line";
onClicked: {
paintType = "line";
//canvas.requestPaint();
}
}
Button{
text: "rect"
onClicked: {
paintType = "rect";
// canvas.requestPaint();
}
}
Button{
text: "circle"
onClicked: {
paintType = "circle";
// canvas.requestPaint();
}
}
Button{
text: "curve"
onClicked: {
paintType = "curve";
// canvas.requestPaint();
}
}
}
Rectangle{
anchors.fill: canvas
border.color: "#666"
border.width: 4;
}
Canvas{
id:canvas;
anchors{
left: parent.left;
right:parent.right;
top:colorTools.bottom;
bottom: parent.bottom;
margins: 8
}
//鼠标点击坐标位置
function clear() {//此清除有问题
var ctx = getContext("2d");
ctx.reset();
canvas.requestPaint();
}
onPaint: {
var ctx = getContext("2d")
ctx.lineWidtn = 10
ctx.strokeStyle = canvas.color;
// ctx.fillStyle = canvas.color;//若想要填充的 此不注释
if(isMouseMoveEnable)
ctx.clearRect(0,0,width,height) //这句话要换成一个只清理临时的对象
ctx.beginPath()
if(paintType === "line")
{
ctx.moveTo(startX,startY)
startX = area.mouseX;
startY = area.mouseY;
ctx.lineTo(stopX,stopY)
stopX = area.mouseX;
stopY = area.mouseY;
}
if(paintType === "rect")
{
//ctx.fillRect(startX,startY,stopX-startX,stopY-startY)//填充类型
//ctx.clearRect(0,0,width,height)
ctx.strokeRect(startX,startY,stopX-startX,stopY-startY)//非填充
}
if(paintType === "circle")
{
ctx.arc(startX,startY,Math.sqrt(Math.pow((stopX-startX),2)+Math.pow((stopY-startY),2)),0,Math.PI*2)
}
if(paintType === "curve"){
//未实现
ctx.arcTo(startX,startY,stopX,stopY,Math.sqrt(Math.pow((stopX-startX),2)+Math.pow((stopY-startY),2)))
}
//ctx.fill();
ctx.stroke()
}
MouseArea{
id:area;
anchors.fill:
parent;
onPressed: {
//第一次点击鼠标记录起始点
startX = mouse.x;
startY = mouse.y;
isMouseMoveEnable=true
}
onReleased: {
stopX = mouse.x;
stopY = mouse.y;
isMouseMoveEnable=false
}
onPositionChanged: {
//鼠标移动动态记录结束点，并且绘制
if(isMouseMoveEnable) {
// console.log("mouse posiont changed....")
stopX = mouse.x;
stopY = mouse.y;
canvas.requestPaint();
}
}
}
}
同样的，也可以改成鼠标点击绘制时有预览路径，结合上面的方法可以修改
作者：狐狸家的鱼
本文链接：https://www.cnblogs.com/suRimn/p/9849195.html
声明：如需转载请联系作者或者附上原文链接
