paperjs之fitBounds适应区域前后屏幕坐标和输入坐标的转换
使用经纬度区域边界创建场景并使用fitBounds将其适应在画布中，代码：
const app_dom = this.$refs.paperRenderingCanvas;
this.canvas = document.createElement("canvas");
this.canvas.width = 1300;
this.canvas.height = 800;
let scope = new paper.PaperScope().setup(this.canvas);
this.view = scope.view;
this.view.backgroundColor = "white";
let viewSize = this.view.viewSize;
let centerPoint = this.view.center;
let project = scope.project;
this.limitInitBounds = this.view.bounds.clone();
app_dom?.appendChild(this.canvas);
将边界加入场景中并适配到画布，获取适配前后的中心点和左上点（this.locSign、this.viewSign）用于计算转换
const group = new paper.Group()
const points = getInflectionPointList
const path = new paper.Path()
path.strokeWidth = 3
path.strokeColor = "rgb(120,120,120)"
path.closed = true
for (const point of points) {
path.add(new paper.Point(point.longitude, point.latitude))
}
group1.addChild(path)
// 获取适配前的中心点和左上点
this.locSign = [group.bounds.centerX, group.bounds.centerY, group.bounds.left, group.bounds.top]
// 转换项目，使其边界适合指定的矩形，而不改变其纵横比。
group1.fitBounds(this.limitInitBounds);
group1.scale(1, -1)
// 获取适配后的中心点和左上点
this.viewSign = [group.bounds.centerX, group.bounds.centerY, group.bounds.left, group.bounds.top]
转换工具代码：
// 转换工具 屏幕坐标转经纬度坐标
viewToLoc(x, y) {
let lon = (this.locSign[2] - this.locSign[0]) * (x - this.viewSign[0]) / (this.viewSign[2] - this.viewSign[0]) + this.locSign[0]
let lat = (this.viewSign[1] - y) * (this.locSign[3] - this.locSign[1]) / (this.viewSign[3] - this.viewSign[1]) + this.locSign[1]
return [lon, lat]
},
// 转换工具 经纬度坐转标屏幕坐标
locToView(lon, lat) {
let x = (this.viewSign[2] - this.viewSign[0]) * (lon - this.locSign[0]) / (this.locSign[2] - this.locSign[0]) + this.viewSign[0]
let y = - (this.viewSign[3] - this.viewSign[1]) * (lat - this.locSign[1]) / (this.locSign[3] - this.locSign[1]) + this.viewSign[1]
return [x, y]
},
调用转换工具即可转换坐标。
。。。钻研不易，转载请注明出处
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。