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 80Q 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 150C 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 30C 10 10, 30 10, 30 30C 30 50, 10 50, 10 30Z" fill="red"/>
</svg>

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

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

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

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

相关文章

命名规范总结Java

小驼峰命名 主要用于变量和方法的命名&#xff0c;当标识符是一个单词时首字母小写&#xff0c;当标识符为多个单词时第一个单词首字母小写&#xff0c;其他单词首字母大写 大驼峰命名 主要用于类(Class)名等。标识符各个单词首字母大写。 全部大写命名 常量名 全部小写命…

持续总结中!2024年面试必问 100 道 Java基础面试题(四十一)

上一篇地址&#xff1a;持续总结中&#xff01;2024年面试必问 100 道 Java基础面试题&#xff08;四十&#xff09;-CSDN博客 八十一、Java内存模型是什么&#xff1f; Java内存模型&#xff08;Java Memory Model, JMM&#xff09;是Java虚拟机&#xff08;JVM&#xff09;…

海豚知道知识付费平台,大V都在用,新手也能做,网络营销是什么?如何向销售转化?

我国的市场营销已经全面步入互联网时代&#xff0c;教育行业也逐渐网络化&#xff0c;通过互联网发家壮大的机构比比皆是&#xff0c;然而仍旧有很多中小型教育培训机构&#xff0c;没有从事网络营销推广&#xff0c;或者从事了效果非常不理想。网络营销是什么&#xff0c;如何…

流畅的python-学习笔记_对象引用、可变性、垃圾回收

变量不是盒子 即变量是引用&#xff0c;而不是实际内存&#xff0c;多个标识赋值相同变量时&#xff0c;多余标识是引用 标识、相等性、别名 比较对象的值&#xff0c;is比较对象的id。实际调用对象的__eq__方法。is速度比快&#xff0c;因为is不能重载&#xff0c;省去了寻…

UNIT6,NFS网络文件系统的应用

实验要求&#xff1a; 1.配置2台服务器要求如下&#xff1a; a&#xff09;服务器1&#xff1a; 主机名&#xff1a;user-server.timinglee.org ip地址&#xff1a; 172.25.254.100 配置好软件仓库 b&#xff09;服务器2&#xff1a; 主机名&#xff1a;storage-server.timing…

力扣 300. 最长递增子序列 python AC

动态规划 dp[i]表示到当前位置为止最多个数的递增子序列 简单的对每个位置从头遍历 class Solution:def lengthOfLIS(self, nums):size len(nums)dp [1] * sizefor i in range(1, size):for j in range(i):if nums[i] > nums[j]:dp[i] max(dp[i], dp[j] 1)return max…

数据结构与算法学习笔记之线性表二---顺序表的静态存储表示和实现(C++)

目录 前言 1.什么是顺序表 2.顺序表的静态存储表示 1.初始化 2.长度 3.数据元素 4.长度 5.获取元素下标 6.前驱节点 7.后继节点 8.插入 9.删除 10.遍历 11.测试代码 前言 这篇文章讲的是顺序表的两种实现方式。 1.什么是顺序表 线性表的顺序表示指的是用一组地址…

Double 4 VR情景智能互动教学系统在商务旅行课堂中的应用

一、提高学生的学习兴趣 传统的商务旅行课堂教学方式往往是教师讲授理论知识&#xff0c;学生被动接受。这种方式很难激发学生的学习兴趣&#xff0c;而Double 4 VR情景智能互动教学系统则可以通过虚拟现实技术&#xff0c;将商务旅行的场景生动地展示给学生&#xff0c;让学生…

医院如何做好漏费管理?什么是控费系统?控费系统现在成熟吗?

在中国深厚的人情土壤之中&#xff0c;某些医院里的医技科室&#xff0c;宛如隐秘的灰色地带&#xff0c;悄然滋生着利用职务之便谋取私利的暗流。这些科室的医务人员&#xff0c;以低于医院明文规定的收费标准&#xff0c;私下里为熟识的患者提供检查服务&#xff0c;仿佛形成…

【碎碎念4】向上社交

好久没写碎碎念系列了&#xff0c;最近关注到身边一些社交关系&#xff0c;想要和大家聊聊向上社交这件事情。首先小田认为向上社交或者仅仅是社交本身是无论什么年纪都需要关注的&#xff0c;因为处理好关系不仅仅会帮助我们把握好机会&#xff0c;同时也能让我们更好的建立自…

undolog

undolog回滚段 undolog执行的时间&#xff1a;在执行器操作bufferpool之前。 undolog页

我觉得这个域名证书监控平台又吊打Uptimekuma了

前面我们讲过uptimekuma 如何监控域名证书&#xff0c;很多人都喜欢 uptimekuma 那高端暗黑的色系上&#xff0c;然而最实用就是它的域名证书监控和历史可用性图表的展示上了&#xff0c;如下如&#xff1a; 但是这个东西吧&#xff0c;好看吗&#xff1f;好看&#xff0c;有用…

llama3 发布!大语言模型新选择 | 开源日报 No.251

meta-llama/llama Stars: 53.0k License: NOASSERTION llama 是用于 Llama 模型推理的代码。 提供了预训练和微调的 Llama 语言模型&#xff0c;参数范围从 7B 到 70B。可以通过下载脚本获取模型权重和 tokenizer。支持在本地快速运行推理&#xff0c;并提供不同规格的模型并…

机器学习作业4——朴素贝叶斯分类器

目录 一、理论 一个例子&#xff1a; 二、代码 对于代码的解释&#xff1a; 1.fit函数&#xff1a; 2.predict函数: 三、实验结果 原因分析&#xff1a; 一、理论 朴素贝叶斯分类器基于贝叶斯定理进行分类&#xff0c;通过后验概率来判断将新数据归为哪一类。通过利用贝…

MFC的CPen与CBush画图对象使用步骤

在MFC中&#xff0c;CPen和CBrush是两个常用的绘图对象&#xff0c;分别用于定义画笔和画刷&#xff0c;可以用于绘制图形、填充区域等。下面我会详细介绍如何在MFC中使用CPen和CBrush来绘制和填充图形。 使用 CPen 绘制图形&#xff1a; 创建 CPen 对象&#xff1a; 首先&am…

桥梁监控可视化大屏:现代桥梁管理的必备呀。

桥梁监控上可视化有几个重要的原因&#xff1a; 01.实时监控&#xff1a; 可视化的监控系统可以实时显示桥梁的各项监测数据&#xff0c;包括结构变形、振动、温度等&#xff0c;使监控人员能够实时了解桥梁的状态&#xff0c;及时发现异常情况并采取相应的措施。 02.数据分析…

MySQL前缀索引、脏页和干净页、COUNT(*)讨论、表删除内存问题

文章目录 如何加索引如何给身份证号添加索引 SQL语句变慢脏页 (Dirty Pages)干净页 (Clean Pages)为何区分脏页和干净页处理脏页管理策略 flush如何控制 为什么删除表数据后表文件大小不变问题背景核心原因数据存储方式参数影响 解决方案1. 调整innodb_file_per_table设置2. 使…

C#之三目运算、三元运算

三目运算也叫三元运算是一种简单的条件语句&#xff0c;也称为条件运算符。它可以根据一个表达式的结果确定另一个表达式的值。三目运算符使用“?”和“:”来表示。 注意使用bool值进行运算 三目运算符: 套路 三个空位 两个符号 固定写法 : 空位1 ? 空位2 : 空位3; 关键…

2024.5.8 —— LeetCode 高频题复盘

目录 检测循环依赖7. 整数反转LCR 170. 交易逆序对的总数55. 跳跃游戏45. 二叉树的后序遍历50. Pow(x, n)40. 组合总和 II74. 搜索二维矩阵26. 删除有序数组中的重复项61. 旋转链表 检测循环依赖 题目链接 def haveCircularDependency(self, n: int, prerequisites):g [[]for…

MATLAB实现遗传算法优化选址-路径LRP问题(Location-Routing Problem)

MATLAB实现遗传算法优化选址-路径LRP问题(Location-Routing Problem) 一、模型 选址车辆路径问题&#xff08;Location-Routing Problem, LRP&#xff09;是一个组合优化问题&#xff0c;旨在同时优化设施位置的选择和车辆的配送路径。在这个问题中&#xff0c;我们考虑一个由…