Angular 自定义组件-圆环进度条

最新推荐文章于 2024-07-15 17:04:44 发布
最新推荐文章于 2024-07-15 17:04:44 发布
阅读量954 收藏 3
点赞数
分类专栏： Angular 文章标签： html canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33538554/article/details/107669747
版权

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

1.使用 canvas 绘制圆环进度条，实时更新进度。

在 Angular 中创建子组件：ring-app，用于制作圆环进度条，这里我就不另行创建父组件了，直接用 Angular 的默认起始页：app.component.html 来加载子组件。

①子组件中包含：

  •   ring-app.component.css
  •   ring-app.component.html
  •   ring-app.component.ts
  •   ring-app.component.spec.ts

这里只用到了 ring-app.component.html 和 ring-app.component.ts ；因为使用 canvas 2d 来绘制，对应的 css 在 .ts 文件中就已经赋值了。

code:

ring-app.component.html

<div class="container">
    <canvas #canvas id='canvas' width="width" height="height" lineWidth="lineWidth" fontSize="fontSize" fontBold='fontBold'></canvas>
</div>

我将一些基本属性开放出来，以便父组件中可以很好的控制它的形状，当然也给了默认值，属性说明如下：

  • width：圆环的宽度
  • height：圆环的高度
  • lineWidth：圆环的粗细
  • fontSize：圆环中间字体的大小
  • fontBold：字体的粗细

ring-app.component.ts

import { Component, OnInit, ViewChild, ElementRef, Input} from '@angular/core';
@Component({
  selector: 'app-ring-app',
  templateUrl: './ring-app.component.html',
  styleUrls: ['./ring-app.component.css']
})
export class RingAppComponent implements OnInit {
  @ViewChild('canvas', { static: true }) canvasElement: ElementRef;

  constructor() {}

  @Input() width = 80; //圆环的默认宽度
  @Input() height = 80; //圆环的默认高度
  @Input() lineWidth = 10; //圆环的默认粗细
  @Input() fontSize = 14; //默认字体大小
  @Input() fontBold = 500; //默认字体粗细 (100-900)
  public canvas: any;
  public context: any;

  ngOnInit(): void {
    this.drawCanvasPercent(0); //初始化进度0
  }

  drawCanvasPercent(text:number): void {
    this.canvas = this.canvasElement.nativeElement;
    this.canvas.style.width = this.width + "px";
    this.canvas.style.height = this.height + "px";
    this.canvas.height = this.height * window.devicePixelRatio;
    this.canvas.width = this.width * window.devicePixelRatio;
    if(this.canvas.getContext){
      this.context = this.canvas.getContext('2d');
      this.context.strokeStyle = "#334960";  //圆环线条的颜色
      this.context.lineWidth = this.lineWidth * window.devicePixelRatio; //圆环的粗细
      this.context.lineCap = 'square'; //圆环结束断点的样式  butt为平直边缘 round为圆形线帽  square为正方形线帽
      this.context.beginPath();
      //Math.PI  圆周率 π, 圆的周长与直径的比例，约为 3.141592653589793
      this.context.arc(this.canvas.width/2, this.canvas.height/2, this.canvas.width/2 -10 * window.devicePixelRatio, (Math.PI / 180) * 0, (Math.PI / 180) * 360 - 0.2, false);
      this.context.stroke();//绘制路径
      this.context.closePath();
      this.drawArc(text);
    }
  }

  drawArc(text:number) {
    const startAngle = -90;
    const endAngle = (text / 100) * 360 - 90;
    this.context.beginPath();
    this.context.arc(this.canvas.width/2, this.canvas.height/2, this.canvas.width/2 -10 * window.devicePixelRatio, (Math.PI / 180) * startAngle, (Math.PI / 180) * endAngle, false);
    this.context.lineWidth = (this.lineWidth + 1) * window.devicePixelRatio;
    if(text < 30) {
      this.context.strokeStyle = 'red';
    }
    else if(text < 60) {
      this.context.strokeStyle = 'yellow';
    }
    else {
      this.context.strokeStyle = "#2FD487";
    }
    this.context.font = 'normal '+ this.fontBold +' '+ this.fontSize +'px sans-serif'; // 字体大小
    this.context.fillStyle = '#334960';  // 字体颜色
    this.context.textAlign = "center";  // 字体位置
    this.context.textBaseline = "middle"; // 字体对齐方式
    this.context.fillText(text + '%', this.canvas.width/2, this.canvas.height/2);//圆环内部展示进度值
    this.context.stroke();
    this.context.closePath();
    //window.devicePixelRatio 当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率 (处理毛边)
    this.context.scale(window.devicePixelRatio, window.devicePixelRatio);
  }
}

这个时候呢，我们的子组件已经完善了，接下来就是在初始页中应用它。

②父组件包含：

  •    app.component.css
  •    app.component.html
  •    app.component.ts
  •    app.component.spec.ts

这里我只用到了app.component.html 和 app.component.ts ，app.component.html 用来引用子组件，app.component.ts 用来动态更新进度；

code:

app.component.html

<app-ring-app #ring [width]="100" [height]="100" [lineWidth]="9" [fontSize]="14" [fontBold] ='600'></app-ring-app>

app.component.ts

import { Component,  Input, OnInit, Output, EventEmitter,ViewChild} from '@angular/core';
import { RingAppComponent } from './ring-app/ring-app.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit  {
  title = 'my-ring-app';
  @ViewChild('ring') ring:RingAppComponent;
  @Input() ringText = 10;

  ngOnInit(): void {
    setInterval(() => {
      if(this.ringText < 100)
      {
        this.ringText += 5;
        this.ring.drawCanvasPercent(this.ringText);
      }
      else 
      {
        this.ringText = 10;
      }
    }, 3000);
  }
}

  父组件中写了一个定时刷新(3秒刷一次，每次增加百分之五的进度)，主要目的就是看看效果；

  以上代码的实现就已经完成了，这里主要是个人记录一下，如果能够帮到小伙伴们，那更好，不喜勿喷！谢谢!

  ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

2. 使用 SVG 绘制圆环进度条，实时更新进度。

子组件与父组件同上，实现效果一样，下面是Code 输出；

Code:

ring-app.component.html

<div [ngStyle]="ring" ringWidth="width" ringHeight="height">
    <svg viewBox="0 0 100 100">
        <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0  a 40 40 0 1 0 -80 0"
            fill="none"
            stroke="#334960"
            [attr.stroke-width]="lineWidth">
        </path>
        <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0  a 40 40 0 1 0 -80 0"
            fill="none"
            [attr.stroke]='ringStroke'
            stroke-linecap="butt"
            class="my-svg-path"
            [ngStyle]="svgPath"
            [attr.stroke-width]="lineWidth+1">
        </path>
    </svg>
    <div class="ringTextDiv">
        <label class="ringLabel" [ngStyle]="ringLabelStyle">{{ringText}}</label>
    </div>
</div>

 ring-app.component.css

.ringTextDiv {
    float:left;
}

.ringLabel {
    text-align:center;
    position:absolute;
}

.my-svg-path {
    stroke-dasharray: 252.2px;
    transform: rotateZ(90deg);
    transform-origin: 50% 50%;
}

  ring-app.component.ts

import { Component, OnInit, ViewChild, ElementRef, Input} from '@angular/core';
@Component({
  selector: 'app-ring-app',
  templateUrl: './ring-app.component.html',
  styleUrls: ['./ring-app.component.css']
})
export class RingAppComponent implements OnInit {
  @ViewChild('canvas', { static: true }) canvasElement: ElementRef;

  constructor() {}

  @Input() width = 80;
  @Input() height = 80;
  @Input() lineWidth = 10;
  @Input() fontSize = 14;
  @Input() fontBold = 500;
 
  @Input() ring:any;
  @Input() svgPath:any;
  @Input() ringStroke :string;
  @Input() ringText = "0%";
  @Input() ringLabelStyle:any;

  ngOnInit(): void {
    this.ringSvgStyle();
    this.loadSvgPercent(0);
  }

ringSvgStyle()
{
  this.ring = {"width": this.width + 'px',"height": this.height + 'px'}
  this.ringLabelStyle = {"font-size": this.fontSize + 'px',"font-weight": this.fontBold,"width": this.width + 'px',"line-height": this.height + 'px'}
  this.ringStroke = "#2FD487";
}

loadSvgPercent(text:number) {
  this.ringText = (text) + '%';
   var dashoffset = -252.2 + (text / 100) * 252.2;
   if(dashoffset <= 0){
    if(text < 30) {
      this.ringStroke = 'red';
    }
    else if(text < 60) {
      this.ringStroke = 'yellow';
    }
    else {
      this.ringStroke = "#2FD487";
    }
    this.svgPath = {"stroke-dashoffset": dashoffset + 'px'}
   }
}
}

app.component.html

<app-ring-app #ring [width]="100" [height]="100" [lineWidth]="10" [fontSize]="14" [fontBold] ='600'></app-ring-app>

app.component.ts

import { Component,  Input, OnInit, Output, EventEmitter,ViewChild} from '@angular/core';
import { RingAppComponent } from './ring-app/ring-app.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit  {
  title = 'my-ring-app';
  @ViewChild('ring') ring:RingAppComponent;
  @Input() ringText = 10;

  ngOnInit(): void {
    setInterval(() => {
      if(this.ringText < 100)
      {
        this.ringText += 5;
        this.ring.loadSvgPercent(this.ringText);
      }
      else 
      {
        this.ringText = 10;
      }
    }, 300);
  }
}

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

段旭文
关注
专栏目录
Angular自定义组件实现ngModel双向绑定
sugar_wxx的博客
12-15 1640
自定义组件实现ngModel
Angular实现的进度条功能示例
08-28
主要介绍了Angular实现的进度条功能,结合实例形式较为详细的分析了angular进度条功能的相关界面布局、功能等操作技巧,需要的朋友可以参考下
基于Angular框架封装的画环形进度条组件
bainvebo9347的博客
08-23 465
1.首先在我们的plugin目录下将本文档附件中的js文件引入，这个组件是以Angular工厂模式创建canvas对象，以Angular指令控制dom 2.然后在html文件中在需要画图的地方调用组件，以下为html的demo <div class="test" ng-controller="TestCtrl"> 　　<circle-progress c...
Angular项目中引入进度条组件
最新发布
On the way
07-15 380
如果你的项目尚未集成 Angular Material，需要先安装和配置 Angular Material 和 Angular CDK。1.在Angular中引入和使用 Angular Material 的 mat-progress-bar 组件非常简单。MatProgressBarModule 是 Angular Material 中用于进度条的模块，必须在你的应用模块中引入才能。在你的组件模板中，使用 mat-progress-bar 组件来显示进度条。
采用Angular勾画SVG圆环形进度条
weixin_34245169的博客
01-29 264
2019独角兽企业重金招聘Python工程师标准>>> ...
推荐一款出色前端组件：Angular Progressbar
gitblog_00084的博客
05-15 373
推荐一款出色前端组件：Angular Progressbar ngx-progressbarAngular progress bar ☄项目地址:https://gitcode.com/gh_mirrors/ng/ngx-progressbar 在构建现代Web应用的过程中，我们常常需要一个优雅的方式来告诉用户系统正在忙碌。这就引出了我们的主角——Angular Progressbar，一个轻量...
angular-tree-component：一个简单但功能强大的Angular树组件（> = 2）
01-31
角树成分 新闻 我们很高兴地宣布，从今天开始， 正在接管此存储库。 我们怀着坚定的信念继续这一旅程，社区不应错过这个组成部分，并且我们希望您一如既往地提供持续而重要的... @import '~@circlon/angular-tree-comp
angular-svg-icon：内联SVG的角度组件，允许使用CSS轻松设置样式
02-01
angular-svg-icon是Angular 11服务和组件，它提供了一种内联SVG文件的方法，从而可以通过CSS和代码轻松地对其进行样式设置。 该服务提供了一个注册图标，可加载和缓存由其URL索引的SVG。 该组件负责显示SVG。 从...
Angular自定义组件实现数据双向数据绑定的实例
08-28
Angular自定义组件实现数据双向数据绑定的实例 Angular 是一个流行的前端框架，它提供了强大的功能来构建复杂的 Web 应用程序。在 Angular 中，组件是基本构建块，用于构建用户界面。为了提高组件的可重用性和灵活...
angular-circular-progress:创建圆形进度条的AngularJS模块
05-10
您还可以通过运行bower install angular-circular-progress来使用 用法 将angular-circular-progress添加到您应用的模块依赖项中： angular . module ( 'myModule' , [ 'angular-circular-progress' ] ) 例子： &...
AngularJS实现进度条功能示例
12-09
本文实例讲述了AngularJS实现进度条功能的方法。分享给大家供大家参考，具体如下： 一、功能描述： ① 通过select标签，可以为进度条选择不同的样式（颜色） ② 进度条的进度通过文本框里面的值改变（也可以快捷的选择几个特定的值） ③ 通过checkbox按钮，控制进度条上的文字是否显示 二、代码实现： <!DOCTYPE html> <html lang="en" ng-app='app'> <head> <meta charset="UTF-8"> <title>进度条</title> [removed]</scrip
Angular-ngx-progressbar.zip
09-18
Angular-ngx-progressbar.zip,角进度barangular progressbar,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
自定义进度条&自定义弧形进度条（附带动画效果）
03-13
用canvas自定义弧形进度条以及可滑动的带状态值条形进度条，并实现进度动画。
angular的两个进度条组件
weixin_34015336的博客
04-20 794
2019独角兽企业重金招聘Python工程师标准>>> ...
angularjs的进度条
tao_wei162的博客
06-30 1142
项目里需要一个进度条，所以就在网上查找资料学习，看到了网友“雪狼”的代码分享，写的很高明，很精练，很厉害，原文链接：http://www.ngnice.com/showcase/#/show/progress，结合自己的项目需要，自己改编了个简单的进度条，可以加在项目里面，进度条的开始和结束由自己决定。 var myApp = angular.module('myApp', []); ...
推荐开源项目：ngprogress-lite - Angular.js 简约进度条插件
gitblog_00046的博客
05-23 380
推荐开源项目：ngprogress-lite - Angular.js 简约进度条插件 ngprogress-liteAngular provider for slim progress bars项目地址:https://gitcode.com/gh_mirrors/ng/ngprogress-lite 在网页应用中，一个平滑美观的加载进度条能够提升用户体验，带给用户更佳的交互感受。今天我们要向...
[Angular实战网易云]——10、滑块进度条
虽菜但瘾
12-03 805
场景 首页主体样式大致实现，底部样式还有所欠缺，所以底部应加上个别信息与播放的进度条，这个进度条类似Zorro的滑块，点击与滑动，其中包括事件的绑定与组件的嵌套。其中进度条不仅仅实现在歌曲进度上，在音量控制上也可以复用，为了方便后期在底部添加各种功能而避免代码臃肿，将进度条分离开是最好的选择。 在app.component.html底部中添加新创建的wy-player模块路由 < app-wy-player>< /app-wy-player> wy-player.componen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值