• 视频:世界杯路边“摄”之印象最深刻的瞬间 2019-10-08
  • 杜天皓520甜蜜来袭 粉丝舔屏福利多 2019-09-27
  • 市领导调研利用侨务资源助力经济建设情况(图) 2019-09-26
  • 这五年,砥砺奋进的河北海事局--河北频道--人民网 2019-09-25
  • 新闻有温度——西部网新闻频道(陕西新闻网) news.cnwest.com 2019-09-25
  • 连晴高温重庆动物园动物避暑尽显萌态 2019-09-01
  • 【端午话民俗】指尖上的端午节 师生一起包粽子做香包体验传统文化 2019-08-30
  • 除非必要,下定义要用是,而不是用不,懂吗?“自由发展”是什么,如果劳动还成为人们的日常负担,有自由发展吗? 2019-08-25
  • 总重430kg!日本最重组合:5名胖女孩出道了! 2019-08-22
  • 做习近平新闻思想的坚定实践者 2019-08-03
  • 广东省人大开展学习贯彻习近平总书记重要讲话精神专题集中学习研讨 2019-07-15
  • 改革开放40年来中国农村发展变化纪实——旧貌换新颜 2019-07-15
  • 学习有理丨着力改善环境 增创发展优势 2019-07-11
  • 带动乡亲干 各自有实招——三位农村社区党组织书记的故事 2019-07-07
  • 李沁出游暖萌喂鹿 笑靥如花欢快荡秋千 2019-07-04
  • 排球比赛比分直播:React下用SVG实现一个半圆形仪表盘

    2017-07-21 10:51:12来源:排球比分直播捷报网作者:joe

    排球比分直播捷报网 www.pwgq.net 用SVG实现一个半圆形仪表盘

    由于需要在网页中展示一个如下的效果:

    \
    仪表盘

    项目开发采用的是React,使用 Ant Design 组件库,我发现Ant Design中有一个Progress很像。

    Process使用的是rc_progress,实现过程很巧妙,首先通过两个圆,然后将要显示进度的圆变成虚线,通过调节虚线起始位置来实现进度的变化。我也类似的做了一个仪表盘,对Process做了一些调整。

    具体步骤如下:

    首先画两个圆,一个为底图,一个为进度图?;ㄊ欠直鹱笥一桓霭朐?。

    const pathString = `M 50,50 m 0,${radius}
      a ${radius},${radius} 0 1 1 0,-${2 * radius}
      a ${radius},${radius} 0 1 1 0,${2 * radius}`;

    然后将底图的圆变成虚线,虚线中不显示的部分我开口的部分

    const len = Math.PI * 2 * radius;
    const trailPathStyle = {
      strokeDasharray: `${len - openWidth}px ${len}px`,
      strokeDashoffset: `${openWidth / 2}px`,
      transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease',
    };

    同样的方法,将进度圆也修改为虚线

    const strokePathStyle = {
      strokeDasharray: `${percent / 100 * (len - openWidth)}px ${len}px`,
      strokeDashoffset: `${openWidth / 2}px`,
      transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease',
    };

    SVG部分代码如下:

          <svg
            className={`${prefixCls}-circle ${className}`}
            viewBox="0 0 100 100"
            style={style}
            {...restProps}
          >
            <path
              className={`${prefixCls}-circle-trail`}
              d={pathString}
              stroke={trailColor}
              strokeWidth={trailWidth || strokeWidth}
              fillOpacity="0"
            />
            <path
              className={`${prefixCls}-circle-path`}
              d={pathString}
              strokeLinecap={strokeLinecap}
              stroke={strokeColor}
              strokeWidth={strokeWidth}
              fillOpacity="0"
              ref={(path) => { this.path = path; }}
              style={pathStyle}
            />
          </svg>

    这部分代码我已经提交了一个建议给Ant Design,希望他们能做的更好。

    后记,相关的SVG知识

    <path> 标签:用来定义路径。

    下面的命令可用于路径数据:

    M = moveto
    L = lineto
    H = horizontal lineto
    V = vertical lineto
    C = curveto
    S = smooth curveto
    Q = quadratic Belzier curve
    T = smooth quadratic Belzier curveto
    A = elliptical Arc
    Z = closepath

    注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

    stroke-dasharray 是用于设置虚线的属性。你可以使用它来设置每条划线长度以及划线之间空格的大小著作权归作者所有。

    <svg width="600px" height="300px">
        <line x1="0" y1="20" x2="600" y2="20" stroke="#000" stroke-width="3" stroke-dasharray="10 2"/>
        <line x1="0" y1="40" x2="600" y2="40" stroke="#000" stroke-width="3" stroke-dasharray="5 10"/>
        <line x1="0" y1="60" x2="600" y2="60" stroke="#000" stroke-width="3" stroke-dasharray="1 1"/>
        <line x1="0" y1="80" x2="600" y2="80" stroke="#000" stroke-width="3" stroke-dasharray="10"/>
    </svg>

    第一个值是划线的长度,第二个值是各个划线之间的空格大小。如果你只设置了一个值(如上面的最后一个示例),它会默认设置相同划线长度和划线空格。

    stroke-dashoffset属性是设置虚线的偏移量。

    <svg width="600px">
        <line x1="0" y1="20" x2="600" y2="20" stroke="#000" stroke-width="3"
              stroke-dasharray="50 30"/>
        <line x1="0" y1="40" x2="600" y2="40" stroke="#000" stroke-width="3"
              stroke-dasharray="50 30"
              stroke-dashoffset="10"/>
    </svg>

    第二条线设置stroke-dashoffset=10,线条偏移了10。

    关键词:SVGReact
  • 视频:世界杯路边“摄”之印象最深刻的瞬间 2019-10-08
  • 杜天皓520甜蜜来袭 粉丝舔屏福利多 2019-09-27
  • 市领导调研利用侨务资源助力经济建设情况(图) 2019-09-26
  • 这五年,砥砺奋进的河北海事局--河北频道--人民网 2019-09-25
  • 新闻有温度——西部网新闻频道(陕西新闻网) news.cnwest.com 2019-09-25
  • 连晴高温重庆动物园动物避暑尽显萌态 2019-09-01
  • 【端午话民俗】指尖上的端午节 师生一起包粽子做香包体验传统文化 2019-08-30
  • 除非必要,下定义要用是,而不是用不,懂吗?“自由发展”是什么,如果劳动还成为人们的日常负担,有自由发展吗? 2019-08-25
  • 总重430kg!日本最重组合:5名胖女孩出道了! 2019-08-22
  • 做习近平新闻思想的坚定实践者 2019-08-03
  • 广东省人大开展学习贯彻习近平总书记重要讲话精神专题集中学习研讨 2019-07-15
  • 改革开放40年来中国农村发展变化纪实——旧貌换新颜 2019-07-15
  • 学习有理丨着力改善环境 增创发展优势 2019-07-11
  • 带动乡亲干 各自有实招——三位农村社区党组织书记的故事 2019-07-07
  • 李沁出游暖萌喂鹿 笑靥如花欢快荡秋千 2019-07-04
  • 快乐十分开奖结查询山西 江西快3官网下载安装到手机 上海时时彩购买 香港六合彩开奖号码 我要机选投注下载 五十七期一尾中特平 天津时时彩几点截止 pk10看走势图技巧 澳门皇家赌场电影在线 河内五分彩算法 全天腾讯分分彩两期在线计划 捕鱼达人2电脑版在线玩 竞彩篮球胜分差怎么买 网球比分球探 排球个人战术