问题描述
在 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();
});