• 广东省人大开展学习贯彻习近平总书记重要讲话精神专题集中学习研讨 2019-07-15
  • 改革开放40年来中国农村发展变化纪实——旧貌换新颜 2019-07-15
  • 学习有理丨着力改善环境 增创发展优势 2019-07-11
  • 带动乡亲干 各自有实招——三位农村社区党组织书记的故事 2019-07-07
  • 李沁出游暖萌喂鹿 笑靥如花欢快荡秋千 2019-07-04
  • 李丽珠:沉到基层 脚踏实地干工作 2019-07-04
  • 文房清供:皇帝笔架上的那些奇珍异巧 2019-06-30
  • 世界杯揭幕战:俄罗斯队胜沙特阿拉伯队 2019-06-30
  • 【新时代 新作为 新篇章】牢记嘱托 打赢脱贫攻坚战 2019-06-18
  • 中国的城市化人口已超过欧美,如果生产总值干不过,则城市化质量是有问题的。 2019-06-18
  • 2013第八届中国常州先进制造技术成果展示洽谈会——中国常州网专题 2019-06-15
  • 发展中国家的市场经济,一般会落入:资本市场、来料加工、吃喝玩乐消费、房地产疯涨,等经济基础不牢的“中等收入陷阱”。 2019-06-15
  • 《侏罗纪世界2》《泄密者》今日上映 2019-05-30
  • 河北遵化清东陵打响景区环境提升攻坚战 2019-05-30
  • 部分金交所变相突破合格投资人数量限制 2019-05-23
  • 体育直播排球: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-07-15
  • 改革开放40年来中国农村发展变化纪实——旧貌换新颜 2019-07-15
  • 学习有理丨着力改善环境 增创发展优势 2019-07-11
  • 带动乡亲干 各自有实招——三位农村社区党组织书记的故事 2019-07-07
  • 李沁出游暖萌喂鹿 笑靥如花欢快荡秋千 2019-07-04
  • 李丽珠:沉到基层 脚踏实地干工作 2019-07-04
  • 文房清供:皇帝笔架上的那些奇珍异巧 2019-06-30
  • 世界杯揭幕战:俄罗斯队胜沙特阿拉伯队 2019-06-30
  • 【新时代 新作为 新篇章】牢记嘱托 打赢脱贫攻坚战 2019-06-18
  • 中国的城市化人口已超过欧美,如果生产总值干不过,则城市化质量是有问题的。 2019-06-18
  • 2013第八届中国常州先进制造技术成果展示洽谈会——中国常州网专题 2019-06-15
  • 发展中国家的市场经济,一般会落入:资本市场、来料加工、吃喝玩乐消费、房地产疯涨,等经济基础不牢的“中等收入陷阱”。 2019-06-15
  • 《侏罗纪世界2》《泄密者》今日上映 2019-05-30
  • 河北遵化清东陵打响景区环境提升攻坚战 2019-05-30
  • 部分金交所变相突破合格投资人数量限制 2019-05-23
  • 广东时时彩任选2 新加坡快乐8开奖记录 北京赛车预测苹果软件 香港赛马会钥匙 极速快乐十分是啥意思 北京十一选五3010期开奖结果 六合彩中特怎么赔 极速飞艇pk10开奖直播 广东时时彩官网预测app 江苏7位数最新开奖l 排列三走势图连线 组选714出后的前后关系 体彩陕西11选5开奖结果查询结果 双色球开奖分布图 北京pk10和值计划