paperjs之fitBounds适应区域前后屏幕坐标和输入坐标的转换

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]
        },

　　调用转换工具即可转换坐标。

 

 

 

 

。。。钻研不易，转载请注明出处