HarmonyOS Next开发教程:详解贝塞尔曲线

简介: 在鸿蒙开发中,提供了两种绘制贝塞尔曲线的方式,一种是二次贝塞尔曲线

好久不见啊大家,经过了一段时间的忙碌,终于能抽出空来跟大家分享一期鸿蒙开发教程。
今天要分享的是贝塞尔曲线。
在鸿蒙开发中,提供了两种绘制贝塞尔曲线的方式,一种是二次贝塞尔曲线
quadraticCurveTo(cpx: number, cpy: number, x: number, y: number)
一种是三次贝塞尔曲线:
bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number)
接触过贝塞尔曲线的同学有没有这种感觉:我按照要求转入了坐标,但是这曲线完全不经过我设定的轨迹,我控制不了它啊~我做不到啊!!!
这里幽蓝君就要跟大家解释一下了,这两种绘制方式,除了最后一个坐标是曲线的终点会被经过以外,另外的点叫做曲线的控制点,并不一定被经过。
咱们拿相对简单的二次贝塞尔曲线为例,虽然在绘制方法中只要求传入两个坐标,但是二次贝塞尔曲线是由三个点决定的,分别是起点、终点和一个控制点。
对于起点大家可以使用moveTo方法将起始位置移到相应坐标。
这时候重点来了。
大家想一想,如果说有二次和三次贝塞尔曲线,那有没有一次贝塞尔曲线?
咱们推理一下,三次贝塞尔曲线有两个控制点,二次贝塞尔曲线有一个控制点,那么一次贝塞尔曲线他就是没有控制点,只有起点和终点。所以所谓一次贝塞尔曲线就是一条直线。
image.png

那如果它有了一个控制点之后,变成二次贝塞尔曲线,它的轨迹应该是这样的:
起点和终点分别向控制点连线,曲线的走向应当和这两条线段相切:
image.png

那如果是三次贝塞尔曲线呢?这个时候也会产生两条线段,分别是起点和第一个控制点,终点和第二个控制点连接成的线段,这条曲线也应当和这两条线段相切:
image.png

所以大家现在能够理解曲线为什么不经过你传入的坐标。
有的同学要说了,我现在理解了,但是我还是不会画呀,我怎么知道控制点的坐标呢?
幽蓝君以画圆为例,希望大家看得明白。
在贝塞尔中是无法直接画一个圆的,但是可以画四个四分之一圆进行拼接,咱们就以画一个四分之一圆为例。
image.png

因为这个四分之一圆要和对应的两条线段相切,所以这两个控制点和起始点一定是水平或垂直的关系,我只需要知道这两条线段有多长就可以了,而且这两条线段也一定是相等的长度,所以这里又引出一个魔法系数m,根据复杂的计算,当我需要画一个标准的四分之一圆是这个系数近似等于0.551915024494r,所以当圆的半径为10,我传入的坐标就是:
bezierCurveTo(10
0.551915024494,0, 10, 10 - 10*0.551915024494, 10, 10)
那么这个魔法系数又是怎么计算出来的,这就属于纯纯的数学问题了,如果大家感兴趣,咱们有机会再详细说说。以上就是登录页面开发的内容分享,感谢阅读。#HarmonyOS语言##ArkTS##工具效率#

相关文章
|
1月前
|
监控 JavaScript 编译器
从“天书”到源码:HarmonyOS NEXT 崩溃堆栈解析实战指南
本文详解如何利用 hiAppEvent 监控并获取 sourcemap、debug so 等核心产物,剖析了 hstack 工具如何将混淆的 Native 与 ArkTS 堆栈还原为源码,助力开发者掌握异常分析方法,提升应用稳定性。
383 39
|
1月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
239 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
209 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
528 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
122 0
|
2月前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
164 1
|
2月前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
357 1
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
2月前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
162 1
|
2月前
|
传感器 监控 安全
HarmonyOS NEXT 5.0 的星闪(NearLink)开发应用案例
V哥分享HarmonyOS NEXT 5.0星闪开发实战,涵盖智能车钥匙无感解锁与工业传感器监控。低延迟、高可靠,代码完整,速来学习!
491 0
|
5月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。

热门文章

最新文章