|
@ -44,6 +44,20 @@ export class MonitorCanvas { |
|
|
public init(map: ElementRef): Promise<void> { |
|
|
public init(map: ElementRef): Promise<void> { |
|
|
map.nativeElement.firstChild.width = screen.width; |
|
|
map.nativeElement.firstChild.width = screen.width; |
|
|
map.nativeElement.firstChild.height = screen.height; |
|
|
map.nativeElement.firstChild.height = screen.height; |
|
|
|
|
|
|
|
|
|
|
|
// 新修改20241205 zb 增加鼠标模拟滚动事件
|
|
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
|
console.log(this._canvas); |
|
|
|
|
|
const down = new fabric.Point(1098, 318); |
|
|
|
|
|
const scaleDown = 0.9081818181818182; |
|
|
|
|
|
const up = new fabric.Point(1098, 318); |
|
|
|
|
|
const scaleUp=0.9990000000000001; |
|
|
|
|
|
this. canvas.zoomToPoint(down,scaleDown); |
|
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
|
this. canvas.zoomToPoint(up,scaleDown); |
|
|
|
|
|
},200); |
|
|
|
|
|
},100); |
|
|
|
|
|
|
|
|
return new Promise(resolve => { |
|
|
return new Promise(resolve => { |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
this._canvas = new fabric.Canvas('map', { selection: false }); |
|
|
this._canvas = new fabric.Canvas('map', { selection: false }); |
|
@ -56,7 +70,12 @@ export class MonitorCanvas { |
|
|
this._canvas.on('mouse:down', () => panning = true); |
|
|
this._canvas.on('mouse:down', () => panning = true); |
|
|
this._canvas.on('mouse:up', () => panning = false); |
|
|
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: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))))); |
|
|
|
|
|
|
|
|
//console.log(e.e.movementX);
|
|
|
|
|
|
//新修改
|
|
|
|
|
|
this. canvas.on('mouse:wheel',(e: any)=>{ |
|
|
|
|
|
this.wheelToggle(e); |
|
|
|
|
|
}); |
|
|
|
|
|
// 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:dblclick', (e: any) => e && e.target && e.target.data && this.fire(e.target.data)); |
|
|
this._canvas.on('mouse:over', (e) => e && this.focus(e)); |
|
|
this._canvas.on('mouse:over', (e) => e && this.focus(e)); |
|
|
|
|
|
|
|
@ -65,6 +84,13 @@ export class MonitorCanvas { |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//新修改
|
|
|
|
|
|
public wheelToggle(e) { |
|
|
|
|
|
console.log(new fabric.Point(e.e.pageX, e.e.pageY)); |
|
|
|
|
|
console.log(Math.max(.1, Math.min(10, this._canvas.getZoom() * (e.e.deltaY > 0 ? .9 : 1.1)))); |
|
|
|
|
|
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)))) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
public render() { |
|
|
public render() { |
|
|
this._canvas?.renderAll(); |
|
|
this._canvas?.renderAll(); |
|
|
} |
|
|
} |
|
|