zoukankan      html  css  js  c++  java
  • svg 贝塞尔曲线图解(记录)

    path路径绘制中,绘制贝塞尔曲线的命令包括:

    Q 二次贝赛尔曲线 x1,y1 x,y

    T 平滑二次贝塞尔曲线 x,y

    C 曲线(curveto) x1,y1 x2,y2 x,y

    S 平滑曲线 x2,y2 x,y

    其中Q和T可以在一起使用,C和S可以在一起用。

    Q 二次贝塞尔曲线

    用法:M x0,y0 Q x1,y1 x2,y2

    Snip20150708_4

    通过M定义(x0,y0)为起点,用Q定义(x1,y1)为控制点,(x2,y2)为终点,构成一条二次贝塞尔曲线。 Q方法非常简单直观。

    T 二次贝塞尔曲线平滑延伸

    用法:M x0,y0 Q x1,y1 x2,y2 T x4,y4

    Snip20150708_5

    T 命令是二次被赛尔曲线的平滑延伸命令,用Q定义了一段二次贝塞尔曲线后面,紧接着一个T命令,只需定义终点,就可以自动延伸出一条平滑的曲线。 在这段曲线中,(x3,y3)没有手工定义,这里使用的T方法,只定义一个终点,起点是上一段曲线的终点,控制点则是上一段曲线的控制点的对称点(相对于 上一段曲线的终点)。 在这里,(x3,y3)是(x1,y1)的对称点(相对于(x2,y2)对称)。

    C 三次贝塞尔曲线

    用法:M x0,y0 C x1,y1 x2,y2 x3,y3

    Snip20150708_6

    C方法定义的是三次贝塞尔曲线,这里只是多了一个控制点,很好理解

    S 三次贝塞尔曲线平滑延伸

    用法:M x0,y0 C x1,y1 x2,y2 x3,y3 S x5,y5 x6,y6

    Snip20150708_7

    三次贝塞尔也有一个平滑延伸的命令,需要定义一个控制点和一个终点,命令会再自动生成一个控制点,从而形成一条延伸出来的三次贝赛尔曲线。

  • 相关阅读:
    设计模式读书笔记-----适配器模式
    设计模式读书笔记-----命令模式
    一种另类的解决URL中文乱码问题--对中文进行加密、解密处理
    设计模式读书笔记-----单例模式
    Mysql的一些小知识点
    2-逻辑题二
    1-逻辑题一
    12-1054. 求平均值
    11-1048.数字加密
    10-string类的length()返回值一起的问题
  • 原文地址:https://www.cnblogs.com/zjhr/p/8493168.html
Copyright © 2011-2022 走看看