绘制几何图形（Shape）

        

目录

1、创建绘制组件

2、形状视口viewport

3、自定义样式

4、场景示例

绘制组件用于在页面绘制图形，Shape组件是绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。具体用法请参考Shape。

1、创建绘制组件

        绘制组件可以由以下两种形式创建：

  • 绘制组件使用Shape作为父组件，实现类似SVG的效果。接口调用为以下形式：
Shape(value?: PixelMap)

        该接口用于创建带有父组件的绘制组件，其中value用于设置绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 

Shape() {Rect().width(300).height(50)
}
  • 绘制组件单独使用，用于在页面上绘制指定的图形。有7种绘制类型，分别为Circle（圆形）、Ellipse（椭圆形）、Line（直线）、Polyline（折线）、Polygon（多边形）、Path（路径）、Rect（矩形）。以Circle的接口调用为例：
Circle(options?: {width?: string | number, height?: string | number}

        该接口用于在页面绘制圆形，其中width用于设置圆形的宽度，height用于设置圆形的高度，圆形直径由宽高最小值确定。 

Circle({ width: 150, height: 150 })

2、形状视口viewport

viewPort{ x?: number | string, y?: number | string, width?: number | string, height?: number | string }

        形状视口viewport指定用户空间中的一个矩形，该矩形映射到为关联的 SVG 元素建立的视区边界。viewport属性的值包含x、y、width和height四个可选参数，x 和 y 表示视区的左上角坐标，width和height表示其尺寸。

        以下3个示例讲解Viewport具体用法：

  • 通过形状视口对图形进行放大与缩小。
// 画一个宽高都为150的圆
Text('原始尺寸Circle组件')
Circle({width: 75, height: 75}).fill('#E87361')Row({space:10}) {Column() {// 创建一个宽高都为150的shape组件，背景色为黄色，一个宽高都为75的viewport。用一个蓝色的矩形来填充viewport，在viewport中绘制一个直径为75的圆。// 绘制结束，viewport会根据组件宽高放大两倍Text('shape内放大的Circle组件')Shape() {Rect().width('100%').height('100%').fill('#0097D4')Circle({width: 75, height: 75}).fill('#E87361')}.viewPort({x: 0, y: 0, width: 75, height: 75}).width(150).height(150).backgroundColor('#F5DC62')}Column() {// 创建一个宽高都为150的shape组件，背景色为黄色，一个宽高都为300的viewport。用一个绿色的矩形来填充viewport，在viewport中绘制一个直径为75的圆。// 绘制结束，viewport会根据组件宽高缩小两倍。Text('Shape内缩小的Circle组件')Shape() {Rect().width('100%').height('100%').fill('#BDDB69')Circle({width: 75, height: 75}).fill('#E87361')}.viewPort({x: 0, y: 0, width: 300, height: 300}).width(150).height(150).backgroundColor('#F5DC62')}
}

 

  • 创建一个宽高都为300的shape组件，背景色为黄色，一个宽高都为300的viewport。用一个蓝色的矩形来填充viewport，在viewport中绘制一个半径为75的圆。
Shape() {Rect().width("100%").height("100%").fill("#0097D4")Circle({ width: 150, height: 150 }).fill("#E87361")
}.viewPort({ x: 0, y: 0, width: 300, height: 300 }).width(300).height(300).backgroundColor("#F5DC62")

 

  • 创建一个宽高都为300的shape组件，背景色为黄色，创建一个宽高都为300的viewport。用一个蓝色的矩形来填充viewport，在viewport中绘制一个半径为75的圆，将viewport向右方和下方各平移150。
Shape() {Rect().width("100%").height("100%").fill("#0097D4")Circle({ width: 150, height: 150 }).fill("#E87361")
}.viewPort({ x: -150, y: -150, width: 300, height: 300 }).width(300).height(300).backgroundColor("#F5DC62")

3、自定义样式

        绘制组件支持通过各种属性对组件样式进行更改。

  • 通过fill可以设置组件填充区域颜色。
Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z').fill("#E87361")

 

  • 通过stroke可以设置组件边框颜色。
Path().width(100).height(100).fillOpacity(0).commands('M150 0 L300 300 L0 300 Z').stroke(Color.Red)

  • 通过strokeOpacity可以设置边框透明度。
Path().width(100).height(100).fillOpacity(0).commands('M150 0 L300 300 L0 300 Z').stroke(Color.Red).strokeWidth(10).strokeOpacity(0.2)

  • 通过strokeLineJoin可以设置线条拐角绘制样式。拐角绘制样式分为Bevel(使用斜角连接路径段)、Miter(使用尖角连接路径段)、Round(使用圆角连接路径段)。
Polyline().width(100).height(100).fillOpacity(0).stroke(Color.Red).strokeWidth(8).points([[20, 0], [0, 100], [100, 90]])// 设置折线拐角处为圆弧.strokeLineJoin(LineJoinStyle.Round)

  • 通过strokeMiterLimit设置斜接长度与边框宽度比值的极限值。

    斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。strokeMiterLimit取值需大于等于1，且在strokeLineJoin属性取值LineJoinStyle.Miter时生效。

Polyline().width(100).height(100).fillOpacity(0).stroke(Color.Red).strokeWidth(10).points([[20, 0], [20, 100], [100, 100]])// 设置折线拐角处为尖角.strokeLineJoin(LineJoinStyle.Miter)// 设置斜接长度与线宽的比值.strokeMiterLimit(1/Math.sin(45))
Polyline().width(100).height(100).fillOpacity(0).stroke(Color.Red).strokeWidth(10).points([[20, 0], [20, 100], [100, 100]]).strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(1.42)

  • 通过antiAlias设置是否开启抗锯齿，默认值为true（开启抗锯齿）。

//开启抗锯齿
Circle().width(150).height(200).fillOpacity(0).strokeWidth(5).stroke(Color.Black)

//关闭抗锯齿
Circle().width(150).height(200).fillOpacity(0).strokeWidth(5).stroke(Color.Black).antiAlias(false)

 

4、场景示例

  • 在Shape的(-80, -5)点绘制一个封闭路径，填充颜色0x317AF7,线条宽度10,边框颜色红色,拐角样式锐角（默认值）。
@Entry
@Component
struct ShapeExample {build() {Column({ space: 10 }) {Shape() {Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')}.viewPort({ x: -80, y: -5, width: 500, height: 300 }).fill(0x317AF7).stroke(Color.Red).strokeWidth(3).strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5)}.width('100%').margin({ top: 15 })}
}

  • 绘制一个直径为150的圆，和一个直径为150、线条为红色虚线的圆环（宽高设置不一致时以短边为直径）。
@Entry
@Component
struct CircleExample {build() {Column({ space: 10 }) {//绘制一个直径为150的圆Circle({ width: 150, height: 150 })//绘制一个直径为150、线条为红色虚线的圆环Circle().width(150).height(200).fillOpacity(0).strokeWidth(3).stroke(Color.Red).strokeDashArray([1, 2])}.width('100%')}
}

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

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

相关文章

【Python机器学习】分类器的不确定估计——预测概率

【Python机器学习】分类器的不确定估计——预测概率

predict_proba的输出是每个类别的概率，通常比decision_function的输出更容易理解，对于二分类问题，它的形状始终是(n_samples,2)。 import mglearn.tools from sklearn.ensemble import GradientBoostingClassifier from sklearn.datasets im…
阅读更多...
Vue-16、Vue列表渲染（v-for的使用）

Vue-16、Vue列表渲染（v-for的使用）

1、vue遍历数组 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>列表渲染</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue2/dist/vue.js"…
阅读更多...
C#基础-空处理

C#基础-空处理

在c#中&#xff0c;值对象是没有办法赋值为null的。比如说&#xff0c;你想要定义一个布尔值&#xff0c;你的赋值数据要么得是true、要么就得是false&#xff0c;默认情况下我们永远没可能给这个布尔赋值为null&#xff0c;即使只是对这个变量进行声明而不初始化数据&#xff…
阅读更多...
不方便拉网线，房间又没Wifi信号？按照这个教程，让你家里每个角落都有网

不方便拉网线，房间又没Wifi信号？按照这个教程，让你家里每个角落都有网

前言 前段时间去了一个朋友家里&#xff0c;她老是和我叨叨说她家的卧室一点Wifi信号都没有。每次一躺床上都只能用手机流量上网。 家里明明有拉宽带&#xff0c;为什么在某一些地方还是得用自己手机流量&#xff1f;哎&#xff0c;有钱人的痛就是房子太大了。 我问她为啥不多…
阅读更多...
【Maven】002-Maven 安装和配置

【Maven】002-Maven 安装和配置

【Maven】002-Maven 安装和配置 文章目录 【Maven】002-Maven 安装和配置一、官网1、官网2、历史版本列表3、Maven 仓库地址 二、下载 Maven 3.8.8 版本1、进入 Maven 3.8.8 版本发行说明页2、进入下载页3、下载4、下载得到 apache-maven-3.8.8-bin.zip 三、Maven 安装1、将安装…
阅读更多...
jenkins环境搭建

jenkins环境搭建

jenkins环境搭建 1.环境说明2.环境准备1.jdk安装2.安装Git3.安装sshpass4.安装Maven 3.安装Jenkins(war包方式安装)1.安装2.镜像加速 4.官网提供的yum方式安装5.访问 1.环境说明 keyvalue环境centos7jdk版本11git2.43.0maven3.9.6jenkins最新版本http://mirrors.jenkins-ci.or…
阅读更多...
LINUX基础培训六之磁盘和文件系统管理

LINUX基础培训六之磁盘和文件系统管理

前言、本章学习目标 掌握fdisk分区类型和管理分区了解parted分区类型掌握LVM模式文件系统创建、扩展、缩小文件系统 一、磁盘的分区管理 在 Linux 中有专门的分区命令 fdisk 和 parted。其中 fdisk 命令较为常用&#xff0c;但不支持大于 2TB 的分区&#xff1b;如果需要支…
阅读更多...
C++/WinRT 入门

C++/WinRT 入门

本主题将会根据新的 Windows 控制台应用程序 (C/WinRT) 项目演练一个简单的代码示例。 C/WinRT 快速入门 创建一个新的 Windows 控制台应用程序(C/WinRT) 项目。 根据实际选择平台 如果出现如下错误&#xff0c;需要安装正确的SDK。 找不到 Windows SDK 版本 10.0.17134.0 (o…
阅读更多...
支付功能测试用例测试点？

支付功能测试用例测试点？

支付功能测试用例测试点是指在测试支付功能时&#xff0c;需要关注和验证的各个方面。根据不同的支付场景和需求&#xff0c;支付功能测试用例测试点可能有所不同&#xff0c;但一般可以分为以下几类&#xff1a; 功能测试&#xff1a;主要检查支付功能是否符合设计和业务需求…
阅读更多...
RTTI结构详细分析(VC++)

RTTI结构详细分析(VC++)

对于RTTI结构的资料真的屈指可数,类的逆向也一直是一个不好弄的问题.对此我只想贡献我的一份力量。 文中我不会分析类的内存布局,因为有很多资料已经分析的挺好的了(见参考资料)。但是现有我能找到的资料对RTTI结构的表述不完整,或者表述模糊不清,参考Clang的部分源码后&#…
阅读更多...
一些前端学习过程的自测练习题

一些前端学习过程的自测练习题

目录 页面设计部分 1 设计一个简单的学院网站首页&#xff1b; 2.按照图示要求完成简单的登录页面 3.完成如下网站设计 4.完成如下网站设计&#xff08;练习页面布局&#xff09; 5 利用下面素材&#xff0c;设计一个满足H5规范的网页&#xff08;移动端页面练习&#xff…
阅读更多...
Java中单体应用锁的局限性分布式锁

Java中单体应用锁的局限性分布式锁

互联网系统架构的演进 在互联网系统发展之初&#xff0c;系统比较简单&#xff0c;消耗资源小&#xff0c;用户访问量也比较少&#xff0c;我们只部署一个Tomcat应用就可以满足需求。系统架构图如下: 一个Tomcat可以看作是一个JVM进程&#xff0c;当大量的请求并发到达系统时&…
阅读更多...
Redis：原理速成+项目实战——Redis企业级项目实战终结篇（HyperLogLog实现UV统计）

Redis：原理速成+项目实战——Redis企业级项目实战终结篇（HyperLogLog实现UV统计）

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战14&#xff08;BitMap实现用户签到功能&#xff09; &#x1f4da;订阅专栏&am…
阅读更多...
[易语言]使用易语言部署工业级人脸检测模型

[易语言]使用易语言部署工业级人脸检测模型

【框架地址】 https://github.com/ShiqiYu/libfacedetection 【算法介绍】 Libfacedetection是一个开源的计算机视觉库&#xff0c;主要用于实时的人脸检测。它利用深度学习技术&#xff0c;特别是卷积神经网络&#xff08;CNN&#xff09;&#xff0c;实现了高精度的脸部定位…
阅读更多...
【java八股文】之MYSQL基础篇

【java八股文】之MYSQL基础篇

1、数据库三大范式是什么 第一范式&#xff1a;每个列都不可以再拆分。 第二范式&#xff1a;在第一范式的基础上&#xff0c;非主键列完全依赖于主键&#xff0c;而不能是依赖于主键的一部分。 第三范式&#xff1a;在第二范式的基础上&#xff0c;非主键列只依赖于主键&#…
阅读更多...
AtCoder ABC194

AtCoder ABC194

这期比193稍微简单一点 C - Squared Error 手玩一下&#xff1a; N 3 N3 N3时 展开得 a 2 b 2 − 2 a b b 2 − c 2 − 2 b c a 2 c 2 − 2 a c a^2b^2-2abb^2-c^2-2bca^2c^2-2ac a2b2−2abb2−c2−2bca2c2−2ac 每个数平方项都要计算 n − 1 n-1 n−1次 减的那一份可…
阅读更多...
C语言--结构体详解

C语言--结构体详解

C语言--结构体详解 1.结构体产生原因2.结构体声明2.1 结构体的声明2.2 结构体的初始化2.3结构体自引用 3.结构体内存对齐3.1 对齐规则3.2 为什么存在内存对齐3.3 修改默认对⻬数 4. 结构体传参 1.结构体产生原因 C语言将数据类型分为了两种&#xff0c;一种是内置类型&#xf…
阅读更多...
蓝桥杯单片机组备赛——数码管动态显示

蓝桥杯单片机组备赛——数码管动态显示

✨文章内容会不断优化&#xff0c;如果你感兴趣的话&#xff0c;欢迎点藏收藏关注我哟 &#x1f9e8;如果文章有哪里看不懂的欢迎评论区或私信留言&#xff0c;我会及时回复的 ⏰如果文章出现错误&#xff0c;欢迎指正&#xff0c;看到后我会马上改正 文章目录 一、动态显示原理…
阅读更多...
oracle 19c容器数据库data dump数据泵传输数据（3）---完全传输

oracle 19c容器数据库data dump数据泵传输数据（3）---完全传输

目录 查看pdb1 创建pdb2 从pdb1 中导出元数据 在pdb2中导入元数据&#xff08;dmp文件&#xff09; Full Transportable Export/Import: Example 只传输除了system&#xff0c;sysaux&#xff0c;temp&#xff0c;undo以外的用户表空间&#xff0c;這種方式傳輸的是用戶自定…
阅读更多...
一文学会服务网格与istio使用

一文学会服务网格与istio使用

服务网格 现代应用程序通常被设计成微服务的分布式集合&#xff0c;每个服务执行一些离散的业务功能。服务网格是专门的基础设施层&#xff0c;包含了组成这类体系结构的微服务网络。 服务网格不仅描述了这个网络&#xff0c;而且还描述了分布式应用程序组件之间的交互。所有在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023