angular 使用html5 canvas绘制圆组建

1、定义数据接口

export interface  KtCircleCanvas{
    x?: number;
    y?: number;
    radius?: number;
    title?: string;
    content?: string;
    fillColor?: string;
    f

2、组件

import {
    AfterViewInit,
    Component,
    ElementRef,
    Input,
    OnChanges,
    OnInit,
    SimpleChanges,
    ViewChild
} from '@angular/core';
import { KtCircleCanvas } from "./kt-circle-canvas";
import { Subscription } from "rxjs/Subscription";
import { Observable } from "rxjs/Observable";

@Component({
    selector: 'kt-circle-canvas',
    templateUrl: './circle-canvas.component.html',
    styleUrls: ['./circle-canvas.component.scss']
})
export class KtCircleCanvasComponent implements OnInit, AfterViewInit,OnChanges {

    @ViewChild('canvas_rank1') canvas_rank1: ElementRef;
    @ViewChild('canvas_rank2') canvas_rank2: ElementRef;
    @ViewChild('canvas_rank3') canvas_rank3: ElementRef;

    @Input() circleCanvasObjs: KtCircleCanvas[];
    private windowResizeSubscription: Subscription;

    private canvasWidth: number;
    private canvasHeight: number;

    constructor(private _elementRef: ElementRef) {
    }

    ngOnInit() {
    }

    ngOnChanges(changes: SimpleChanges) {
        if(changes['circleCanvasObjs']){
            if(this.circleCanvasObjs && this.circleCanvasObjs.length) {
                if(this.canvasHeight) {
                    let node = $(this._elementRef.nativeElement).find('#canvas');
                    let width = node.width();
                    let height = node.height();
                    let baseWidth = 391;
                    let baseHeight = 176;
                    let heightRatio: number = height / baseHeight ;
                    let widthRatio: number = width / baseWidth;
                    this.draw_rank(width,height,heightRatio,widthRatio);
                }
            }
        }

    }

    ngAfterViewInit() {
        let node = $(this._elementRef.nativeElement).find('#canvas');
        let baseWidth = 391;
        let baseHeight = 176;
        this.canvasWidth = node.width();
        this.canvasHeight = node.height();
        let heightRatio = this.canvasHeight / baseHeight;
        let widthRatio = this.canvasWidth / baseWidth;
        // console.log('width',this.canvasWidth);
        // console.log('height',this.canvasHeight);
        this.windowResizeSubscription = Observable.fromEvent($(window), "resize")
            .debounceTime(250)
            .subscribe(() => {
            let width = node.width();
            let height = node.height();

            let heightRatio: number = height / baseHeight;
            let widthRatio: number = width / baseWidth;
            this.draw_rank(width,height,heightRatio,widthRatio);
            });
            this.draw_rank(this.canvasWidth,this.canvasHeight,heightRatio,widthRatio);
    }
    //
    private draw_rank(width?:number,height?: number,heightRatio?: number,widthRatio?: number){
        if(this.circleCanvasObjs && this.circleCanvasObjs.length) {
            for(let i = 0; i < this.circleCanvasObjs.length; i++) {
                let node = this.circleCanvasObjs[i];
                if(i == 0) {
                    this._draw_rank(this.canvas_rank1,node.title,node.content,node.x,node.y,node.radius,node.fillColor,node.fontSize,width,height,heightRatio,widthRatio);
                }

                if(i == 1) {
                    this._draw_rank(this.canvas_rank2,node.title,node.content,node.x,node.y,node.radius,node.fillColor,node.fontSize,width,height,heightRatio,widthRatio);
                }

                if(i == 2) {
                    this._draw_rank(this.canvas_rank3,node.title,node.content,node.x,node.y,node.radius,node.fillColor,node.fontSize,width,height,heightRatio,widthRatio);
                }

            }
        }
    }
    //绘制排名第一的圆
    private _draw_rank(canvas: any,title: string,content: string,x: number,y: number,radius: number,fillColor: string,fontSize: number,width?:number,height?: number,heightRatio?,widthRatio?) {
        //获取上下文
        const canvasEl: HTMLCanvasElement = canvas.nativeElement;

        if(height && width) {
           canvasEl.width = width;
           canvasEl.height = height;
           x = x *  widthRatio;
           y = y * heightRatio;
           if(widthRatio < heightRatio) {
               radius = radius * widthRatio;
           }else {
               radius = radius * heightRatio;
           }
        }

        let ctx: CanvasRenderingContext2D = canvasEl.getContext('2d');
        ctx.beginPath();

        let grd = ctx.createLinearGradient(x, y - radius, x, y + radius);
        grd.addColorStop(0, fillColor);
        grd.addColorStop(1, "white");

// 填充渐变
        ctx.fillStyle = grd;

        let circle = {
            x: x, //圆心的X轴坐标值
            y: y, //圆心的x轴坐标
            r: radius //半径
        };

        ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);
        ctx.fill();

        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = `200 ${fontSize}px Arial`;
        ctx.fillStyle = "#FFFFFF"; // text color

        ctx.fillText(title, x,y - 10);
        let subFontSize = fontSize - 2;
        ctx.font = `200 ${subFontSize}px Arial`;
        ctx.fillText(content, x, y + 5)


    }


}

3、html

<div style="height: 100%; width: 100%;position: relative;" id="canvas">
    <canvas #canvas_rank1 class="canvas"></canvas>
    <canvas #canvas_rank2 class="canvas"></canvas>
    <canvas #canvas_rank3 class="canvas"></canvas>
</div>