单元格如何监听 mxGraph 中的移动或调整大小事件？答案

【问题标题】：How can the cell listen to the moving or resizing event in mxGraph?单元格如何监听 mxGraph 中的移动或调整大小事件？
【发布时间】：2021-10-14 23:51:04
【问题描述】：

我正在 mxGraph 中移动/调整单元格大小。我想我应该使用一些 mxEvent，例如 MOVE_CELLS, CELLS_MOVED, RESIZE_CELLS, CELLS_RESIZED, CHANGE, RESIZE,... 但它不适用于我的代码。单元不会监听这些事件。

我正在使用此代码，它适用于LABEL_CHANGED mxEvent（当单元格值发生任何变化时会触发此事件）。单元格监听LABEL_CHANGED 事件，其值将显示到控制台。

graph.addListener(mxEvent.LABEL_CHANGED, function (sender, evt) {
    var cell = evt.getProperty("cell");
    console.log(cell.value);
});

这是helloworld.html代码

<html>
<head>
    <title>Hello, World! example for mxGraph</title>

    <!-- Sets the basepath for the library if not in same directory -->
    <script type="text/javascript">
        mxBasePath = '../src';
    </script>

    <!-- Loads and initializes the library -->
    <script type="text/javascript" src="../src/js/mxClient.js"></script>

    <!-- Example code -->
    <script type="text/javascript">
        function main(container)
        {
            // Checks if the browser is supported
            if (!mxClient.isBrowserSupported())
            {
                // Displays an error message if the browser is not supported.
                mxUtils.error('Browser is not supported!', 200, false);
            }
            else
            {
                // Disables the built-in context menu
                mxEvent.disableContextMenu(container);
                
                // Creates the graph inside the given container
                var graph = new mxGraph(container);

                // Enables rubberband selection
                new mxRubberband(graph);

                var parent = graph.getDefaultParent();

                //My codes go here
                graph.addListener(mxEvent.LABEL_CHANGED, function (sender, evt) {
                    var cell = evt.getProperty("cell");
                    console.log(cell.value);
                });

                graph.getModel().beginUpdate();
                try
                {
                    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                    var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                    var e1 = graph.insertEdge(parent, null, '', v1, v2);
                }
                finally
                {
                    graph.getModel().endUpdate();
                }
            }
        };
    </script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
    <div id="graphContainer"
        style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
    </div>
</body>
</html>

我的问题是，当我移动或调整单元格大小时，如何将单元格值显示到控制台？（请注意此处查看 mxEvent API：https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxEvent-js.html#mxEvent）

【问题讨论】：

你能贴出不起作用的代码吗？也许是stackoverflow sn-p？
有一个 mxEvent LABEL_CHANGED 监听单元格值的任何变化，LABEL_CHANGED 与我的代码一起使用。但是其他的，例如CELLS_MOVED, CELLS_RESIZED，它们不起作用。顺便说一句，为了更容易理解，我更改了帖子内容。

标签： javascript mxgraph

【解决方案1】：

我解决了我的问题。 CELLS_MOVED, CELLS RESIZED 使用 getProperties 函数，而不是 getProperty 一个。

graph.addListener(mxEvent.CELLS_MOVED, function (sender, evt) {
      var cell = evt.getProperties("cell");
      console.log(cell.cells[0].geometry.x);//Show the new x_geometry
});

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。