当前位置：首页 > news >正文

QML之Canvas

news 来源：原创 2025/5/30 14:04:13

Canvas 详细描述

Canvas 支持绘制直线，曲线，简单和复杂的形状，图表以及引用的图形图像。它还可以添加文本，颜色，阴影，渐变和图案并进行低级像素操作。Canvas的输出可以保存为图像文件或序列化为URL. 在Canvas 上进行渲染是通过Context2D对象(getContext(“2d”)来实现的，通常是在绘制信号（painted）触发式完成的。目前，Canvas 仅支持二维渲染环境。

1、画线

Canvas{

id:canvas

anchors.top: myButton.bottom

width: 200

height: 200

onPaint: {

var ctx = getContext("2d");

ctx.lineWidth=4;//画笔线宽

ctx.strokeStyle = 'blue';//画笔线的颜色

ctx.fillStyle='rgb(44,44,44)';//'red';//"red"; //'rgb(44,44,44)';

ctx.beginPath();

ctx.moveTo(0,0) //确定起点位置

ctx.lineTo(50,50); //画线

ctx.lineTo(50,0);

ctx.lineTo(0,0);

ctx.closePath();

ctx.fill(); //填充,只有当上面的路径构成闭合时才会填充，用fillStyle的样式来填充

ctx.stroke(); //用 strokeStyle 的样式来描边

}

2、画矩形，调用Context2D 的API，不需要 beginPath(), closePath() 这些操作

ctx.fillStyle="red";

ctx.fillRect(50,50,100,50);//用fillStyle 来填充矩形区域

ctx.clearRect(55,55,90,40); //使用透明的黑色清空指定的区域

ctx.strokeRect(70,20,100,60);//非填充型的矩形

3、线性渐变

var gradient = ctx.createLinearGradient(100,0,100,100);//返回CanvasGradient 的渐变对象

gradient.addColorStop(0.5,"blue"); //在指定的偏移添加渐变的颜色

gradient.addColorStop(1.0,"red");

ctx.fillStyle = gradient;

ctx.fillRect(0,0,200,100);

4、圆锥型渐变

var gradient = ctx.createConicalGradient(100,50,90);//圆锥渐变，以中心点x,y 以90度角度渐变

gradient.addColorStop(0.5,"blue"); //在指定的偏移添加渐变的颜色

gradient.addColorStop(1.0,"red");

ctx.fillStyle = gradient;

ctx.fillRect(0,0,200,100);

5、放射型渐变

var gradient = ctx.createRadialGradient(25,50,25,75,50,25);//

gradient.addColorStop(0.5,"blue"); //在指定的偏移添加渐变的颜色

gradient.addColorStop(1.0,"red");

ctx.fillStyle = gradient;

ctx.fillRect(0,0,200,100);

6、阴影（主要针对字体）

ctx.shadowColor = "red"; //阴影的颜色

ctx.shadowOffsetX = 2; //阴影的X向偏移

ctx.shadowOffsetY = 2; //阴影的Y向偏移

ctx.shadowBlur = 5; //阴影的模糊性

ctx.font = "bold 30px sans-serif"; //字体的属性

ctx.fillStyle = "blue"; //字体的颜色

ctx.fillText("Hello World!",50,150); //文字内容和区域

7、绘制图片

Image{

id:images

//注意window 下路径跟Linux下的差别

source:"file:///D:/qtApp/myCanvas/images/baobao.jpg" ;

visible: false;

}

Onpaint:{

Var ctx = getContext(“2d”);

ctx.drawImage(images,50,100,100,50);//绘制图片到画布上

}

Component.onCompleted: {

loadImage(images); //必须先加载图片才可以绘制图片

}

8、缩放

ctx.translate(width/2,height/2); //移动画布的原点位置

ctx.strokeStyle = "red";

ctx.lineWidth = 2;

ctx.beginPath();

ctx.scale(2,2); //缩放，注意x 和y 要同时进行

ctx.rect(-20,-20,40,40);

ctx.closePath();

ctx.stroke();

9、旋转

ctx.strokeStyle = "blue";

ctx.lineWidth = 2;

ctx.beginPath();

ctx.rotate(30);

ctx.rect(-20,-20,40,40);

ctx.closePath();

ctx.stroke();

10、画弧

var gradient = ctx.createLinearGradient(50,0,100,100);

gradient.addColorStop(0,"blue");

gradient.addColorStop(1.0,"green");

ctx.strokeStyle = gradient ; //"red";

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(50,50);

ctx.arcTo(150,50,150,150,50);

ctx.closePath();

ctx.stroke();

11、组合需要组合的之间必须都包裹在各自的 beginPath 和 closePath间

ctx.fillStyle = "blue";

ctx.globalCompositeOperation = "xor";

ctx.beginPath();

ctx.arc(50,50,50,0,180);

ctx.closePath();

ctx.fill();

ctx.beginPath();

ctx.arc(70,50,50,0,180);

ctx.closePath();

ctx.fill();

12、图像缓冲

Canvas{

onPaint:{

Var ctx = getContext(“2d”);

ctx.fillStyle = "red";

ctx.fillRect(50,50,50,50);

}

MouseArea{

anchors.fill: parent

onClicked: {

var url = canvas.toDataURL("image/png");

myImage.source = url;

}

Image {

id: myImage

anchors.top:canvas.bottom

width: 100

height: 80

}

线程渲染与渲染目标

在Qt6.0 中，Canvas 支持一个渲染目标 Canvas.Image.Canvas.Image 渲染目标是一个QImage对象。此渲染目标支持后台线程渲染，使得复杂或长时间运行的绘制操作能够不阻塞用户界面的情况下执行。这是所有 Qt quick 后端都支持的唯一渲染目标。默认的渲染目标是Canvas.Image, 而默认的渲染策略是Canvas .