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.
84 lines
2.7 KiB
84 lines
2.7 KiB
import { ElementRef } from '@angular/core';
|
|
import { fabric } from 'fabric';
|
|
|
|
export class MonitorCanvas {
|
|
|
|
|
|
private _canvas: fabric.Canvas;
|
|
private _index: { [key: number]: any } = {};
|
|
private _transform: any;
|
|
|
|
public colors: { [key: string]: string } = {
|
|
//颜色设置 https://blog.csdn.net/singit/article/details/49179643 king
|
|
seashell: '#FFF5EE',
|
|
burlywood: '#DEB887',
|
|
sienna: '#A0522D',
|
|
SaddleBrown: '#8B4513',
|
|
darkblue: '#0000aa',
|
|
blue: '#1e88e5',
|
|
gray: '#90a4ae',
|
|
green: '#0f0',//#4caf50
|
|
red: '#f00',// #d50000
|
|
yellow: '#ffb74d',
|
|
darkgreen: '#225B28',
|
|
violet: '#9900CC',
|
|
GradientInactiveCaption: '#40d1ff',//#B9D1EA
|
|
darkorange: '#FF8C00',
|
|
gold: '#FFD700',
|
|
mediumvioletred: '#C71585',
|
|
Yking: '#FFD700'
|
|
}
|
|
|
|
public get object() {
|
|
return this._index;
|
|
}
|
|
|
|
public get canvas() {
|
|
return this._canvas;
|
|
}
|
|
|
|
public get transform() {
|
|
return this._transform;
|
|
}
|
|
|
|
public init(map: ElementRef): Promise<void> {
|
|
map.nativeElement.firstChild.width = screen.width;
|
|
map.nativeElement.firstChild.height = screen.height;
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
this._canvas = new fabric.Canvas('map', { selection: false });
|
|
const scale = map.nativeElement.clientWidth / 1650;
|
|
this._canvas.zoomToPoint(new fabric.Point(0, 0), scale);
|
|
this._canvas.relativePan(new fabric.Point(0, (map.nativeElement.clientHeight - 500 * scale) / 2));
|
|
this._transform = this._canvas.viewportTransform;
|
|
|
|
let panning = false;
|
|
this._canvas.on('mouse:down', () => panning = true);
|
|
this._canvas.on('mouse:up', () => panning = false);
|
|
this._canvas.on('mouse:move', (e: any) => panning && e && e.e && this._canvas.relativePan(new fabric.Point(e.e.movementX, e.e.movementY)));
|
|
this._canvas.on('mouse:wheel', (e: any) => e && e.e && this._canvas.zoomToPoint(new fabric.Point(e.e.pageX, e.e.pageY), Math.max(.1, Math.min(10, this._canvas.getZoom() * (e.e.deltaY > 0 ? .9 : 1.1)))));
|
|
this._canvas.on('mouse:dblclick', (e: any) => e && e.target && e.target.data && this.fire(e.target.data));
|
|
this._canvas.on('mouse:over', (e) => e && this.focus(e));
|
|
|
|
resolve();
|
|
});
|
|
});
|
|
}
|
|
|
|
public render() {
|
|
this._canvas?.renderAll();
|
|
}
|
|
|
|
public load(handler: (canvas: fabric.Canvas, colors: { [key: string]: string }, index: { [key: number]: any }, data: { [key: number]: any }) => void, data: { [key: number]: any }) {
|
|
this._canvas.clear();
|
|
// debugger;
|
|
for (const key in this._index) {
|
|
delete this._index[key];
|
|
}
|
|
handler(this._canvas, this.colors, this._index, data);
|
|
}
|
|
|
|
public fire: (device: number) => void;
|
|
public focus: (e: any) => void;
|
|
|
|
}
|