You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.6 KiB
59 lines
1.6 KiB
3 years ago
|
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)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|