import Constant from "./Constant"; import { dataService } from "./Service/DataService"; const defaultZoom = 100; const defaultRes = 0.1; const minAdsorbPix = 15; export default class Coordinate { constructor() { this.center = null; // 世界坐标,中心点。默认是[0,0] this.defaultZoom = defaultZoom; this.zoom = defaultZoom; // 当前缩放比例,不会改变世界坐标系的坐标,只是改变渲染时转换的屏幕坐标 this.res = defaultRes; //比例尺。实际尺寸与屏幕像素的比例,用于测量。与之前的绘制不同,目前存储的数据与像素的比例是1:1,只是最后测量值再除以这个比例 this.ratio = window.devicePixelRatio || 1; //不同硬件设备,像素率不同 this.width == null; this.height == null; } // 初始化 init(canvas) { this.updateForCanvas(canvas); } setRes(res) { if (res) { this.res = res; } else { this.res = defaultRes; } } getRes() { return this.res; } // 世界坐标转换成屏幕坐标 getScreenXY(point) { if (this.width == null || this.height == null) { return null; } let pt = { x: point.x, y: point.y, }; let x = this.width / 2 + ((pt.x - this.center.x) * this.zoom) / defaultZoom; let y = this.height / 2 - ((pt.y - this.center.y) * this.zoom) / defaultZoom; // x *= this.ratio; // y *= this.ratio; x = (0.5 + x) << 0; y = (0.5 + y) << 0; return { x: Math.floor(x), y: Math.floor(y), }; } // 屏幕坐标转换成世界坐标 getXYFromScreen(screenPoint) { const point = {}; point.x = ((screenPoint.x * this.ratio - this.width / 2) * defaultZoom) / this.zoom + this.center.x; point.y = ((this.height / 2 - screenPoint.y * this.ratio) * defaultZoom) / this.zoom + this.center.y; return point; } getXYFromScreenNotRatio(screenPoint) { const point = {}; point.x = ((screenPoint.x - this.width / 2) * defaultZoom) / this.zoom + this.center.x; point.y = ((this.height / 2 - screenPoint.y) * defaultZoom) / this.zoom + this.center.y; return point; } getPointForRevRotate(point, angle) {} getVectorForRotate(point, angle) {} updateCenterForRotate(angle) {} setCenter(canvas) { if (canvas) { this.center = { x: 0, y: 0, }; } } updateForCanvas(canvas) { if (canvas) { console.log(canvas.offsetWidth, canvas.offsetHeight); canvas.width = canvas.offsetWidth * this.ratio; canvas.height = canvas.offsetHeight * this.ratio; this.width = canvas.width; this.height = canvas.height; } this.zoom = defaultZoom; this.setCenter(canvas); Constant.minAdsorbPix = minAdsorbPix * this.ratio; } updateZoom(screenPosition, zoom) { let position = this.getXYFromScreen(screenPosition); this.zoom = zoom; this.center.x = position.x - ((screenPosition.x * this.ratio - this.width / 2) * defaultZoom) / this.zoom; this.center.y = position.y - ((this.height / 2 - screenPosition.y * this.ratio) * defaultZoom) / this.zoom; } // moveTo(zoom, screenPosition) { // const position = this.getXYFromScreen(screenPosition); // this.zoom = zoom; // const dx = (screenPosition.x * defaultZoom) / this.zoom - this.width / 2; // const dy = this.height / 2 - (screenPosition.y * defaultZoom) / this.zoom; // this.center.x = position.x - dx; // this.center.y = position.y - dy; // } getPixelRatio(context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; } reSet(canvas) { this.zoom = defaultZoom; this.center = { x: 0, y: 0, }; dataService.initGrid(); } updateForRotate(angle) {} clear() { this.center = null; this.zoom = defaultZoom; this.res = defaultRes; this.ratio = defaultRes; } } const coordinate = new Coordinate(); window.coordinate = coordinate; export { coordinate };