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>