- 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 .
- 像素操作
所有的HTML5的2D块状上下文像素操作均得到支持。为了确保提高像素读取、写入的性能，应选择Canvas.Image作为渲染目标。
- HTML5 移植
- 将所有的DOM API 调用替换为QML属性绑定或Canvas 方法。
- 将所有的HTML事件处理程序替换MouseArea.
- 将setInterval/setTimeout 函数调用替换为Timer 或使用requestPaint() 方法来触发绘制。
- 将绘制代码放入onPaint 处理程序中，并通过调用 markDirty()或requestPaint()
- 要绘制图像，通过调用Canvas的loadImage() 方法加载图像，然后在onImageLoaded处理程序中请求绘制他们。
- Context2D
可以通过Canvas 组建的getContext()方法来创建Context2D对象。Context2D 提供了渲染上下文，该上下文定义了在画布上绘制所需的方法和属性。Context2D 的API将画布渲染为一个坐标系，其原点（0,0）位于画布的左上角.
在Canvas 里面大部操作都是用到Context2D的属性和方法。