Vue的画布拖拽组件

📢 介绍

@canvas-drag/vue组件支持以下功能：

• 画布拖拽
• 画布缩放
• 元素拖拽
• 元素旋转
• 元素缩放
• 元素组合拖拽
• 元素碰撞检测
• 吸附
• 辅助线

⚡ 使用说明

@canvas-drag/vue组件依赖@canvas-drag/core和@canvas-drag/plugins库

@canvas-drag/core是核心代码，@canvas-drag/plugins是插件系统

安装依赖

npm i @canvas-drag/vue
npm i @canvas-drag/core
npm i @canvas-drag/plugins
# or
pnpm i @canvas-drag/vue
pnpm i @canvas-drag/core
pnpm i @canvas-drag/plugins
# or
yarn i @canvas-drag/vue
yarn i @canvas-drag/core
yarn i @canvas-drag/plugins

使用

<template>
  <CanvasDrag v-model:elements="elements" :plugins="plugins"> </CanvasDrag>
</template>

<script setup lang="ts">
  import CanvasDrag from '@canvas-drag/vue';
  import type { ElementType, Plugin } from '@canvas-drag/core';
  import {
    rotatePlugin,
    selectPlugin,
    scalePlugin,
    dragPlugin,
    smartGuidesPlugin,
    collisionPlugin,
    scaleCanvasPlugin,
    dragCanvasPlugin,
  } from '@canvas-drag/plugins';

  const plugins: Plugin[] = [
    rotatePlugin(),
    selectPlugin(),
    scalePlugin(),
    dragPlugin(true),
    smartGuidesPlugin(),
    collisionPlugin(),
    scaleCanvasPlugin(),
    dragCanvasPlugin(),
  ];

  const elements = reactive<ElementType[]>([
    {
      id: '1',
      width: 100,
      height: 100,
      left: 50,
      top: 50,
      angle: 45,
      disabled: true,
      style: { backgroundColor: '#ff5555' },
    },
    {
      id: '2',
      width: 100,
      height: 100,
      left: 200,
      top: 200,
      style: { backgroundColor: '#5555ff' },
    },
    {
      id: '3',
      width: 100,
      height: 100,
      left: 350,
      top: 350,
      style: { backgroundColor: '#55ff55' },
    },
  ]);
</script>

事件

| 事件名 | 说明 | 参数类型 | 版本 | | ------ | ------ | ---------------------------------------------------------------------------------- | ----- | | drag | 拖拽 | (data: Record<string, { left: number; top: number }>, ids: string[]) => void | 1.0.0 | | scale | 缩放 | (data: Record<string, { width: number; height: number }>, ids: string[]) => void | 1.0.0 | | rotate | 旋转 | (data: Record<string, { angle: number }>, ids: string[]) => void | 1.0.0 | | change | 变化 | (data: any[]) => void | 1.0.0 | | custom | 自定义 | data: { type: string; data: any } | 1.0.0 |

插槽

| 名称 | 说明 | 参数类型 | 版本 | | ------ | ------ | ----------------------------------------- | ----- | | item | 项目 | (data: {id: string; item: any}) => void | 1.0.0 | | pos | 八个点 | () => void | 1.0.0 | | select | 选择框 | (data: any) => void | 1.0.0 |