揭秘mxGraph隐藏Sizer奥秘:自定义图元缩放点显示

前端

2023-05-13 00:29:23

自定义 mxGraph 中的 Sizer

在 mxGraph 中，Sizer 是图元上可缩放的拖拽点，用于调整图元的大小和形状。本文将深入探讨如何自定义 Sizer 的显示和隐藏，包括以下主题：

一、Sizer 概述

Sizer 是 mxGraph 中特殊元素，标记图元上的可缩放点。它们通常显示在图元的四周或任意位置，通过拖拽调整图元的大小和形状。

二、自定义 Sizer 显示隐藏

要自定义 Sizer 的显示或隐藏，需要修改 mxGraph 样式表：

查找图元样式： 找到您要自定义的图元样式，例如 ".vertex"。
添加 Sizer 样式： 在样式表中添加 ".vertexSizer" 代码段，定义 Sizer 的形状、颜色和粗细。
显示或隐藏 Sizer： 通过将 "display: none;" 添加到 ".vertexSizer" 中来隐藏 Sizer，或通过添加 Sizer 值来显示它，例如 ".vertexSizer { display: block; }"。

三、实例分析

var graph = new mxGraph();
var model = graph.getModel();
var cell = model.getCell("1");

// 自定义 Sizer 样式
var style = graph.getCellStyle(cell);
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE;
style[mxConstants.STYLE_FILLCOLOR] = "#ffffff";
style[mxConstants.STYLE_STROKECOLOR] = "#000000";

// 自定义 Sizer 显示或隐藏
if (showSizer) {
  style[mxConstants.STYLE_SIZERS] = mxConstants.SIZER_HANDLE_CREATE + ";" +
    mxConstants.SIZER_HANDLE_CONNECT + ";" +
    mxConstants.SIZER_HANDLE_FIXED + ";" +
    mxConstants.SIZER_HANDLE_LABEL_CREATE;
} else {
  style[mxConstants.STYLE_SIZERS] = "";
}

// 应用样式
graph.setCellStyle(cell, style);