hatech-web-component-draw-canvas v0.0.10

前端可视化画布组件

可视化画布组件，集成g6，提供节点生成、连线、组合、删除、保存等功能

使用G6集成多种自定义行为，提供相应功能操作

使用说明

安装

  npm install hatech-web-component-canvas

初始化

  // main.js
  import Vue from 'vue'
  import HatechCanvas from 'hatech-web-component-canvas'
  Vue.use(HatechCanvas)
  // or
  // xxx.vue
  import { HatechCanvas } from 'hatech-web-component-canvas'
  export default {
    components: {
      HatechCanvas
    }
  }

使用示例

  <hatech-canvas :config="config" :data="data" @onEvent="onEvent"></hatech-canvas>

  export default {
    data() {
      return {
        data: [
          ...
        ],
        config: {
          ...
        }
      }
    },
    methods: {
      onEvent(args) {
        const { event, params } = args
        this[event] && this[event](params)
      }
    }
  }

参数

• config.modes 支持模式说明
  • node_create: 创建节点模式
  • node_edit: 编辑节点模式
  • edge_create: 创建边模式
  • edge_edit: 编辑边模式
  • combo_edit: 编辑combo模式
• config.base.edge edge默认样式说明
  • type：类型
  • style：样式
  • stateStyles：各种状态样式
  • label：文本
  • labelCfg：文本样式
• config.base.node node默认样式说明
  • labelPosition: 文本位置
  • labelAutoRotate: 文本是否跟随旋转
  • ctrlPointSize: 控制点边长
  • labelCfg：文本属性
  • keyShapeStyle：主要图形样式
  • anchorPointStyle：锚点样式
  • ctrlPointStyle：控制点样式
  • stateStyles：各种状态样式
• config.base.combo combo默认样式说明
  • padding: 边距
  • type: 类型
  • style: 样式
  • stateStyles：各种状态样式

参数含义，可参照G6文档中node、edge、combo属性

插槽

事件

• onSelectElement 参数说明
  • type: 选中类型
    • nodes: 选中node
    • edge: 选中边
    • combo: 选中组合
  • element: 选中元素实例
• onDbClick 双击事件
  • type：点击类型
    • node: 节点
    • edge：边
    • combo：组合
  • element：点击元素

方法

主题变量

依赖

作者/维护者