SVG学习(4)

发表于 | 分类于 ， ， | 阅读次数:

Path

Path概述

Path字符串

<path d="M0,0L10,20C30-10,40,20,100,100" stroke="red">
L(命令)10(参数),(参数之间可以用空格或逗号隔开，有一种情况例外，就是下一个字符是负数[负号可以表示上一参数的结束])20(参数)

命令汇总

命令 含义
M/m (x,y)+ 移动当前位置
L/l (x,y)+ 从当前位置绘制线段到指定位置
H/h (x)+ 从当前位置绘制水平线到达指定的x坐标
V/v (x)+ 从当前位置绘制竖直线到达指定的y坐标
Z/z 闭合当前路径
C/c (x1,y1,x2,y2,x,y)+ 从当前位置绘制三次贝塞尔曲线到指定位置
S/s (x2,y2,x,y)+ 从当前位置光滑绘制三次贝塞尔曲线到指定位置
Q/q (x1,y1,x,y)+ 从当前位置绘制二次贝塞尔曲线到指定位置
T/t (x,y)+ 从当前位置光滑绘制二次贝塞尔曲线到指定位置
A/a (rx,ry,xr,laf,sf,x,y) 从当前位置绘制弧线到指定位置

命令基本规律

  • 区分大小写：大写表示坐标参数为绝对值，小写则为相对位置（相对上一个命令结束后画笔停留的位置）
  • 最后的参数表示最终要到达的位置
  • 上一个命令结束的位置就是下一个命令开始的位置
  • 命令可以重复参数表示重复执行同一条命令

移动和直线命令

  • M(x,y)+ 移动画笔，后面如果有重复参数，会当作是L命令处理
  • L(x,y)+ 绘制直线到指定位置
  • H(x)+ 绘制水平线到指定的x位置
  • V(y)+ 绘制竖直线到指定的y位置
  • m,l,h,v使用相对位置绘制

弧线命令

  • A(rx,ry,xr,laf,sf,x,y) - 绘制弧线
  • 最复杂的命令
    rx - (radius-x) 弧线所在椭圆的x半轴长
    ry - (radius-y) 弧线所在椭圆的y半轴长
    xr - (xAxis-rotation) 弧线所在椭圆的长轴角度
    laf - (large-arc-flag) 是否选择弧长较长的那一段弧
    • laf=0 弧长较短的那段
    • laf=1 弧长较长的那段
      sf - (sweep-flag) 是否选择逆时针方向的那一段弧
    • sf=0 逆时针
    • sf=1 顺时针
      x,y - 弧的终点位置

贝塞尔曲线命令

  • 贝塞尔曲线概念
  • 四条贝塞尔曲线的命令

贝塞尔曲线

P0 P1 t=0

二次贝塞尔曲线命令
起始点 结束点 控制点 控制线
P0 P1 P2 t=0
P0(x0,y0)起始点 C1(x1,y1)控制点 P(x,y)结束点
M x0 y0 Q x1 y1 x y

Q是quadratic的第一个字母
起始点的位置是path的当前位置，可以通过move或者直线或者弧线命令修改到当前的位置，Q后跟的是控制点的坐标以及结束点的坐标，由于二次贝塞尔曲线之需要一个控制点所以Q的命令有四个参数，分别是控制点坐标和结束位置坐标

三次贝塞尔曲线命令
起始点 结束点 控制点 控制线
P0 P1 P2 P3 t=0
P0(x0,y0)起始点 C1(x1,y1)控制点 C2(x2,y2)控制点 P(x,y)结束点
M x0 y0 Q x1 y1 x2 y2 x y

四次贝塞尔曲线命令
起始点 结束点 控制点 控制线
P0 P1 P2 P3 P4 t=0

贝塞尔曲线通项公式

光滑曲线

  • T:Q的光滑版本（二次贝塞尔曲线）
    C1是上一段曲线的控制点关于当前曲线起始点的镜像位置
  • S:C的简化版本（三次贝塞尔曲线，第一个控制点的位置可以省略）
    C1是上一段曲线的控制点2关于当前曲线起始点的镜像位置

M100,200 C100,100 250,100 250,200 S400,300 400,200

回顾思考

  • Path命令的作用是什么，Path字符串的格式是什么
  • 一共有多少个Path命令，它们分别的参数是什么
    • 如何求贝塞尔曲线的长度，如何求整个Path的长度
    • 如何求一个Path的子路径
    • 如何求两个Path的补间

Raphael 矢量图形库

根据慕课网课程整理