2019独角兽企业重金招聘Python工程师标准>>>

// shim layer with setTimeout fallback
// credit Erik Möller and http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
(function() {var lastTime = 0;var vendors = ['webkit', 'moz'];for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];window.cancelAnimationFrame =window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame){window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function() { callback(currTime + timeToCall); },timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame){window.cancelAnimationFrame = function(id) {clearTimeout(id);};}}());angular.module('angular-svg-round-progress', []);'use strict';angular.module('angular-svg-round-progress').constant('roundProgressConfig', {max:            50,semi:           false,radius:         100,color:          "#45ccce",bgcolor:        "#eaeaea",stroke:         15,iterations:     50,animation:      "easeOutCubic"
});'use strict';angular.module('angular-svg-round-progress').service('roundProgressService', [function(){var service = {};// credits to http://modernizr.com/ for the feature testservice.isSupported = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect);// utility functionvar polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;return {x: centerX + (radius * Math.cos(angleInRadians)),y: centerY + (radius * Math.sin(angleInRadians))};};// credit to http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circleservice.updateState = function(value, total, R, ring, size, isSemicircle) {if(!size) return ring;var value       = value >= total ? total - 0.00001 : value,type        = isSemicircle ? 180 : 359.9999,perc        = total === 0 ? 0 : (value / total) * type,x           = size/2,start       = polarToCartesian(x, x, R, perc), // in this case x and y are the sameend         = polarToCartesian(x, x, R, 0),// arcSweep = endAngle - startAngle <= 180 ? "0" : "1",arcSweep    = (perc <= 180 ? "0" : "1"),d = ["M", start.x, start.y,"A", R, R, 0, arcSweep, 0, end.x, end.y].join(" ");return ring.attr('d', d);};// Easing functions by Robert Penner// Source: http://www.robertpenner.com/easing/// License: http://www.robertpenner.com/easing_terms_of_use.htmlservice.animations = {// t: Current iteration// b: Start value// c: Change in value// d: Total iterationslinearEase: function(t, b, c, d) {return c * t / d + b;},easeInQuad: function (t, b, c, d) {return c*(t/=d)*t + b;},easeOutQuad: function (t, b, c, d) {return -c *(t/=d)*(t-2) + b;},easeInOutQuad: function (t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t + b;return -c/2 * ((--t)*(t-2) - 1) + b;},easeInCubic: function (t, b, c, d) {return c*(t/=d)*t*t + b;},easeOutCubic: function (t, b, c, d) {return c*((t=t/d-1)*t*t + 1) + b;},easeInOutCubic: function (t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t + b;return c/2*((t-=2)*t*t + 2) + b;},easeInQuart: function (t, b, c, d) {return c*(t/=d)*t*t*t + b;},easeOutQuart: function (t, b, c, d) {return -c * ((t=t/d-1)*t*t*t - 1) + b;},easeInOutQuart: function (t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t*t + b;return -c/2 * ((t-=2)*t*t*t - 2) + b;},easeInQuint: function (t, b, c, d) {return c*(t/=d)*t*t*t*t + b;},easeOutQuint: function (t, b, c, d) {return c*((t=t/d-1)*t*t*t*t + 1) + b;},easeInOutQuint: function (t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;return c/2*((t-=2)*t*t*t*t + 2) + b;},easeInSine: function (t, b, c, d) {return -c * Math.cos(t/d * (Math.PI/2)) + c + b;},easeOutSine: function (t, b, c, d) {return c * Math.sin(t/d * (Math.PI/2)) + b;},easeInOutSine: function (t, b, c, d) {return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;},easeInExpo: function (t, b, c, d) {return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;},easeOutExpo: function (t, b, c, d) {return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;},easeInOutExpo: function (t, b, c, d) {if (t==0) return b;if (t==d) return b+c;if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;},easeInCirc: function (t, b, c, d) {return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;},easeOutCirc: function (t, b, c, d) {return c * Math.sqrt(1 - (t=t/d-1)*t) + b;},easeInOutCirc: function (t, b, c, d) {if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;},easeInElastic: function (t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }else var s = p/(2*Math.PI) * Math.asin (c/a);return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;},easeOutElastic: function (t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }else var s = p/(2*Math.PI) * Math.asin (c/a);return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;},easeInOutElastic: function (t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);if (a < Math.abs(c)) { a=c; var s=p/4; }else var s = p/(2*Math.PI) * Math.asin (c/a);if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;},easeInBack: function (t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*(t/=d)*t*((s+1)*t - s) + b;},easeOutBack: function (t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;},easeInOutBack: function (t, b, c, d, s) {if (s == undefined) s = 1.70158;if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;},easeInBounce: function (t, b, c, d) {return c - service.animations.easeOutBounce (d-t, 0, c, d) + b;},easeOutBounce: function (t, b, c, d) {if ((t/=d) < (1/2.75)) {return c*(7.5625*t*t) + b;} else if (t < (2/2.75)) {return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;} else if (t < (2.5/2.75)) {return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;} else {return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;}},easeInOutBounce: function (t, b, c, d) {if (t < d/2) return service.animations.easeInBounce (t*2, 0, c, d) * .5 + b;return service.animations.easeOutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b;}};return service;
}]);'use strict';angular.module('angular-svg-round-progress').directive('roundProgress', ['roundProgressService', 'roundProgressConfig', function(service, roundProgressConfig){if(!service.isSupported){return {// placeholder element to keep the structurerestrict: 'EA',template:'<div class="round-progress"></div>',replace: true};};return {restrict:           "EA",scope:{current:        "=",max:            "=",semi:           "=",radius:         "@",color:          "@",bgcolor:        "@",stroke:         "@",iterations:     "@",animation:      "@"},link: function (scope, element, attrs) {var ring        = element.find('path'),background  = element.find('circle'),options     = angular.copy(roundProgressConfig),size,resetValue;var renderCircle = function(){var isSemicircle = options.semi,radius           = parseInt(options.radius),stroke           = parseInt(options.stroke);size = radius*2 + stroke*2;element.css({"width":        size + "px","height":       (isSemicircle ? size/2 : size) + "px","overflow":     "hidden" // on some browsers the background overflows, if in semicircle mode});ring.attr({"stroke":       options.color,"stroke-width": stroke,"transform":    isSemicircle ? ('translate('+ 0 +','+ size +') rotate(-90)') : ''});background.attr({"cx":           radius,"cy":           radius,"transform":    "translate("+ stroke +", "+ stroke +")","r":            radius,"stroke":       options.bgcolor,"stroke-width": stroke});};var renderState = function (newValue, oldValue){if(!angular.isDefined(newValue)){return false;};if(newValue < 0){resetValue = oldValue;return scope.current = 0;};if(newValue > options.max){resetValue = oldValue;return scope.current = options.max;};var max             = options.max,radius              = options.radius,isSemicircle        = options.semi,easingAnimation     = service.animations[options.animation],start               = oldValue === newValue ? 0 : (oldValue || 0), // fixes the initial animationval                 = newValue - start,currentIteration    = 0,totalIterations     = parseInt(options.iterations);if(angular.isNumber(resetValue)){// the reset value fixes problems with animation, caused when limiting the scope.currentstart       = resetValue;val         = newValue - resetValue;resetValue  = null;};(function animation(){service.updateState(easingAnimation(currentIteration, start, val, totalIterations),max,radius,ring,size,isSemicircle);if(currentIteration < totalIterations){requestAnimationFrame(animation);currentIteration++;};})();};scope.$watchCollection('[current, max, semi, radius, color, bgcolor, stroke, iterations]', function(newValue, oldValue, scope){// pretty much the same as angular.extend,// but this skips undefined values and internal angular keysangular.forEach(scope, function(value, key){// note the scope !== value is because `this` is part of the scopeif(key.indexOf('$') && scope !== value && angular.isDefined(value)){options[key] = value;};});renderCircle();renderState(newValue[0], oldValue[0]);});},replace:true,template:['<svg class="round-progress" xmlns="http://www.w3.org/2000/svg">','<circle fill="none"/>','<path fill="none"/>','</svg>'].join('\n')};}]);

转载于:https://my.oschina.net/u/1457074/blog/373345

采用Angular勾画SVG圆环形进度条相关推荐

  1. vue圆环进度条_vue圆环形进度条组件

    1.先来个圆形背景,为了后续方便定位,请给它安排上position属性. CircleProgress.vue export default { name: "circle-progress ...

  2. css锥形渐变结合SVG实现环形进度条

    css锥形渐变结合SVG实现环形进度条 准备: 锥形渐变 MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gra ...

  3. 自定义圆环形进度条实现

    最近项目里边要用进度条,进度条中间展示进度,底部展示label,因为这个组件用的地方多,所以我就直接封装了一个通用组件. 先看一下效果图: 功能有: 圆环的颜色和进度可以自定义: 中间文字可以自定义: ...

  4. 微信小程序 环形进度条_Web微信小程序圆环形进度条组件CSS实现

    首先理解小程序的自定义组件. 原理 看了网上的一些教程,实现圆环用的是两个半圆的旋转,通过overflow: hidden来控制的. 首先绘制底层容器,一个正方形,通过圆角变圆,用来作为未读进度的圆环 ...

  5. 前端 圆形进度图_图解CSS3制作圆环形进度条的实例教程

    首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: CSS Code复制内容到剪贴板 .circleprogress{ width:160px; height ...

  6. 用svg实现一个环形进度条

    svg实现环形进度条需要用到的知识: 1.会使用path的d属性画一个圆环 //用svg的path元素的A命令画圆<pathd="M cx cym 0 -r a r r 0 1 0 0 ...

  7. js svg语音波动动画_SVG实现环形进度条的原理

    之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制.具体效果如下 ...

  8. SVG绘制圆环进度条

    在我们的大屏可视化项目中,经常会用到各种各样的图表.与传统的表格展示.枯燥的文字阐述相比,图表展示则使用户看起来更加直观.数据的展示则更加一目了然.本文基于svg绘图技术结合前端技术栈vue,以工作中 ...

  9. Vue 圆圈形进度条

    圆圈形进度条在开发中经常遇到,这里把他封装成一个组件,实现方式为使用svg画图. 下面的代码中涉及到了svg的viewBox属性,按照张鑫旭大神的说法:SVG就像是我们的显示器屏幕,viewBox就是 ...

最新文章

  1. python语言解释器的全部代码都是开源的_Python IDE和解释器的区别是什么?
  2. 数据结构之排序算法:并归排序
  3. 阿里 Nacos 惊爆安全漏洞,火速升级!
  4. Redis闲谈:你一定需要的知识图谱
  5. Ubuntu 快捷截图
  6. 移动光猫路由改桥接降低延时初尝试
  7. iOS第三方开源库的吐槽和备忘 - 王培
  8. Receptive Field Block Net 论文阅读
  9. 计算机发展前景思维导图,计算机绘制思维导图有什么优势
  10. 计算机ncre教材,ncre教材
  11. 查看全文的css,如何通过纯CSS实现“点击展开全文”功能
  12. 9.1 DEP机制的保护原理
  13. HM编码器代码阅读(31)——帧间预测之AMVP/Merge模式(六)运动补偿
  14. 【华人学者风采】谭平 阿里人工智能实验室
  15. SVD分解图像压缩应用英语论文
  16. macos13 Ventura虚拟机安装无网络问题
  17. 12.synchronized的锁重入、锁消除、锁升级原理?无锁、偏向锁、轻量级锁、自旋、重量级锁
  18. Linux下的回收站trash
  19. 【数据产品案例】阿里生意参谋-竞争情报
  20. catia 草绘轮廓

热门文章

  1. org.xml.sax.SAXParseException: The string -- is not permitted within comments.
  2. Rabbitmq java.util.concurrent.TimeoutException小问题解决
  3. php截断上传,截断在文件包含和上传中的利用
  4. tablueau地图标记圆形_R语言在线地图神器:Leaflet for R包(三) 符号标记
  5. python summary writer_tensorflow中summary操作
  6. java实现键盘移动图片,快速移动视图与键盘
  7. python3 image_python3 ImageTk 安装方法
  8. 加密解密_作业-加密解密程序
  9. Java和pathion_Spring配置中的classpath:与classpath*:的区别
  10. java 多线程 notify_Java多线程8:wait()和notify()/notifyAll()