mxgraph入门疑问：如何通过graph.insertVertex修改单元格形状？

Hey there! I totally get this frustration—when you’re starting out with mxGraph, it’s easy to hit snags with styles not behaving as expected. Let’s break down why your ROUNDED flag and custom shapes aren’t working, and fix them step by step:

1. You’re Using the Wrong Syntax for Boolean Styles #

mxGraph doesn’t recognize true/false for boolean style properties like ROUNDED. Instead, you need to use 1 (for true) or 0 (for false).

For example, this won’t work:

// ❌ Incorrect
graph.insertVertex(parent, null, 'Test', 20, 20, 80, 40, 'ROUNDED=true;strokeColor=red');

But this will:

// ✅ Correct
graph.insertVertex(parent, null, 'Test', 20, 20, 80, 40, 'ROUNDED=1;strokeColor=red');

2. You’re Missing the shape Property for Custom Shapes #

The ROUNDED flag only affects rectangle vertices—it doesn’t change the shape itself. To use non-rectangle shapes (like ellipses, triangles, or hexagons), you need to explicitly set the shape style property.

Here are some common shape values you can use:

• shape=ellipse
• shape=triangle
• shape=hexagon
• shape=rhombus

Example of a working ellipse vertex:

graph.insertVertex(parent, null, 'Ellipse', 150, 20, 100, 60, 'shape=ellipse;fillColor=lightblue;strokeColor=darkblue');

3. Ensure Your Style String is Formatted Correctly #

mxGraph styles are semicolon-separated key-value pairs with no spaces around the equals sign. A tiny typo (like a space or missing semicolon) can break the whole style.

Bad format:

// ❌ Has spaces and missing semicolon
'ROUNDED = 1 ; fillColor lightgreen'

Good format:

// ✅ Clean, correct syntax
'ROUNDED=1;fillColor=lightgreen;strokeColor=darkgreen'

4. Check for Default Style Overrides #

Sometimes mxGraph’s default vertex styles can override your custom settings. To confirm, you can inspect the default style with:

console.log(graph.getStylesheet().getDefaultVertexStyle());

If the default style sets a shape or ROUNDED value you don’t want, you can either:

• Explicitly overwrite the property in your custom style string, or
• Update the default style globally:

  var defaultStyle = graph.getStylesheet().getDefaultVertexStyle();
  defaultStyle.rounded = 1; // Sets all new vertices to rounded by default
  

Full Working Example #

Here’s a complete snippet you can test to see all these fixes in action:

// Initialize the graph
const container = document.getElementById('graphContainer');
const graph = new mxGraph(container);

// Get the default parent container
const parent = graph.getDefaultParent();

// Start batch update (improves performance)
graph.getModel().beginUpdate();
try {
    // Rounded rectangle
    graph.insertVertex(parent, null, 'Rounded Rectangle', 50, 50, 120, 60, 'ROUNDED=1;fillColor=#f0f8ff;strokeColor=#2c3e50');
    
    // Ellipse
    graph.insertVertex(parent, null, 'Ellipse', 200, 50, 100, 60, 'shape=ellipse;fillColor=#ffeaa7;strokeColor=#d35400');
    
    // Triangle
    graph.insertVertex(parent, null, 'Triangle', 350, 50, 80, 80, 'shape=triangle;fillColor=#a29bfe;strokeColor=#6c5ce7');
} finally {
    // End batch update
    graph.getModel().endUpdate();
}

Quick Recap #

• Use ROUNDED=1 (not true) to get rounded rectangles
• Add shape=[shape-name] to change the vertex’s base shape
• Double-check your style string for typos (no spaces, correct semicolon separation)
• Verify default styles aren’t overriding your custom settings

内容的提问来源于stack exchange，提问作者Robbie Forder