HarmonyOS/OpenHarmony应用开发-ArkTS画布组件CanvasRenderingContext2D对象(十一)

news/2024/5/5 8:59:51/文章来源:https://blog.csdn.net/weixin_69135651/article/details/130078021

measureText

measureText(text: string): TextMetrics

该方法返回一个文本测算的对象,通过该对象可以获取指定文本的宽度值。

 

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct MeasureText {
  5.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7.   build() {
  8.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  9.       Canvas(this.context)
  10.         .width('100%')
  11.         .height('100%')
  12.         .backgroundColor('#ffff00')
  13.         .onReady(() =>{
  14.           this.context.font = '50px sans-serif'
  15.           this.context.fillText("Hello World!", 20, 100)
  16.           this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
  17.       })
  18.     }
  19.     .width('100%')
  20.     .height('100%')
  21.   }
  22. }

 

stroke

stroke(path?: Path2D): void

进行边框绘制操作。

参数:

参数

类型

必填

默认值

描述

path

Path2D

null

需要绘制的Path2D。

示例:

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Stroke {
  5.   private settings: RenderingContextSettings = new RenderingContextSettings(true)
  6.   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  7.   build() {
  8.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  9.       Canvas(this.context)
  10.         .width('100%')
  11.         .height('100%')
  12.         .backgroundColor('#ffff00')
  13.         .onReady(() =>{
  14.           this.context.moveTo(25, 25)
  15.           this.context.lineTo(25, 105)
  16.           this.context.lineTo(75, 105)
  17.           this.context.lineTo(75, 25)
  18.           this.context.strokeStyle = 'rgb(0,0,255)'
  19.           this.context.stroke()
  20.         })
  21.     }
  22.     .width('100%')
  23.     .height('100%')
  24.   }
  25. }

 

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

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

相关文章

如何压缩照片到30kb以下?三个方法

如何压缩照片到30kb以下?随着网络的发展,我们经常要上传一些照片到网上,如公务员考试,教师招聘等,而且要求上传的照片大小不超过30kb,我们如何把照片压缩到30kb以下呢?现在很多平台上传图片时都…

Ae:表达式应用基础

通过几个最常用的变量及函数(方法)来了解 Ae 表达式。有关表达式语言语法基础,请参阅:《Ae:表达式语法基础》◆ ◆ ◆时间相关time返回合成的当前时间值,以秒为单位。比如,当处于 1 秒的时间点…

【论文总结】针对操作系统级虚拟化的抽象资源攻击

介绍 这是一篇来自2021CCS的论文,作者有Nanzi Yang, Wenbo Shen, Jinku Li, Yutian Yang, Kangjie Lu, Jietao Xiao, Tianyu Zhou, Chenggang Qin, Wang Yu, Jianfeng Ma, Kui Ren。 概述 本文的贡献如下: 新的攻击面:作者揭示了一个影响操…

【从0学Python基础】Python的基础语法(一)

文章目录常量和表达式变量和类型变量的定义变量的使用变量的类型intfloatstrbool动态类型注释输入和输出输出输入运算符算数运算符关系运算符逻辑运算符赋值运算符其他常量和表达式 print(1 2 * 3)print是Python内置的一个函数,作用为输入打印到控制台形如1 2 * …

Leetcode完成所有工作的最短时间2

我的解法: 先排序,然后让能工作最多的工人去做最长时间的工作,最短工作的工人去做最短时间的工作 class Solution:def minimumTime(self, jobs: List[int], workers: List[int]) -> int:jobs.sort()workers.sort()max_time-1for pointer…

HDFS学习笔记 【Namenode/数据块管理】

说明 Namenode关于数据块管理主要做两方面的事情。 文件系统对应数据块 数据块对应数据节点 Block的数据结构 通过Block,BlockInfo,BlocksMap,replica等数据结构表示数据块。 Block 唯一标识一个数据块 包含有比较方法,通过blockId进行比较 BlockI…

前端自动化测试之葵花宝典

作者:京东零售 杜兴文 首先聊一下概念,Web 前端自动化测试是一种通过编写代码来自动化执行 Web 应用程序的测试任务的方法,它通常使用 JavaScript 和测试框架 (如 Selenium、Appium 等) 来实现。 Web 前端自动化测试的优点是可以提高测试效…

微服务+springcloud+springcloud alibaba学习笔记【基础知识+各个组件介绍+聚合父工程创建】(1/9)

微服务springcloudspringcloud alibaba学习笔记 1/91、微服务简介1.1 微服务的自动化部署(CI /CD)(持续集成 持续交付)1.2 服务集中化管理1.3 分布式架构1.4 熔断机制 Hystri2、SpringCloud 简介2.1 SpringCloud 版本对应关系2.2 SpringCloud…

Node.js安装与配置(详细步骤)

前言 本篇博文记录了Node.js安装与环境变量配置的详细步骤,旨在为将来再次配置Node.js时提供指导方法。 另外:Node.js版本请根据自身系统选择,安装位置、全局模块存放位置和环境变量应根据自身实际情况进行更改。 Node.js安装与配置 一、…

windows命令执行的几种绕过方法

windows命令执行的几种绕过方法介绍1、添加特殊符号2、定义变量3、切割字符串4、逻辑运算符在绕过中的作用5、利用for循环拼接命令介绍 反检测、反清理,是红队攻击中的重中之重,本文详细描述了几种windows执行命令的几种绕过手法。 1、添加特殊符号 w…

【 Spring MVC 核心功能(一) - 使用注解实现 URL 路由映射】

文章目录引言一、RequestMapping 注解介绍1.1 RequestMapping 是 post 还是 get 请求?1.2 RequestMapping 指定一种请求方式二、GetMapping三、PostMapping四、总结引言 前面我们讲到,学习 Spring MVC 需要掌握三个核心功能即连接,获取参数&…

webgl-attribute、uniform、varying三者的区别

通用js: let canvas document.getElementById(webgl) canvas.width window.innerWidth canvas.height window.innerHeight let ctx canvas.getContext(webgl) attribute: 范围: 只适用于vertexShader,将js代码中的数据传递给vertexShader。 使用方…

软考-套接字(scoket)

💤SocketSocket套接字:是由系统提供用于网络通信的技术,是基于TCP/IP协议的网络通信的基本操作单元。将OSI模型中从传输层到物理层封装起来的抽象层,把网络协议隐藏在Socket抽象层中,只对使用者暴露API接口&#xff0c…

DDoS攻击实验笔记

DoS&DDoS简介 DoS(Denial of Service),拒绝服务攻击是通过一些方法影响服务的可用性,比如早期主要基于系统和应用程序的漏洞,只需要几个请求或数据包就能导致长时间的服务不可用,但易被入侵检测系统发现。 DDoS(Distributed D…

Mysql通过行表中的行数据筛选主表数据

有订单头表和订单行表。筛选出行表中包含某些商品的头表 文章目录1. 示例表test_ordertest_order_line2. 实现EXISTS(推荐)内联1. 示例表 test_order test_order_line 2. 实现 EXISTS(推荐) 优点: 使用内联,主表字段很多的情况下,需要写越…

人员跌倒识别检测系统 yolov7

人员跌倒识别检测系统通过PythonYOLO7网络模型算法,人员跌倒识别检测算法模型对现场画面中有人员倒地摔倒行为实时分析预警,发现则立即抓拍存档告警同步提醒后台值班人员及时处理。YOLOv7 的发展方向与当前主流的实时目标检测器不同,研究团队…

LabVIEW实现ST-Link自动烧录单片机

目录 1、添加CLI到系统环境变量中 2、查询ST-Link/V2烧录器信息 3、连接待烧录的MCU芯片 4、下载固件到Flash 5、可能会使用的命令 5.1、-Rst 5.2、-ME 5.3、-SE 6、封装好的LabVIEW库 在讲解LabVIEW实现ST-Link自动烧录之前先聊一聊ST官方提供一款专用的Flash烧录工具…

《华为机试》——查找两个字符串a,b中的最长公共子串

本期给大家带来的是 华为机试题库 关于 查找两个字符串a,b中的最长公共子串 的讲解。首先,我们还是先从题目入手进行分析思考!!! 题目如下 :👇 查找两个字符串a,b中的最长公共子串。若有多个,输…

正则化的基本认识

正则化(一) 拟合与欠拟合(二) 正则化的目的(三) 惩罚项(3.1)常用的惩罚项:(3.2)L-P范数:(3.3)L1与L2的选择:(一) 拟合与欠拟合 欠拟合: 是指测试级与训练集都…

IDEA集成Git、GitHub、Gitee

一、IDEA 集成 Git 1.1、配置 Git 忽略文件 为什么要忽略他们? 与项目的实际功能无关,不参与服务器上部署运行。把它们忽略掉能够屏蔽 IDE 工具之间的差异。 怎么忽略? 创建忽略规则文件 xxxx.ignore(前缀名随便起&#xff0c…