zoukankan      html  css  js  c++  java
  • svg用path画半圆

    A指令用来绘制一段弧线,且.允许弧线不闭合。可以把A命令绘制的弧线想象成是椭圆的某一段,A指令以下有七个参数。

    A  rx  ry  顺时针角度  1大弧0小弧  1顺时针0逆时针  终点x  终点y

    第三个参数,顺时针角度,这个参数是针对椭圆弧使用的,如果 rx ry 相等的话,设置这个顺时针角度是没有意义的,默认为0就可以了

    下面来看看这个角度对椭圆弧的影响

    <path d="M 100,150 a 50 70 90 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />

    <path d="M 100,150 a 50 70 0 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />

    <circle cx="100" cy="150" r="5" stroke="none" stroke-width="2" fill="red"/>
    <path d="M 100,150 a 50 70 -45 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />

    我以为 45度 时,起始点会像 0度 90度 那样,在椭圆的中心轴与圆弧的交点上,结果竟然不是的,也不晓得这个点的规律是什么

    已下均以rx、ry相等的情况说明,画圆弧

    起点终点间的距离大于直径时,画的永远是半圆,只有起点终点间距离小于半径才能画大半圆和小半圆。

    下面的直径是200 * 2起点终点的距离是300,选择了1(大弧)

    <!DOCTYPE html>
    <html>
    <body>
    
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="550">
        
      <path d="M 100 350 A 200 200 0 1 1 400 350" stroke="black" stroke-width="5" fill="none" />
     
      <!-- Mark relevant points -->
      <g stroke="black" stroke-width="3" fill="black">
        <circle id="pointA" cx="100" cy="350" r="3" />
        <circle id="pointC" cx="400" cy="350" r="3" />
      </g>
      <!-- Label the points -->
      <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
        <text x="100" y="350" dx="-30">A</text>
        <text x="400" y="350" dx="30">B</text>
      </g>
    </svg>
    
    </body>
    </html>

     下面两种情况直径都不大于起点终点间的距离,画的都是一样大小的半圆

    <path d="M 100 350 A 20 20 0 1 1 400 350" stroke="black" stroke-width="5" fill="none" />
    
    <path d="M 100 350 A 150 150 0 1 1 400 350" stroke="black" stroke-width="5" fill="none" />

    画圆形可以利用相对路径,A表示绝对路径,a表示相对路径

    <path d="M 100,150 a 50 50 0 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />

    这里的 a 后面的最后两个参数 0 1,表示x不变,y向下偏移1,最后利用 z 闭合路径

    如果不加z,不闭合的效果如下图

  • 相关阅读:
    本地坐标转世界坐标为什么是 先缩放后旋转再平移
    cocos子节点转父节点坐标 原理浅析(局部坐标转世界坐标同理)
    Github上关于iOS的各种开源项目集合2(强烈建议大家收藏,查看,总有一款你需要)
    Github上关于iOS的各种开源项目集合(强烈建议大家收藏,查看,总有一款你需要)
    Masonry基本语法
    WebStorm 10.0.4注册码
    如何让CCLayer创造的地图,左右滑动不出现黑边
    GitHub 上排名前 100 的 Objective-C 项目简介
    C语言fmod()函数:对浮点数取模(求余)
    查看笔记本最大支持内存
  • 原文地址:https://www.cnblogs.com/LcxSummer/p/12420385.html
Copyright © 2011-2022 走看看