From 2481af5aa78c1698888bb89604fb1d2498d07184 Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Wed, 16 Mar 2022 16:32:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96canvas=EF=BC=8C?= =?UTF-8?q?=E7=AD=89=E6=AF=94=E7=BC=A9=E6=94=BE=E8=83=8C=E6=99=AF=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plotting-image.component.html | 3 + .../plotting-image.component.scss | 8 +++ .../plotting-image.component.ts | 58 +++++++++++++++++++ .../system-management-routing.module.ts | 2 + .../system-management.module.ts | 3 +- 5 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 src/app/system-management/plotting-image/plotting-image.component.html create mode 100644 src/app/system-management/plotting-image/plotting-image.component.scss create mode 100644 src/app/system-management/plotting-image/plotting-image.component.ts diff --git a/src/app/system-management/plotting-image/plotting-image.component.html b/src/app/system-management/plotting-image/plotting-image.component.html new file mode 100644 index 0000000..f395c62 --- /dev/null +++ b/src/app/system-management/plotting-image/plotting-image.component.html @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/src/app/system-management/plotting-image/plotting-image.component.scss b/src/app/system-management/plotting-image/plotting-image.component.scss new file mode 100644 index 0000000..83029d3 --- /dev/null +++ b/src/app/system-management/plotting-image/plotting-image.component.scss @@ -0,0 +1,8 @@ +.content{ + width: 100%; + height: 100%; + overflow: hidden; + position: relative; +} + +.center{ width: 100%; height: 100%; } \ No newline at end of file diff --git a/src/app/system-management/plotting-image/plotting-image.component.ts b/src/app/system-management/plotting-image/plotting-image.component.ts new file mode 100644 index 0000000..3a264f5 --- /dev/null +++ b/src/app/system-management/plotting-image/plotting-image.component.ts @@ -0,0 +1,58 @@ +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) + } + } + +} diff --git a/src/app/system-management/system-management-routing.module.ts b/src/app/system-management/system-management-routing.module.ts index c105346..659cf18 100644 --- a/src/app/system-management/system-management-routing.module.ts +++ b/src/app/system-management/system-management-routing.module.ts @@ -3,12 +3,14 @@ import { NgModule } from '@angular/core'; import { OrganizationComponent } from './organization/organization.component'; import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-the-host.component'; import { HostConfigComponent } from './host-config/host-config.component'; +import { PlottingImageComponent } from './plotting-image/plotting-image.component'; const routes: Routes = [ { path: 'organization', component: OrganizationComponent }, { path: 'host', component: AnalysisOfTheHostComponent }, { path: 'host/camera', component: HostConfigComponent }, + { path: 'plottingImage', component: PlottingImageComponent }, ]; @NgModule({ diff --git a/src/app/system-management/system-management.module.ts b/src/app/system-management/system-management.module.ts index 5ddb968..d40e595 100644 --- a/src/app/system-management/system-management.module.ts +++ b/src/app/system-management/system-management.module.ts @@ -28,8 +28,9 @@ import { AddcameraComponent } from './host-config/addcamera/addcamera.component' import { EditcameraComponent } from './host-config/editcamera/editcamera.component'; import { HostConfigComponent } from './host-config/host-config.component'; import { NzPageHeaderModule } from 'ng-zorro-antd/page-header'; +import { PlottingImageComponent } from './plotting-image/plotting-image.component'; @NgModule({ - declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent], + declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, PlottingImageComponent], imports: [ CommonModule, SystemRoutingModule,