★9.4.2 context2D 绘图

返回目录:

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();

        }

    }

}

运行效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/35044.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

汇编基础知识

CPU&#xff1a;一种可以执行机器指令进行运算的芯片&#xff08;微处理器&#xff09;。 存储器&#xff08;内存&#xff09;&#xff1a;存放CPU可以工作的指令和数据&#xff08;指令和数据都是二进制信息&#xff09;。 磁盘不同于内存&#xff0c;磁盘中的数据要读到内…

1536数字三角形

1536数字三角形 ⭐️难度&#xff1a;中等 &#x1f31f;考点&#xff1a;动态规划 &#x1f4d6; &#x1f4da; import java.util.Arrays; import java.util.LinkedList; import java.util.Queue; import java.util.Scanner;public class Main {public static void main(…

基于VMware的虚拟机集群搭建

本文作者&#xff1a; slience_me 文章目录 基于VMware的虚拟机集群搭建1. 安装Vmware2. 构建虚拟机3. 安装Linux4. 网络配置5. 开始克隆6. 初始化系统6.1 开放root账户6.2 SSH服务6.3 设置静态IP6.4 镜像源 host 主机名 基于VMware的虚拟机集群搭建 该集群采用镜像ubuntu-20.0…

windows平台搭建python环境

python语言 Python 是一种高级、解释型、跨平台的编程语言&#xff0c;由Guido van Rossum于1991年设计&#xff0c;并发展成为全球最受欢迎的编程语言之一。它以简单易读的语法、灵活的特性和丰富的标准库闻名&#xff0c;适合初学者和经验丰富的开发者。 Python 支持多种编…

【系统架构设计师】操作系统 - 文件管理 ② ( 位示图 | 空闲区域 管理 | 位号 | 字号 )

文章目录 一、空闲区域 管理1、空闲区域分配2、空闲区域 管理方式 简介 二、位示图 简介1、位示图 表示2、位示图 字号3、位示图 位号4、位示图 中 比特位 分组管理 三、位示图 考点1、计算磁盘 位示图 的大小2、位示图 位置计算 一、空闲区域 管理 1、空闲区域分配 在 索引文件…

SpringData Redis:RedisTemplate配置与数据操作

文章目录 引言一、Redis概述与环境准备二、RedisTemplate基础配置三、连接属性配置四、操作String类型数据五、操作Hash类型数据六、操作List类型数据七、操作Set类型数据八、操作ZSet类型数据九、事务与管道操作总结 引言 Redis作为高性能的NoSQL数据库&#xff0c;在分布式系…

串口烧录出现频繁回复乱码 频繁回复一个数字且烧录失败 字节混乱

这是因为你的芯片没有处于系统存储区启动一直未进入bootloader 解决办法是检查boot引脚接正确没&#xff0c;要在系统存储器启动

共享经济再中介化进程中的技术创新与模式重构研究——以“开源AI智能名片链动2+1模式S2B2C商城小程序“为例

摘要 本文基于共享经济中介化演进的双重逻辑&#xff0c;通过案例研究与技术解构&#xff0c;探讨"开源AI智能名片链动21分销机制S2B2C商城小程序"集成系统如何重构数字经济时代的价值网络。研究发现&#xff0c;该技术生态通过三维需求匹配、动态价值分配与智能风险…

【linux】虚拟机执行sudo yum isntall perl报错 could not retrieve mirrorlist htt:

项目场景&#xff1a; 提示&#xff1a;虚拟机安装拓展包&#xff0c;sudo yum install perl Virtualbox 在不安装增强功能扩展的情况下, 无法自适应分辨率和共享剪切板等操作 问题描述 原因分析&#xff1a; 提示&#xff1a;这里填写问题的分析&#xff1a; 出现这个错误是因…

网络编程知识预备阶段

1. OSI七层模型 OSI&#xff08;Open System Interconnect&#xff09;七层模型是一种将计算机网络通信协议划分为七个不同层次的标准化框架。每一层都负责不同的功能&#xff0c;从物理连接到应用程序的处理。这种模型有助于不同的系统之间进行通信时&#xff0c;更好地理解和…

我的Gitee

算法与数据结构: 浙海大小趴菜的一些记录 后续也会更新一些项目&#xff0c;小趴菜以后也会变得很厉害

Collection合集(单列集合)

Collection代表单列集合&#xff0c;每个元素&#xff08;数据&#xff09;只包含一个值。Collection实际上是一个泛型接口 Collection集合常用API&#xff1a; 代码实现&#xff1a; Collection集合遍历 遍历方式一&#xff1a;迭代器 迭代器是用来遍历集合的专用方式&#…

旅游类小程序界面设计

产品概述 艾啦游是一款互联网旅游类小程序&#xff0c;致力于国内精品旅游&#xff0c;以及拥有自由行、专属热榜单、出行攻略等诸多功能&#xff0c;汇聚了许多国内的人气景点&#xff0c;与诸多城市的酒店也保持合作&#xff0c;打造一体式旅行服务&#xff0c;更有不断上新…

移动端开发基础与常见布局

一、移动端基础 1.浏览器现状 ⑴.PC端常见浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览 器、百度浏览器、搜狗浏览器、IE浏览器。 ⑵.移动端常见浏览器 UC浏览器&#xff0c;QQ浏览器&#xff0c;欧朋浏览器&#xff0c; 百度手机浏览器&#xff0c;360安全浏览器&am…

[算法] 贪心--矩阵消除游戏

文章目录 1. 题意2. 思路贪心思路1思路1并不正确思路1为什么是错误的?这道题该如何求解?枚举思路是超时的!枚举 贪心 3. 编码 今天咱们来分享一道基础的贪心题目 -> 矩阵消除游戏 对于贪心算法的题目, 我感觉是对于初学者没必要太注重证明过程, 因为这玩意的变数比较大, …

数学——A. K-divisible Sum + D. Exam in MAC

A. K-divisible Sum 题目&#xff1a; 思路&#xff1a; 以下 “[xxx]” 符号均代表向上取整 我们假设总和是sum&#xff0c;那么就有sum k * cnt 要想最大值最小&#xff0c;肯定是要让sum尽可能小&#xff0c;这样每个元素都能变小 最小情况是 sum 恰好等于 n 时&#…

Docker 》》Docker Compose 》》network 网络 compose

docker 默认的网络 三种模式 # 列出所有当前主机上或Swarm集群上的网络 docker network ls#查看网络详情 docker network inspect network名称# 清除未使用的docker网络 docker network prune -f# 创建网络 ocker network create -d bridge 网络名称 docker network create –s…

RabbitMQ延迟消息

文章目录 延迟消息死信交换机延迟消息延迟消息应用场景 延迟消息 生产者在发送消息的时候指定一个时间&#xff0c;消费者不会立即收到该消息&#xff0c;而是在指定时间之后才收到消息&#xff0c;这就是延迟消息。 比如说这么一个场景&#xff0c;用户下单后将商品库存进行…

phpstudy+phpstorm+xdebug【学习笔记】

配置PHPStudy 配置PHPSTORM phpstorm选择PHP版本 配置DEBUG 设置服务器 编辑配置 学习参考链接&#xff1a;&#xff1a;https://blog.csdn.net/m0_60571842/article/details/133246064

58.Harmonyos NEXT 图片预览组件架构设计与实现原理

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; Harmonyos NEXT 图片预览组件架构设计与实现原理 文章目录 Harmonyos NEXT 图片预览组件架构设计与实现原理效果预览一、组件架构概述1. 核心组件层…