返回目录:
Qt QML专栏目录结构_qml 项目 目录-CSDN博客
★9.4.2 context2D 绘图
Object <- context | ||
属性 | ||
canvas : QtQuick::Canvas | ||
fillRule : enumeration | ||
fillStyle : variant | fillStyle: 设置或获取当前填充颜色或样式。 | |
font : string | ||
globalAlpha : real | 设置全局透明度,用于控制所有绘图操作的透明度。 | |
globalCompositeOperation : string | ||
lineCap : string | 设置线条的端点样式,可能的值包括 "butt"、"round" 和 "square"。 Canvas.Flat: 平的线条端点。 Canvas.Round: 圆形线条端点。 Canvas.Square: 方形线条端点。 | |
lineDashOffset : real (since QtQuick 2.11) | ||
lineJoin : string | 设置线条连接处的样式,可能的值有 "bevel"、"round" 和 "miter"。 Canvas.Bevel: 斜角连接。 Canvas.Round: 圆形连接。 Canvas.Miter: 斜接连接。 | |
lineWidth : real | 控制线条宽度,影响绘制的线条。 stroke相关的是画线的! | |
miterLimit : real | ||
shadowBlur : real | ||
shadowColor : string | ||
shadowOffsetX : qreal | ||
shadowOffsetY : qreal | ||
strokeStyle : variant | strokeStyle: 设置或获取当前描边颜色或样式。 | |
textAlign : string | 用于设置文本对齐方式 Canvas.Start: 向起始位置对齐(默认)。 Canvas.Center: 居中对齐。 Canvas.End: 向结束位置对齐。 Canvas.TextBaseline: 用于设置文本基线对齐方式。可选值: Canvas.Alphabetic: 字母基线。 Canvas.Middle: 中间对齐基线。 Canvas.Top: 顶部基线。 | |
textBaseline : string | ||
Method | ||
object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise) | 绘制圆弧或弯曲路径。传入圆心 (x, y)、半径、起始角度、结束角度以及是否逆时针绘制。 | |
object arcTo(real x1, real y1, real x2, real y2, real radius) | ||
object beginPath() | 开始一个新的路径,在绘制形状之前调用此方法。 | |
object bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y) | 两个控制点的贝塞尔曲线 | |
object clearRect(real x, real y, real w, real h) | ||
object clip() | ||
object closePath() | 结束当前路径,可以用来闭合路径。 | |
object createConicalGradient(real x, real y, real angle) | ||
CanvasImageData createImageData(CanvasImageData imageData) | ||
CanvasImageData createImageData(Url imageUrl) | ||
CanvasImageData createImageData(real sw, real sh) | ||
object createLinearGradient(real x0, real y0, real x1, real y1) | ||
variant createPattern(Image image, string repetition) | ||
variant createPattern(color color, enumeration patternMode) | ||
object createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1) | ||
drawImage(variant image, real dx, real dy) | 绘制图片 | |
drawImage(variant image, real dx, real dy, real dw, real dh) | ||
drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh) | ||
object ellipse(real x, real y, real w, real h) | ||
object fill() | 填充当前路径,使用当前的 fillStyle 属性。 | |
object fillRect(real x, real y, real w, real h) | ||
object fillText(text, x, y) | 在x,y位置,写上 text文字 | |
CanvasImageData getImageData(real x, real y, real w, real h) | ||
array getLineDash() (since QtQuick 2.11) | ||
object isPointInPath(real x, real y) | ||
object lineTo(real x, real y) | 从当前位置绘制一条直线到 (x, y) | |
object measureText(text) | ||
object moveTo(real x, real y) | 移动到指定的坐标 (x, y),此方法会设置起始点。 | |
object putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight) | ||
object quadraticCurveTo(real cpx, real cpy, real x, real y) | 一个控制点的贝塞尔曲线 | |
object rect(real x, real y, real w, real h) | ||
object reset() | ||
object resetTransform() | ||
object restore() | 恢复到最近保存的绘图状态。 | |
object rotate(real angle) | 旋转画布,参数是旋转的角度(弧度)。 | |
object roundedRect(real x, real y, real w, real h, real xRadius, real yRadius) | ||
object save() | 保存当前绘图状态。 | |
object scale(real x, real y) | ||
setLineDash(array pattern) (since QtQuick 2.11) | ||
object setTransform(real a, real b, real c, real d, real e, real f) | ||
object shear(real sh, real sv) | ||
object stroke() | 描边当前路径,使用当前的 strokeStyle 属性。 | |
object strokeRect(real x, real y, real w, real h) | ||
object strokeText(text, x, y) | ||
object text(string text, real x, real y) | ||
object transform(real a, real b, real c, real d, real e, real f) | ||
object translate(real x, real y) | 平移画布,参数是平移的距离 (x, y) |
2. 重要属性
Canvas 提供了多个重要的属性来控制绘图区域及其行为:
width: 控制画布的宽度。
height: 控制画布的高度。
contextType: 设置上下文类型,可以选择 "2d" 来启用二维绘图上下文。
antialiasing: 是否启用抗锯齿,使绘制的图形更加平滑。类型为布尔值(true 或 false)。
smooth: 是否启用平滑处理,主要影响图像缩放的效果。类型为布尔值(true 或 false)。
Window { visible: true width: 600 height: 400 Canvas { id: canvas width: parent.width height: parent.height contextType: "2d" // 属性设置 antialiasing: true smooth: true // 在画布上绘制内容 onPaint: { var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布 ctx.fillStyle = "lightblue"; ctx.fillRect(50, 50, 150, 100); // 绘制矩形 // 绘制圆形 ctx.beginPath(); ctx.arc(300, 150, 80, 0, Math.PI * 2); ctx.fillStyle = "orange"; ctx.fill(); // 绘制文字 ctx.font = "24px Arial"; ctx.fillStyle = "black"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("Hello, Canvas!", 300, 250); // 绘制线条 ctx.beginPath(); ctx.moveTo(100, 300); ctx.lineTo(500, 300); ctx.strokeStyle = "green"; ctx.lineWidth = 5; ctx.stroke(); } } } |
运行效果如下: