如何获取 mxGraph 地图的坐标？

如何解决如何获取 mxGraph 地图的坐标？

在 mxgraph 引擎中，我找到了鼠标事件，但它没有反映实际的地图坐标。 这是一个示例代码，其中 evt 不适合我。 我们需要一个不同的解决方案。我们需要获取地图坐标。我们可以通过获取负坐标（可能）来检查这一点。

一般来说，任务看起来像这样：用户选择一个对象类别，他会看到一个模式窗口，其中包含可用的 SVG 图标以供放置。 SVG点击后，图标放置在用户点击的地方。我知道 mxGraph 中存在标准拖放的可能性，但由于项目的具体情况，它不适合我们。

    import {ref} from "vue";
    
    let dialogVisible = ref(false)
    let dialogConfirmed = ref(false)
    let selectedItem = ref(false)
    let dialogPromise = ref({
        resolve: () => {}
        reject: () => {}
    });
    
    export function useDialog(){
        return {
            dialogConfirmed,dialogVisible,selectedItem,dialogPromise
        }
    }

下面的代码显示了我们在 mxGraph 中找到的坐标，但它们不允许我们在点击时放置对象。

    this.graph.addListener(mxevent.CLICK,function(sender,evt)){
        console.log('evtOffsetX: ',evt.properties.event.offsetX)
        console.log('evtOffsetY: ',evt.properties.event.offsetY)
    }
    
    
    this.graph.getSelectionModel().addListener(mxevent.CHANGE,function(vertex)){
        console.log('vertexCenterX: ',vertex.cells[0].geometry.getCenterX());
        console.log('vertexCenterY: ',vertex.cells[0].geometry.getCenterY());
        console.log('vertexHeight: ',vertex.cells[0].geometry.height);
        console.log('vertexWidth: ',vertex.cells[0].geometry.width);
        console.log('vertexX: ',vertex.cells[0].geometry.x);
        console.log('vertexY: ',vertex.cells[0].geometry.y);
    }

解决方法

我在 mxgraph 4.2.2 上试过这个，它奏效了：

this.graph.addListener(mxEvent.CLICK,function(sender,evt) {
  console.log("GRAPH CLICK EVENT",sender,evt);
  var parent = sender.getDefaultParent();
  sender.getModel().beginUpdate();
  sender.insertVertex(parent,null,'TEST',evt.getProperty("event").offsetX,evt.getProperty("event").offsetY,80,30);
  sender.getModel().endUpdate();
  evt.consume();
});