让mxGraph组件的图形元素的Sizer动起来——显示、隐藏

2023-10-09 06:00:09

定制交互式画布：控制 mxGraph 中 Sizer 的显示与隐藏

简介

在 mxGraph，每个图形元素都配备了一个或多个 sizer，这些 sizer 是元素上的交互点。默认情况下，这些 sizer 是可见的，允许用户对其执行缩放、旋转和移动等操作。然而，我们可以通过修改源代码来定制 sizer 的显示与隐藏，以满足特定的应用程序需求。

理解 Sizer

Sizer 是 mxGraph 中的关键元素，它们为用户提供与图形元素交互的手段。它们通常显示为矩形或正方形的手柄，出现在元素的边界或中心点。当用户将鼠标悬停在 sizer 上时，会出现一个可视化提示，指示可以执行的操作。

自定义 Sizer 的显示

要定制 sizer 的显示，我们需要修改 mxGraph 源代码中的 mxGraph.js 和 mxShape.js 文件。

修改 mxGraph.js

在 mxGraph.js 中，查找 createShape 方法，它用于创建图形元素。在这个方法中，createSizers 方法负责创建 sizer。我们要做的就是添加代码来控制 sizer 的可见性：

mxGraph.prototype.createShape = function(state, stencil, x, y, w, h, style) {
  // ...

  // Create sizer handles
  var handles = this.createSizers(state);

  // Hide sizers
  for (var i = 0; i < handles.length; i++) {
    handles[i].setVisible(false);
  }

  // ...
};

修改 mxShape.js

在 mxShape.js 中，查找 drawShape 方法，它负责绘制图形元素。在这个方法中，drawSizers 方法负责绘制 sizer。再次，我们要添加代码来控制 sizer 的可见性：

mxShape.prototype.drawShape = function(c, state, style) {
  // ...

  // Draw sizers
  this.drawSizers(c, state, style);

  // ...
};

示例代码

以下示例代码演示了如何使用这些修改来隐藏 sizer：

// 自定义 sizer 的显示与隐藏
mxGraph.prototype.createShape = function(state, stencil, x, y, w, h, style) {
  // ...

  // Create sizer handles
  var handles = this.createSizers(state);

  // Hide sizers
  for (var i = 0; i < handles.length; i++) {
    handles[i].setVisible(false);
  }

  // ...
};

// 自定义 sizer 的绘制
mxShape.prototype.drawShape = function(c, state, style) {
  // ...

  // Draw sizers
  this.drawSizers(c, state, style);

  // ...
};