如何在FabricJS Canvas中创建Dropdown组件？求方案及替代框架

Hey there! FabricJS is fantastic for working with text and basic shapes, but it doesn’t include a native dropdown component out of the box. No worries though—you can build a custom one using FabricJS’s core objects. Plus, I’ll share some libraries that are more flexible for complex UI components if you need them.

Building a Custom Dropdown in FabricJS #

Here’s how to create a dropdown component similar to your TextBox. We’ll combine rectangles, text, and event handlers to mimic dropdown behavior:

export default function Dropdown(props) {
  useEffect(() => {
    const { canvas } = props;
    const dropdownWidth = 294;
    const dropdownHeight = 60;
    const optionHeight = 40;
    const options = ["Option 1", "Option 2", "Option 3"];
    let isOpen = false;
    let selectedOption = options[0];

    // Main dropdown background
    const dropdownBg = new fabric.Rect({
      left: 10,
      top: 50,
      width: dropdownWidth,
      height: dropdownHeight,
      fill: "#ffffff",
      stroke: "#ABB3BF",
      strokeWidth: 1,
      padding: 20,
      selectable: true,
    });

    // Selected option text
    const selectedText = new fabric.Text(selectedOption, {
      left: 10 + 15,
      top: 50 + (dropdownHeight - 12)/2,
      fontSize: 12,
      fill: "#333",
      fontWeight: 375,
    });

    // Dropdown arrow (triangle indicator)
    const arrow = new fabric.Triangle({
      left: 10 + dropdownWidth - 30,
      top: 50 + (dropdownHeight - 10)/2,
      width: 10,
      height: 10,
      fill: "#999",
      angle: 180,
    });

    // Options container (hidden by default)
    const optionsContainer = new fabric.Rect({
      left: 10,
      top: 50 + dropdownHeight,
      width: dropdownWidth,
      height: options.length * optionHeight,
      fill: "#ffffff",
      stroke: "#ABB3BF",
      strokeWidth: 1,
      visible: false,
    });

    // Individual option text elements
    const optionTexts = options.map((option, index) => 
      new fabric.Text(option, {
        left: 10 + 15,
        top: 50 + dropdownHeight + index * optionHeight + (optionHeight -12)/2,
        fontSize: 12,
        fill: "#333",
        selectable: true,
        evented: true,
        optionValue: option, // Custom property to track option value
      })
    );

    // Toggle dropdown visibility on click
    dropdownBg.on("mousedown", () => {
      isOpen = !isOpen;
      optionsContainer.set("visible", isOpen);
      optionTexts.forEach(text => text.set("visible", isOpen));
      canvas.renderAll();
    });

    // Handle option selection
    optionTexts.forEach(text => {
      text.on("mousedown", () => {
        selectedOption = text.optionValue;
        selectedText.set("text", selectedOption);
        isOpen = false;
        optionsContainer.set("visible", false);
        optionTexts.forEach(t => t.set("visible", false));
        canvas.renderAll();
      });
    });

    // Add all elements to the canvas
    canvas.add(dropdownBg, selectedText, arrow, optionsContainer, ...optionTexts);

    // Cleanup elements when component unmounts
    return () => {
      canvas.remove(dropdownBg, selectedText, arrow, optionsContainer, ...optionTexts);
    };
  }, [props.canvas]);

  return null;
}

Key Notes: #

• We use FabricJS’s basic shapes (Rect, Text, Triangle) to construct the dropdown UI from scratch.
• Event listeners (mousedown) handle toggling the options menu and selecting values.
• Custom properties like optionValue help track which option was clicked.
• The cleanup function ensures we remove canvas elements when the component unmounts to avoid memory leaks.

Alternative Libraries for Complex Components #

If you find yourself needing pre-built advanced UI components (like dropdowns, forms, or interactive widgets) often, these libraries offer more flexibility than FabricJS:

• Konva.js: A 2D canvas library with a component-based structure (similar to React) that simplifies building interactive UIs. It has robust event handling and layering support for complex elements.
• Paper.js: Focused on vector graphics, but its powerful path manipulation and event system make it ideal for crafting custom interactive components with precise control.
• SVG.js: While it uses SVG instead of canvas, it’s a great choice if you want scalable vector UI elements with a simple, intuitive API for building interactive components.

These libraries are designed to handle complex UI scenarios without requiring you to build every component from the ground up.

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