7. path路径绘制:使用path绘制曲线

曲线在SVG中通常是通过贝塞尔曲线命令来绘制的,包括二次贝塞尔曲线(Q)和三次贝塞尔曲线(C)。这些命令允许我们创建平滑的曲线路径。

贝塞尔曲线的原理

贝塞尔曲线的基本原理是通过控制点和锚点来定义一条曲线的形状。对于二次贝塞尔曲线,有一个起点、一个控制点和一个终点;而三次贝塞尔曲线则有两个控制点。控制点决定了曲线的弯曲程度和方向。

绘制过程
  1. 二次贝塞尔曲线(Quadratic Bézier Curve):
    • 使用Q命令,后跟一个控制点和一个终点坐标。
    • 控制点决定了从起点到终点的曲线弯曲的程度和方向。

在这里插入图片描述

  1. 三次贝塞尔曲线(Cubic Bézier Curve):
    • 使用C命令,后跟两个控制点和一个终点坐标。
    • 第一个控制点影响曲线起始部分的方向和长度,第二个控制点影响曲线结束部分的方向和长度。

在这里插入图片描述

绘制二次贝塞尔曲线(Q)

二次贝塞尔曲线由一个起点、一个控制点和一个终点定义。其命令格式如下:

<path d="M x1 y1 Q x2 y2 x3 y3" />
  • M x1 y1 表示路径的起点。
  • Q 是二次贝塞尔曲线的指令。
  • x2 y2 是控制点的坐标,它决定了曲线的弯曲程度和方向。
  • x3 y3 是曲线的终点。
二次贝塞尔曲线示例
<!-- SVG容器 -->
<svg width="200" height="200">
  <!-- 绘制二次贝塞尔曲线 -->
  <path d="M 10 80
           Q 95 10 180 80" 
        stroke="black" fill="transparent"/>
  <!-- 起点 -->
  <circle cx="10" cy="80" r="3" fill="red"/>
  <!-- 控制点 -->
  <circle cx="95" cy="10" r="3" fill="green"/>
  <!-- 终点 -->
  <circle cx="180" cy="80" r="3" fill="blue"/>
</svg>
  • M 10 80 表示移动到起点(10,80)。
  • Q 95 10 180 80 表示绘制二次贝塞尔曲线。95 10 是控制点,180 80 是终点。
  • stroke="black" 设置曲线颜色为黑色。
  • fill="transparent" 设置填充颜色为透明。
  • <circle> 元素用来标示起点、控制点和终点。
绘制三次贝塞尔曲线(C)

三次贝塞尔曲线比二次贝塞尔曲线多了一个控制点,因此提供了更高的控制精度。其命令格式如下:

<path d="M x1 y1 C x2 y2 x3 y3 x4 y4" />
  • M x1 y1 表示路径的起点。
  • C 是三次贝塞尔曲线的指令。
  • x2 y2x3 y3 是控制点的坐标,它们共同决定了曲线的形状。
  • x4 y4 是曲线的终点。
三次贝塞尔曲线示例
<!-- SVG容器 -->
<svg width="200" height="200">
  <!-- 绘制三次贝塞尔曲线 -->
  <path d="M 10 150
           C 40 10, 150 10, 180 150" 
        stroke="black" fill="transparent"/>
  <!-- 起点 -->
  <circle cx="10" cy="150" r="3" fill="red"/>
  <!-- 第一个控制点 -->
  <circle cx="40" cy="10" r="3" fill="green"/>
  <!-- 第二个控制点 -->
  <circle cx="150" cy="10" r="3" fill="green"/>
  <!-- 终点 -->
  <circle cx="180" cy="150" r="3" fill="blue"/>
</svg>
  • M 10 150 表示移动到起点(10,150)。
  • C 40 10, 150 10, 180 150 表示绘制三次贝塞尔曲线。40 10 和 150 10 是控制点,180 150 是终点。
  • stroke="black"fill="transparent" 的设置与二次贝塞尔曲线相同。
  • <circle> 元素同样用来标示起点、控制点和终点。

以上代码中,红色的圆点表示起点,绿色的圆点表示控制点,蓝色的圆点表示终点。通过调整控制点的位置,可以改变曲线的形状

示例:绘制一个心形

下面是一个使用三次贝塞尔曲线绘制心形的示例:

<svg width="100" height="100">
  <path d="M 10 30
           C 10 10, 30 10, 30 30
           C 30 50, 10 50, 10 30
           Z" fill="red"/>
</svg>

在这个例子中,我们使用了两个C命令来绘制心形的上半部分,然后用Z命令闭合路径。

通过调整控制点的位置,你可以改变曲线的形状。实践中,你可能需要多次尝试来找到合适的控制点位置,以便绘制出理想的曲线形状。

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

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

相关文章

Android的视图显示和管理机制:layout view window WindowManager Canvas Surface

在Android系统中&#xff0c;Layout view window WindowManager Canvas Surface SurfaceFlinger这些组件协同工作&#xff0c;以实现图形的绘制和显示。需要搞明白这些组件是什么时候创建的以及他们之间的结构关系。 从上到下的层级关系&#xff1a;用户在View上进行操作&…

数据结构复习指导之树、森林

文章目录 树、森林 考纲内容 复习提示 1.树的存储结构 1.1双亲表示法 1.2孩子表示法 1.3孩子兄弟表示法 2.树、森林、与二叉树的转换 2.1树转换为二叉树 2.2森林转换为二叉树 2.3二叉树转换为森林 3.树和森林的遍历 3.1树的遍历 3.2森林的遍历 树、森林 考纲内容…

手机电脑通用便签推荐 好用便签下载

便签软件作为一种日常记录和管理工具&#xff0c;其实用性和便捷性深受用户喜爱。一款优秀的便签软件不仅能帮助我们随时随地记录重要信息&#xff0c;还能有效提高工作效率。然而&#xff0c;市场上很多便签应用仅限于单一平台使用&#xff0c;对于需要在手机和电脑间频繁切换…

FPGA第1篇,FPGA现场可编程门阵列,从0开始掌握可编程硬件开发(FPGA入门指南)

简介&#xff1a;FPGA全称Field-Programmable Gate Array&#xff0c;是一种可编程逻辑器件&#xff0c;它通过可编程的逻辑单元和可编程的连接网络实现了灵活的硬件实现。与固定功能的集成电路&#xff08;ASIC&#xff09;相比&#xff0c;FPGA具有更高的灵活性和可重新配置性…

python随机显示四级词汇

python实现一个浮动窗口随机显示四级单词在桌面跑来跑去 实现一个浮动窗体随机显示四级单词在windows桌面置顶移动 tkinter库来创建窗口和显示单词&#xff0c;以及random库来随机选择单词。 使用after方法来定时更新窗口的位置&#xff0c;实现单词窗口的慢慢移动效果 使用…

day10-Map集合

Map 1.Map 1.1 Map简介 1.为什么使用Map集合 购物车提供的四个商品和购买的数量在后台需要容器存储。 每个商品对象都一一对应一个购买数量。 把商品对象看成是Map集合的键&#xff0c;购买数量看成Map集合的值。 例如: {商品12 , 商品23 &#xff0c; 商品3 2 , 商品4…

GitHub操作

远程库-GitHub GitHub网址 GitHub是全球最大的远程库 1. 创建远程库 2. 远程仓库操作 2.1 创建远程仓库别名 git remote -v 查看当前所有远程库地址别名 git remote add 别名 远程地址 设置远程库地址别名 案例操作 起一个别名会出现两个别名&#xff0c;是因为既可以拉取…

第二步->手撕spring源码之bean操作

本步骤目标 本步骤继续完善 Spring Bean 容器框架的功能开发&#xff0c;在这个开发过程中会用到较多的接口、类、抽象类&#xff0c;它们之间会有类的实现、类的继承。 这一次我们把 Bean 的创建交给容器&#xff0c;而不是我们在调用时候传递一个实例化好的 Bean 对象&#x…

vue3使用setup模式的store报错

** setup store模式 $reset方法报错 ** 顾名思义就是 使用store 使用的是setup 语法模式 不能执行$reset 方法 解决方式&#xff1a; // main.ts import { createPinia } from pinia const pinia createPinia() pinia.use(({ store }) > {const initialState JSON.pars…

JupyterLab OpenCV展示图片

JupyterLab OpenCV展示图片 方式一 注意&#xff1a;此种方式如果在远程服务器上的JupyterLab上运行&#xff0c;可能会出现错误。 import cv2# 读取图片 image cv2.imread(photo/blg.png)# 显示图片 cv2.imshow(image, image)# 等待按键&#xff0c;之后关闭所有窗口 cv2.w…

c语言题库之多个数组从两边移动向中间汇聚

文章目录 题目分析代码实现代码分析 题目 c语言题库之多个数组从两边移动向中间汇聚 呈现效果&#xff1a;输入想要输入的字符数组呈现数组从两边向中间逐渐打开的样子 分析 首先我们需要一组我们想要输入的字符数组用来展示打开的字符其次我们需要进行对数组的替换&#x…

基于STM32单片机的环境监测系统设计与实现

基于STM32单片机的环境监测系统设计与实现 摘要 随着环境污染和室内空气质量问题的日益严重&#xff0c;环境监测系统的应用变得尤为重要。本文设计并实现了一种基于STM32单片机的环境监测系统&#xff0c;该系统能够实时监测并显示室内环境的温湿度、甲醛浓度以及二氧化碳浓…

怎么把学浪课程视频下载到相册

在这个快节奏的学习时代&#xff0c;每一刻的知识获取都显得至关重要。想象一下&#xff0c;在浩瀚如海的学浪app中&#xff0c;你已经找到了那些能够点亮智慧的课程视频&#xff0c;它们不仅充满了启发&#xff0c;还是你求学旅途中的宝贵资源。但是&#xff0c;在网络不稳定或…

Unity2D 模拟手柄实现玩家移动

1&#xff0c;创建控制器UI 2&#xff0c;挂载脚本 3&#xff0c;脚本编写 基本要素 [Tooltip("玩家游戏体")]public Rigidbody2D player;[Tooltip("玩家速度")]public float speed 1f;[Tooltip("玩家动画")]public Animator animator;public …

Docker in Docker(DinD)原理与实战

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Docker幻想曲&#xff1a;从零开始&#xff0c;征服容器宇宙》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Docker简介 2、Docker …

MES系统与WMS集成方法(满分100学习资料)

导语 大家好&#xff0c;我是智能仓储物流技术研习社的社长&#xff0c;老K。专注分享智能仓储物流技术、智能制造等内容。 新书《智能物流系统构成与技术实践》 完整版文件和更多学习资料&#xff0c;请球友到知识星球【智能仓储物流技术研习社】自行下载 这份文件是关于MES系…

什么是XXE漏洞,日常如何做好web安全,避免漏洞威胁

随着网络技术的不断发展&#xff0c;网站安全问题日益受到人们的关注。当前随着技术发展&#xff0c;网站存在一些常见的可能被攻击者利用的漏洞&#xff0c;而在众多网站安全漏洞中&#xff0c;XXE&#xff08;XML External Entity&#xff09;漏洞是一个不容忽视的问题。今天…

多线程·线程状态

目录 1.等待一个线程 join 2.休眠当前线程 3.线程的所有状态 4.线程的状态转换 1.等待一个线程 join 有些场景&#xff0c;我们需要控制线程的执行顺序&#xff0c;这时候就需要用到 join 了 比如&#xff1a;把大象装进冰箱要几步&#xff1f; 第一步&#xff1a;打开冰…

QT ERROR: Unknown module(s) in QT: xlsx怎么办

现象描述 QT编译c代码的时候&#xff0c;报这种QT ERROR: Unknown module(s) in QT: xlsx&#xff0c;应该如何解决&#xff1f; 这里&#xff0c;我简单记录一下自己的解决问题过程。有可能&#xff0c;对遇到同样的问题的你&#xff0c;也有所帮助 第一步 检查perl是否安装…

软考144-下午题-【试题三】:UML图-类图、用例图

一、分值与目标 题型&#xff1a; 问题一~问题三&#xff08;扩展/UML——>设计模式&#xff09; 二、UML基础知识回顾 2-1、关系 UML中有四种关系&#xff1a;依赖、关联、泛化、实现。 1、关联 关联是一种结构关系&#xff0c;它描述了一组链&#xff0c;链是对象之间的…