import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-plotting-image',
  templateUrl: './plotting-image.component.html',
  styleUrls: ['./plotting-image.component.scss']
})
export class PlottingImageComponent implements OnInit {

  constructor() { }

  canvasWidth: number = 0;
  canvasHeight: number = 0;

  ngOnInit(): void {
    window.onload = () => {
      this.initBackgroundImg()
    }
  }

  //初始化背景图
  initBackgroundImg() {
    let canvas = document.getElementById('canvas') as any;
    canvas.oncontextmenu = () =>{ return false; };
    let ctx
		// 检测canvas支持性
		if (canvas.getContext) {
			ctx = canvas.getContext('2d');	// 返回一个对象，该对象提供了用在画布上绘图的方法和属性
		} else {
			document.write("你的浏览器不支持canvas,请升级你的浏览器!");
			return;
		}

		// 读取可视区域 宽高
    let center = (document.getElementById('center') as any).getBoundingClientRect();

    // 图片加载完后，将其显示在canvas中
    var img = new Image();
    img.src = "../../../assets/images/bgImg.png";
    img.onload = () => {
      // 等比例缩放图片
      var scale = 1;
      if (img.width > center.width || img.height > center.height) {
        if (img.width > img.height) {
          scale = center.width / img.width;
        }else {
          scale = center.height / img.height;
        }
      }
      this.canvasWidth = img.width * scale;
      this.canvasHeight = img.height * scale; // 计算等比缩小后图片
      window.setTimeout(()=>{ // 加载图片
        ctx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
      }, 0)
    }
  }

}