Progress dashboard type (half circle)

[qiaolb]

我想实现一个半圆效果，其实是一个仪表盘，如图：

有没有办法让Progress支持呢？

[benjycui]

这个要考虑缺口角度的可配置么。

[qiaolb]

我看了progress/src/Circle.js，建议修改如下：
将14行：

    const radius = (50 - strokeWidth / 2);
    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 pathStyle = {
      strokeDasharray: `${len}px ${len}px`,
      strokeDashoffset: `${((100 - percent) / 100 * len)}px`,
      transition: 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease',
    };

修改为如下：

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',
};

通过openWidth来控制下发圆的开口，如果为0还之前相同；trailPathStyle为底图圆的样式，strokePathStyle为进度的样式。

效果：

[qiaolb]

@benjycui 我觉得很少有其他角度，可以不考虑

[benjycui]

其实这个需求已经修改了 Progress 起点的角度，默认的起点在顶部，see https://ant.design/components/progress/#components-progress-demo-circle

[ddcat1115]

是的，起点应该要可配了

[benjycui]

还是先重载缺口属性的语义吧，设置了缺口就意味着起点在左下开始。

[afc163]

@qiaolb 能来个 PR 么，感觉需求很清晰，不妨抽时间参与一下？

[qiaolb]

由于急用，先临时写了一个，当Ant Design支持后再切换回来：
https://github.com/qiaolb/react-dashboard

[qiaolb]

@afc163 弱弱的问一下，什么是PR？

[afc163]

https://github.com/ant-design/ant-design/pulls

就是给我们提交代码，这个特性交给你来完成。

[qiaolb]

明白了。可以

[benjycui]

More about PR: http://makeapullrequest.com/

[afc163]

<Progress type="dashboard" />

[qiaolb]

@afc163 在rc-progress中增加了两个属性gapWidth和gapPosition，表现还是一个圆形，可以在属性中直接指定。由于这两个值都有缺省值，缺省值保持和以前效果相同。这样是否需要增加一个type（dashboard）呢？

[afc163]

我是想，上层就不显式暴露这两个值了，封装成一个类型即可。

[qiaolb]

@afc163 如果不暴露，开口的大小开发者就没有办法定义了。开口方向一般都是下面，问题到不大。

[afc163]

我意思是不显式暴露，属性还是会传递到 rc-progress 上，如果高级开发者要定义也是能行的。

---

type="dashboard" 封装掉 gapWidth 和 gapPosition 的默认值，并且可以被覆盖。gapWidth 和 gapPosition 不在 antd 的文档中体现。

[qiaolb]

@afc163 OK.

[qiaolb]

@afc163 请教一个问题，我代码已经修改，但由于rc-progress修改的版本还没有发布，我如何测试Ant Design的修改呢？

[xueqingxiao]

@qiaolb 你可以直接修改node_modules/rc-progress地下的源码来测试。

[afc163]

rc-progress 里跑一下 npm run build 可以生成 lib 目录。

[qiaolb]

我运行npm run build只生成了例子。tnpm是需要通过tnpm install重新安装依赖库吗？

[afc163]

确实不行。用这个：./node_modules/.bin/rc-tools run compile

[qiaolb]

@afc163 可以了，谢谢

[afc163]

rc-progress@2.1.0 发布了，gapWidth 我又改成 gapDegree 了，角度比较准确。

[qiaolb]

@afc163 太好了，效率真高！

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.