自定义角度圆形进度条 SVG 用户界面答案

【问题标题】：Custom angular circular progress bar SVG User Interface自定义角度圆形进度条 SVG 用户界面
【发布时间】：2017-02-04 05:16:12
【问题描述】：

我从angular-circular-progress github 开发了我的圆形进度条。

我当前的输入是：

我需要用一个小CIRCLE和一个圆形进度条的VALUE CENTRE来修改进度条的结尾，该圆形进度条具有基于svg运动的真实动画值。我怎么能这样做？我真的需要你们所有人的帮助。

我的预期输出应该是：

我现在的sn-p：

angular.module('myModule', ['angular-circular-progress'])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://pencil.my/assets/js/circularProgress.js"></script>

<div ng-app="myModule">
<circular-progress
		    value="80"
		    max="100"
		    orientation="1"
		    radius="100"
		    stroke="10"
		    base-color="#fff"
		    progress-color="#f9991d"
		    iterations="100"
		    animation="easeInOutCubic"
		></circular-progress>
  </div>

【问题讨论】：

我很高兴看到是否有人可以修改我使用的现有库pencil.my/assets/js/circularProgress.js

标签： javascript angularjs svg progress-bar drawing

【解决方案1】：

你看过 ProgressBar.js 吗？

var bar = new ProgressBar.Circle(container, {

    enter code herecolor: '#aaa',
   // This has to be the same size as the maximum width to
   // prevent clipping
   strokeWidth: 4,
   trailWidth: 1,
   easing: 'easeInOut',
   duration: 1400,
   text: {
        autoStyleContainer: false
   },
   from: { color: '#aaa', width: 1 },
   to: { color: '#333', width: 4 },
   // Set default step function for all animate calls
   step: function(state, circle) {
   circle.path.setAttribute('stroke', state.color);
   circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
    circle.setText(''); 
    } else {
    circle.setText(value);
}

Here 是一个小提琴

问候，亚历克斯

【讨论】：

还没有。它使用角度吗？我用 Angular js 开发了我的项目。
嗯，它不是用 Angular 制作的，但你可以在你的组件中使用它
我看过你的小提琴，但总的变化是笔画宽度。在制作动画时，我只需要一个小圆圈引导笔划。
首先，对于笔画宽度，使用progressBar.js 并获得'circle.value'，接下来是圆形，我认为你可以使用一个PNG 图像，它使用'circle.value's 值旋转，（我的意思是，用 png 叠加动画）
你能告诉我sn-p吗？我没有看到结果lol..hohoho

【解决方案2】：

创建一个组，其中包含一个与您的圆圈大小相同的透明对象，并且在一个边缘有一个小圆圈，然后rotate 该组围绕其中心。 SVG 的内部结构看起来像

这假设圆的直径是 100。

【讨论】：

你能告诉我sn-p吗？我没有看到结果lol..hohoho
我不确定我能不能，因为 sn-p 不直接处理 SVG。如果您右键单击圆圈并选择“检查元素”，您将在其中看到一个“基础”类的圆圈。在此旁边，您将添加一个带有透明圆圈和小圆圈的组。哈哈哈哈哈。如果你想要这个自定义 HOHO 的东西，你将不得不手动编辑 SVG
我使用这里的库pencil.my/assets/js/circularProgress.js 来制作圆圈。如果我修改它，那对我来说会更难。
确实如此。做一些自定义的事情总是比做库默认做的事情更难。如果对你来说，让它不难比它做你上面描述的事情更重要，那么你将需要放弃这样做，只做图书馆的工作。
我相信会有问题的。

【解决方案3】：

这是一个函数，它将一个从 0 到 100 的数字转换为为圆形对象（使用画布工具绘制）提供圆形路径所需的 x,y 坐标：

function drawCircle(percentage, ctx) {
  var angle = percentage / 100.0;

  var xPos = 140 * Math.cos((angle * (2 * Math.PI)) - (Math.PI * .5));
  var yPos = -140 * Math.sin((angle * (2 * Math.PI)) - (Math.PI * .5) );

  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.beginPath();
  ctx.arc (xPos + 150, 150 - yPos, 10, 0, 2 * Math.PI);
  ctx.stroke();
}

看看这个 plunker 看看它的实际效果： https://plnkr.co/edit/ePMK7DVLB3OH15oUJzr1?p=preview

这会获取数字（从 0 到 100），对其进行缩放，将其转换为弧度，然后将弧度转换为笛卡尔坐标。

【讨论】：

好的..好漂亮的圈子...我需要适应我的代码..谢谢。