• canvas画圆类似于锯齿指针 angular5


    拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来;

    仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现;

    因为项目现在用的框架是angular5,所以获取元素时,要用到ElementRef;直接引用就好;

    先来看下页面:

    import {Component, OnInit, ElementRef, ViewChild, OnDestroy} from "@angular/core";
    export class LoginComponent implements OnInit,OnDestroy{

      @ViewChild('canvas') //此处不可添加任何标点符号(会报错) =》@ViewChild 把组件视图查询(myPredicate)的第一个结果绑定到该类的 myChildComponent 属性上。对指令无效。

      canvas: ElementRef; //获取dom元素
      
      arcTimeTicket

      ngOnInit(): void {

        this.drawArc();

      
    }
      ngOnDestroy(): void { //angular是单页面,这是表示每次销毁指令 
        if(this.arcTimeTicket){ //页面销毁时清空
         cancelAnimationFrame(this.arcTimeTicket);
        }

      }
      drawArc () {
        let canvas = this.canvas.
    nativeElement;//获取到具体元素
        let context = canvas.getContext('2d'); //获取canvas中的画图环境 上下文
        /**
          一般情况下 canvas在项目中肯定是要动态绘画的,也就是它的宽度和高度需要动态设置,用js的setAttribute就好

        **/
        let width = canvas.width;//获取宽度

        let height = canvas.height;//获取高度

        let clockDimensions = width / 2;//圆大小:初始值设置

        context.clearRect(0,0,width,height);//清理当前画布,以便后期绘制

        context.beginPath(); //开启新路径

        const piece = 180; //这是圆的锯齿具体条数 目测ui给的是180条

        let index = 0;
        
        const draw = () => {

          context.save(); //用来保存Canvas的状态

       context.beginPath();//开始绘画

      context.lineWidth = 2;//锯齿的粗细

      context.strokeStyle = "rgba(0,192,255,0.65)";//锯齿的颜色

      context.translate(width / 2, height / 2); //旋转角度

      context.rotate(Math.PI * 2 / piece * (index + 45)); //绘制环境旋转方法,以(0,0)为参考点进行旋转

      context.moveTo(0, clockDimensions - clockDimensions / 20);//起始点

      context.lineTo(0, clockDimensions - clockDimensions / 9);//结束点

      context.stroke();//描边

      context.restore();//用来恢复Canvas之前保存的状态

      index++;

      if (index < piece) { //如果小于的话 表示就是页面初始化 就加上这个动画 类似于loading

      this.arcTimeTicket = requestAnimationFrame(draw);//此函数如有不理解 可去百度查

      }

        };

        cancelAnimationFrame(this.arcTimeTicket); //清空 这一步很重要 window。resize时 可以清空 不会导致页面错乱

        draw();//执行绘画


      }

    }
    每天记录一点点,希望早日成为大牛,O(∩_∩)O哈哈~

  • 相关阅读:
    NSPredicate
    label 下划线加自动换行
    【搬运】快速增加文档注释
    NSSortDescriptor 数组排序
    【搬运】打开模拟器沙盒目录
    NSTimer 详解
    Android打开外部DB文件
    图片压缩与缓存
    StartService与BindService
    Android发送通知栏通知
  • 原文地址:https://www.cnblogs.com/fmixue/p/8510876.html
Copyright © 2020-2023  润新知