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

news2024/11/13 5:31:43

曲线在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.coloradmin.cn/o/1666632.html

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

相关文章

微服务下的技术栈架构解析

微服务是一种架构风格&#xff0c;它将一个复杂的应用拆分成多个独立自治的服务&#xff0c;每个服务负责应用程序中的一小部分功能。这些服务通过定义良好的API进行通信&#xff0c;通常是HTTP RESTful API或事件流。微服务架构的主要特点包括单一职责、自治性、可独立部署和扩…

14.跳跃游戏Ⅱ

文章目录 题目简介题目解答解法一&#xff1a;贪心算法动态规划代码&#xff1a;复杂度分析&#xff1a; 题目链接 大家好&#xff0c;我是晓星航。今天为大家带来的是 跳跃游戏Ⅱ 相关的讲解&#xff01;&#x1f600; 题目简介 题目解答 解法一&#xff1a;贪心算法动态规划…

03c++继承与多态

目录&#xff1a; 继承的本质和原理派生类的构造过程重载覆盖 隐藏静态绑定和动态绑定多态 vfptr和vftable抽象类的设计原理多重继承以及问题虚基类 vbptr和vbtableRTTIc四种类强转继承多态常见笔试面试题目分享 1、继承的本质和原理&#xff1a; 继承方式&#xff1a; 基类…

2023愚人杯 )————被遗忘的反序列化

<?php# 当前目录中有一个txt文件哦 error_reporting(0); show_source(__FILE__); include("check.php");class EeE{public $text;public $eeee;public function __wakeup(){if ($this->text "aaaa"){echo lcfirst($this->text);}}public functi…

如何远程操作服务器中的Python编译器并将运行结果返回到Pycharm

文章目录 一、前期准备1. 检查IDE版本是否支持2. 服务器需要开通SSH服务 二、Pycharm本地链接服务器测试1. 配置服务器python解释器 三、使用内网穿透实现异地链接服务器开发1. 服务器安装Cpolar2. 创建远程连接公网地址 四、使用固定TCP地址远程开发 本文主要介绍如何使用Pych…

1065 单身狗

solution “单身狗”&#xff1a;没有搭子或者搭子没来的参与者输出id时按增序输出 #include<iostream> #include<map> #include<algorithm> using namespace std; const int maxn 1e6, maxn1 1e4 10; int flag[maxn] {0}, all[maxn1]; int main(){int…

工程师工具箱系列(2)hasor

文章目录 工程师工具箱系列(2)hasor简介特点环境准备引入依赖数据库脚本文件配置Hasor配置 运行测试小结 工程师工具箱系列(2)hasor 简介 Hasor有着自己的独立的生命周期与Spring的不同&#xff0c;是一套完整的体系&#xff0c;提供了注入DataQL、Dataway、hasor-web等等&am…

《中阿科技论坛(中英文)》是什么级别的期刊?是正规期刊吗?

问题解答 问&#xff1a;《中阿科技论坛&#xff08;中英文&#xff09;》是核心期刊吗&#xff1f; 答&#xff1a;不是&#xff0c;但是正规期刊 问&#xff1a;《中阿科技论坛&#xff08;中英文&#xff09;》是什么级别期刊&#xff1f; 答&#xff1a;省级 主管单位…

十三、Redis哨兵模式--Sentinel

上一篇介绍了Redis中的主从复制。我们知道Redis主从中一般只有主节点对外提供写操作&#xff0c;如果主节点发生故障&#xff0c;为了保证Redis的可用性&#xff0c;这时就要在可用的slave节点中&#xff0c;挑选一个作为主节点。这种切换操作如果是人为的操作&#xff0c;那么…

i春秋-GetFlag

题目 考点 sql注入&#xff0c;md5加密&#xff0c;代码审计&#xff0c;利用eval函数 解题 参考wp https://www.cnblogs.com/qiaowukong/p/13630130.html找md5值 看见验证码中的提示&#xff0c;就是去找一个md5值前六位是指定值的数&#xff08;严格来说不一定是数&…

基于python的旅游爬虫可视化与实现

摘要 本项目为基于python的旅游爬虫可视化的设计与实现&#xff0c;项目以Web系统形式展示&#xff0c;利用Xpath爬虫爬取去哪儿网针对旅游业的需求&#xff0c;对国内热门旅游景点数据可视化系统&#xff0c;将爬取好的数据保存为CSV文件&#xff0c;再通过ORM框架导入MySQL数…

出现Duplicate key

解决&#xff1a; 第一种情况&#xff1a; 添加一个字段prjId &#xff0c;和数据库表映射时&#xff0c;映射的字段存在映射关系了。 将第二个 TableField中的prj_num改成prj_id 即可。 第二种情况&#xff1a; 转成map的形式时&#xff1a;key重复了&#xff0c;不知道把值赋…

QuickBooks 2024 for Mac 激活版:智慧管理,财务无忧

想要轻松掌控财务&#xff0c;实现高效管理吗&#xff1f;QuickBooks 2024 for Mac&#xff0c;您的智慧财务管理专家&#xff0c;为您带来前所未有的便利和体验。无论是账务、工资还是销售和库存&#xff0c;它都能一手搞定。直观易用的界面&#xff0c;让您轻松上手&#xff…

(二)Jetpack Compose 布局模型

前文回顾 &#xff08;一&#xff09;Jetpack Compose 从入门到会写-CSDN博客 首先让我们回顾一下上一篇文章中里提到过几个问题&#xff1a; ComposeView的层级关系&#xff0c;互相嵌套存在的问题&#xff1f; 为什么Compose可以实现只测量一次&#xff1f; ComposeView和…

加密与CA证书

文章目录 加密与CA证书http协议是不安全的使用对称秘钥进行数据加密非对称秘钥加密CA证书应用补充 加密与CA证书 CA 证书是什么&#xff0c;证书的目的是什么 首先明确一点&#xff0c;CA证书是数字时代中确保身份和数据安全的重要工具&#xff0c;为用户提供了安心、便捷和可…

vlock工具:锁定Linux终端的安全智能方法

虚拟控制台是 Linux 非常重要的功能&#xff0c;它们为系统用户提供 shell 提示&#xff0c;以非图形设置方式使用系统&#xff0c;该设置只能在物理机上使用&#xff0c;而不能远程使用。 用户只需从一个虚拟控制台切换到另一个虚拟控制台即可同时使用多个虚拟控制台会话。 …

[机器学习-05] Scikit-Learn机器学习工具包进阶指南:协方差估计和交叉分解功能实战【2024最新】

&#x1f3a9; 欢迎来到技术探索的奇幻世界&#x1f468;‍&#x1f4bb; &#x1f4dc; 个人主页&#xff1a;一伦明悦-CSDN博客 ✍&#x1f3fb; 作者简介&#xff1a; C软件开发、Python机器学习爱好者 &#x1f5e3;️ 互动与支持&#xff1a;&#x1f4ac;评论 &…

QT自适应界面 处理高DPI 缩放比界面乱问题

1.pro文件添加 必须添加要不找不到 QT版本需要 5。4 以上才支持 QT widgets 2.main界面提前处理 // 1. 全局缩放使能QApplication::setAttribute(Qt::AA_EnableHighDpiScaling, true);// 2. 适配非整数倍缩放QGuiApplication::setHighDpiScaleFactorRoundingPolicy(Qt::High…

EPAI手绘建模APP工程图顶部工具栏

7、工程图 图 302 工程图 工程图包括顶部常用工具栏、右侧工程图工具栏、左侧模型列表栏、中间的工程图。 (1) 常用工具栏 ① 删除&#xff0c;选中场景中工程图元素后&#xff0c;删除。可以选择多个工程图元素同时删除。 ② 设置&#xff0c;打开工程图设置页面&#xff0…