• 西安外事学院在省茶艺大赛中创多项佳绩西安外事学院-陕西教育新闻 2019-07-18
  • 坚持“九二共识”,路才越走越宽(观沧海) 2019-06-30
  • 十堰神定河水质净化工程6月底试运营 2019-06-27
  • 网友自嘲工资拖后腿 专家:衡量个人收入需更多数据 2019-06-23
  • 人大代表网络平台-天山网 2019-06-20
  • 即使中美贸易归零,中国也不会屈服美国的大棒政策 2019-06-20
  • 百姓故事:蒋姐姐的旗袍人生 2019-06-09
  • C919首飞机组技术支持团队:和大飞机一起舞动青春 2019-06-09
  • 广西工商局多年坚持开展升国旗奏国歌仪式 2019-06-08
  • “首届中国非处方药行业品牌宣传月”活动将在北京举办 2019-06-08
  • 社会主义社会按劳分配是建立在公有制和私有制并存基础上的,共产主义社会按需分配是建立在公有制基础上的,所有制基础不同,其分配形式也就不同。所谓“共产主义... 2019-06-07
  • 3月快递业务量料同比增长30% 2019-06-07
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-06
  • 泼皮无赖风水神,尔有脸能告诉大家这个————“腐败分子是天上掉下来的吗?”————跟帖是哪一个主帖下边的跟帖? 2019-06-05
  • 候选企业:兴业银行包头分行 2019-06-04
  • 贵州11选5任三遗漏:React下用SVG实现一个半圆形仪表盘

    2017-07-21 10:51:12来源:贵州11选5中奖查询作者:joe

    贵州11选5中奖查询 www.ubztu.tw 用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-18
  • 坚持“九二共识”,路才越走越宽(观沧海) 2019-06-30
  • 十堰神定河水质净化工程6月底试运营 2019-06-27
  • 网友自嘲工资拖后腿 专家:衡量个人收入需更多数据 2019-06-23
  • 人大代表网络平台-天山网 2019-06-20
  • 即使中美贸易归零,中国也不会屈服美国的大棒政策 2019-06-20
  • 百姓故事:蒋姐姐的旗袍人生 2019-06-09
  • C919首飞机组技术支持团队:和大飞机一起舞动青春 2019-06-09
  • 广西工商局多年坚持开展升国旗奏国歌仪式 2019-06-08
  • “首届中国非处方药行业品牌宣传月”活动将在北京举办 2019-06-08
  • 社会主义社会按劳分配是建立在公有制和私有制并存基础上的,共产主义社会按需分配是建立在公有制基础上的,所有制基础不同,其分配形式也就不同。所谓“共产主义... 2019-06-07
  • 3月快递业务量料同比增长30% 2019-06-07
  • 【学习时刻】华侨大学黄日涵:“一带一路”盛会开启合作发展新篇章 2019-06-06
  • 泼皮无赖风水神,尔有脸能告诉大家这个————“腐败分子是天上掉下来的吗?”————跟帖是哪一个主帖下边的跟帖? 2019-06-05
  • 候选企业:兴业银行包头分行 2019-06-04
  • 喜乐彩计划 时时彩哪种玩法有漏洞 足球比分手机网址 浙江快乐12现场开奖 腾讯麻将为什么主动发信息 重庆时时彩官网骗局 射门高手返水 双色球基本走势图表图机 极速赛车走势图网址 时时彩走势图