Switch to Chinese Version (切换到中文版)

Fabric Fusion Core

Module Features

fabric-fusion/core is a high-performance canvas management module based on Fabric.js. It encapsulates common canvas operations, configuration management, and event listeners, aiming to improve the efficiency and maintainability of developing with Fabric.js.

Main Modules

1. Core Encapsulation

• Provides core Fabric.js canvas management functions, including canvas initialization, object addition, event binding, drag-and-zoom support.
• Supports adaptive external container size with dynamic canvas resizing.
• Offers resource cleanup mechanisms suitable for complex application scenarios.

2. Parameterized Default Configuration

• Stores default module configurations, such as constants for zoom range (ZOOM_RANGE).
• Facilitates centralized management and unified parameter modification.

Encapsulation of Common Fabric.js Event Logic

• Mouse wheel zoom
• Canvas drag
• Object movement
• Mouse click
• Supports extension and custom event listeners

Debounce Mechanism

• Provides a general debounce function to optimize performance and prevent issues caused by high-frequency events (e.g., resize and mouse:move).

Module Features

1. Flexible Configuration

• Supports customizing the module's default configuration via config.ts.
• Users can override default settings for personalized adjustments.

2. Highly Modular

• Separates event handling, utility functions, and core logic for clear code structure, facilitating maintenance and extension.
• All functions are importable as needed, avoiding unnecessary code loading.

3. Extensive Event Support

• Built-in common Fabric.js events such as mouse wheel zoom and canvas drag.
• Provides event extension interfaces for users to add custom event listeners.

4. Performance Optimization

• Optimizes high-frequency event handling through debouncing and event management to improve rendering performance.
• Supports resource release and event unbinding to avoid memory leaks.

5. Adaptive Containers

• Supports dynamic canvas resizing to automatically adapt to external container size changes.
• Optionally enables ResizeObserver or global resize event listening.

Usage

Installation

Ensure that fabric-fusion and fabric modules are installed:

Note: The fabric module needs to be installed and supports only version 5.x, not version 6.x.

npm install fabric fabric-fusion

<template>
  <div class="fabric-container">
    <h1>Fabric Canvas Demo</h1>
    <div class="toolbar">
      <button @click="addRectangle">Add Rectangle</button>
      <button @click="addCircle">Add Circle</button>
      <button @click="resetCanvas">Reset Canvas</button>
      <button @click="clearCanvas">Clear Canvas</button>
    </div>
    <div class="canvas-wrapper" ref="containerRef">
      <canvas id="fabric-canvas" ref="canvasRef"></canvas>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { FabricRender, fabric } from "@fabric-fusion/core";

// Define references to the container and canvas
const containerRef = ref<HTMLDivElement | null>(null);
const canvasRef = ref<HTMLCanvasElement | null>(null);
const fabricRender = new FabricRender();

// Add a rectangle
const addRectangle = () => {
  fabricRender.add([
    new fabric.Rect({
      left: Math.random() * 200,
      top: Math.random() * 200,
      width: 50,
      height: 50,
      fill: "blue",
    }),
  ]);
};

// Add a circle
const addCircle = () => {
  fabricRender.add([
    new fabric.Circle({
      left: Math.random() * 200,
      top: Math.random() * 200,
      radius: 25,
      fill: "green",
    }),
  ]);
};

// Reset the canvas viewport
const resetCanvas = () => {
  fabricRender.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
  fabricRender.canvas.requestRenderAll();
};

// Clear the canvas
const clearCanvas = () => {
  fabricRender.clear();
};

// Custom event listener - Mouse click event
const customMouseDownHandler = (opt: any) => {
  const pointer = fabricRender.canvas.getPointer(opt.e);
  console.log(
    `Custom Event: Mouse clicked at x: ${pointer.x}, y: ${pointer.y}`
  );
};

// Vue lifecycle hook - Initialize on component mount
onMounted(() => {
  if (canvasRef.value && containerRef.value) {
    fabricRender.init(
      canvasRef.value,
      {
        backgroundColor: "#f9f9f9", // Set canvas background color
        enableDefaultListeners: true, // Enable default event listeners
        customListeners: {
          "mouse:down": customMouseDownHandler, // Add custom mouse click event
        },
      },
      containerRef.value
    );
  }
});

// Vue lifecycle hook - Clean up resources on component unmount
onUnmounted(() => {
  fabricRender.dispose();
});
</script>

<style scoped>
.fabric-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.toolbar button {
  margin-right: 10px;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
}

.canvas-wrapper {
  position: relative;
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
}
</style>

Fabric-Fusion Community Discussions

Fabric-Fusion Discussions is a place to ask questions, share ideas, and engage with the community.