jTopo 场景移动，节点位置保持不变

Roottt_

已于 2022-11-21 16:43:16 修改

阅读量322

点赞数

文章标签：前端 vue.js typescript

于 2022-11-21 16:37:20 首次发布

本文链接：https://blog.csdn.net/weixin_43896125/article/details/127967562

版权

项目使用ts，自己替换js文件格式即可
注意node，scene参数名字

	//场景移动事件,使节点自身位置保持不变
        sceneEvent():void{
            let _this:any = this;
            let selfX: number ,selfY: number ;
            let mapStartX : number,mapStartY: number; // 地图上拖动事件记录起点
            let mouseDown = function (event: MouseEvent){
                if (event.button == 0){
                    // @ts-ignore
                    selfX = event.target.x; // 记录节点自身位置
                    // @ts-ignore
                    selfY = event.target.y;
                    mapStartX =  event.offsetX - _this.scene.translateX;
                    mapStartY =  event.offsetY - _this.scene.translateY;
                    //console.log("鼠标点击记录点坐标:*=****=>" , event.x,event.y);
                }
            };
            // @ts-ignore
            let mouseDrag = function(event:  MouseEvent){
                // @ts-ignore
                event.target.x = selfX;  // 使节点自身位置保持不变
                // @ts-ignore
                event.target.y = selfY;
                // 改变场景位置
                _this.scene.translateX += ((event.offsetX - _this.scene.translateX) - mapStartX);
                _this.scene.translateY += ((event.offsetY - _this.scene.translateY) - mapStartY);
            }
            // @ts-ignore
            let mouseUp = function(event: MouseEvent){
                if (event.button == 0){
                    // @ts-ignore
                    selfX= null; // 清空节点位置信息
                    // @ts-ignore
                    selfY = null
                }
            }
            _this.scene.addEventListener("mousedown", mouseDown);
            _this.scene.addEventListener("mouseup", mouseUp);
            _this.node.addEventListener("mousedrag", mouseDrag);
        },

引入位置

 mounted(): void {
        let _this:any = this;
        let canvasEle = document.getElementById("canvas_work");
        _this.stage = new JTopo.Stage(canvasEle);
        _this.scene = new JTopo.Scene(_this.stage);
        _this.stage.showToolbar = false;
        _this.stage.wheelZoom = 2;
        _this.scene.mode = 'normal';
        _this.stage.eagleEye.visible = false;


        _this.node = new JTopo.Node();
        _this.node.zIndex = -11;
        _this.node.x = 0;
        _this.node.y = 0;
        _this.node.showSelected = false;
        _this.node.dragable = true;
        _this.scene.add(_this.node);
        _this.sceneEvent();
    },