GmtCvsEditor

A Vue 3 + TypeScript canvas editor component based on Fabric.js

中文说明

GmtCvsEditor 是一个基于 Vue 3、TypeScript 和 Fabric.js 开发的画布编辑器组件，提供丰富的画布交互功能。

Features

• Text editing
• Input field management
• Rectangle drawing
• Brush painting
• Magic wand selection tool

功能特性

• 文本编辑功能
• 输入框管理
• 矩形绘制
• 画笔绘画
• 魔法棒选择工具

Installation

npm install gmt-cvs-editor fabric

安装

npm install gmt-cvs-editor fabric

Usage

<template>
  <div class="app">
    <GmtCvsEditor
      ref="editorRef"
      :options="editorOptions"
      :contentConfig="contentConfig"
      :titleVisible="true"
      @ready="handleReady"
      @input:selectedChange="handleInputSelectedChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import GmtCvsEditor, { type CanvasEditorOptions, type ContentConfig } from 'gmt-cvs-editor';

const editorRef = ref();
const editorOptions: CanvasEditorOptions = {
  backgroundColor: '#f5f5f5',
};
const contentConfig: ContentConfig = {
  text: 'Hello World',
  imageUrl: '',
};

const handleReady = () => {
  console.log('Editor is ready');
};

const handleInputSelectedChange = (id: string | null) => {
  console.log('Selected input:', id);
};
</script>

使用方法

<template>
  <div class="app">
    <GmtCvsEditor
      ref="editorRef"
      :options="editorOptions"
      :contentConfig="contentConfig"
      :titleVisible="true"
      @ready="handleReady"
      @input:selectedChange="handleInputSelectedChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import GmtCvsEditor, { type CanvasEditorOptions, type ContentConfig } from 'gmt-cvs-editor';

const editorRef = ref();
const editorOptions: CanvasEditorOptions = {
  backgroundColor: '#f5f5f5',
};
const contentConfig: ContentConfig = {
  text: 'Hello World',
  imageUrl: '',
};

const handleReady = () => {
  console.log('编辑器已就绪');
};

const handleInputSelectedChange = (id: string | null) => {
  console.log('选中的输入框:', id);
};
</script>

API

Props

• options: CanvasEditorOptions - 编辑器配置选项
• contentConfig: ContentConfig - 内容配置
• titleVisible: boolean - 是否显示标题文本
• inputOptions: InputFeatureOptions - 输入框选项
• enableMagicWand: boolean - 是否启用魔法棒工具

Events

• ready: 编辑器初始化完成时触发
• input:selectedChange: 选中的输入框改变时触发
• input:countChange: 输入框数量改变时触发
• input:styleChange: 输入框样式改变时触发
• rect:selectedChange: 选中的矩形改变时触发
• rect:styleChange: 矩形样式改变时触发
• brush:pathCreated: 创建画笔路径时触发
• brush:selectedChange: 选中的画笔路径改变时触发
• magicWand:pathCreated: 创建魔法棒路径时触发
• magicWand:selectedChange: 选中的魔法棒路径改变时触发
• magicWand:configUpdated: 魔法棒配置更新时触发

Methods

请参考组件源代码获取所有可用方法的完整列表。

API（中文）

属性（Props）

• options: 编辑器的配置选项
• contentConfig: 内容配置，包含文本和背景图等
• titleVisible: 是否显示标题文本
• inputOptions: 输入框的默认配置选项
• enableMagicWand: 是否启用魔法棒工具

事件（Events）

• ready: 编辑器初始化完成时触发
• input:selectedChange: 选中的输入框改变时触发，返回输入框ID
• input:countChange: 输入框数量改变时触发，返回数量
• input:styleChange: 输入框样式改变时触发，返回ID和样式
• rect:selectedChange: 选中的矩形改变时触发，返回矩形ID
• rect:styleChange: 矩形样式改变时触发，返回ID和样式
• brush:pathCreated: 创建画笔路径时触发，返回路径ID
• brush:selectedChange: 选中的画笔路径改变时触发
• magicWand:pathCreated: 创建魔法棒路径时触发，返回路径ID
• magicWand:selectedChange: 选中的魔法棒路径改变时触发
• magicWand:configUpdated: 魔法棒配置更新时触发，返回配置对象

方法（Methods）

组件提供了丰富的方法来操作画布元素，包括添加/删除输入框、矩形、设置样式、激活/停用工具等。请参考组件源代码获取完整的方法列表。

高级使用示例

1. 添加和管理输入框

<template>
  <div class="app">
    <GmtCvsEditor ref="editorRef" @ready="handleReady" />
    <button @click="addInput">添加输入框</button>
    <button @click="removeSelectedInput">删除选中输入框</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import GmtCvsEditor from 'gmt-cvs-editor';

const editorRef = ref();

const handleReady = () => {
  console.log('编辑器已就绪');
};

const addInput = () => {
  if (editorRef.value) {
    // 添加一个自定义样式的输入框
    const inputId = editorRef.value.addInput({
      value: '请输入文本',
      style: {
        fontSize: 16,
        color: '#333',
        fontWeight: 'normal'
      }
    });
    console.log('添加的输入框ID:', inputId);
  }
};

const removeSelectedInput = () => {
  if (editorRef.value) {
    editorRef.value.removeSelectedInput();
  }
};
</script>

2. 使用画笔工具

<template>
  <div class="app">
    <GmtCvsEditor ref="editorRef" />
    <div>
      <button @click="activateBrush('base')">普通画笔</button>
      <button @click="activateBrush('spray')">喷绘笔</button>
      <button @click="deactivateBrush">关闭画笔</button>
      <input type="color" v-model="brushColor" @input="updateBrushColor" />
      <input type="range" v-model.number="brushWidth" @input="updateBrushWidth" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import GmtCvsEditor from 'gmt-cvs-editor';

const editorRef = ref();
const brushColor = ref('#ff0000');
const brushWidth = ref(5);

const activateBrush = (type: string) => {
  if (editorRef.value) {
    editorRef.value.activateBrush({
      type,
      style: {
        color: brushColor.value,
        width: brushWidth.value
      }
    });
  }
};

const deactivateBrush = () => {
  if (editorRef.value) {
    editorRef.value.deactivateBrush();
  }
};

const updateBrushColor = () => {
  if (editorRef.value) {
    editorRef.value.updateBrushStyle({ color: brushColor.value });
  }
};

const updateBrushWidth = () => {
  if (editorRef.value) {
    editorRef.value.updateBrushStyle({ width: brushWidth.value });
  }
};
</script>

常见问题

1. 如何设置画布背景图？ 通过 contentConfig 属性设置 imageUrl 即可。

2. 如何自定义输入框样式？ 使用 addInput 方法时传入 style 配置，或使用 updateStyle 方法更新现有输入框样式。

3. 如何限制用户编辑某些元素？ 使用 toggleLock 或 toggleRectLock 方法锁定特定元素。

4. 魔法棒工具的灵敏度如何调整？ 使用 updateMagicWandConfig 方法更新 sensitivity 值（1-10）。

注意事项

• 组件依赖 Vue 3 和 Fabric.js 6.7.1
• 确保在使用组件方法前，组件已完全初始化（监听 ready 事件）
• 在移动设备上，部分功能可能需要额外的触摸事件处理
• 对于大型画布或复杂操作，请注意性能优化