原理图组件

KqSchematicEditor 是一个基于 Vue 3 和 Element Plus 的 SVG 绘图组件，主要用于绘制和编辑信号流图、原理图等场景。支持自定义绘图、视图控制、数据导出等功能，同时提供丰富的扩展能力，方便用户根据需求进行二次开发。

基本用法

<template>
  <Kq-schematic-editor />
</template>

属性

属性 说明 类型 默认值
backgroundImage 组件背景图路径 String null
viewImage 绘图区背景图（原理图底图） String null
title 头部标题 String null
data 初始路径数据 格式：[{id, color, list: [{ x, y, id}] }] Array []
brushData 初始画笔路径数据 格式：[{id, name, color, width, points: [{ x, y}] }] Array []
rectangleData 初始矩形数据 格式：[{id, name, color, width,height,x, y }] Array []
readonly 是否只读模式（禁用编辑功能） Boolean false
showNav 是否显示头部导航栏 Boolean true
useBtns 可用按钮组 [code] Array ['markerMode', 'cancelDrawing', 'playSpeed', 'togglePlay', 'colorPicker', 'save', 'refresh', 'export', 'clear', 'customButtons']
initScale 初始缩放比例 Number 1
showPlayControl 是否显示播放控制按钮 Boolean true
playSpeedOptions 自定义倍速选项，如 [0.5, 1, 1.5, 2, 5] Array [0.5, 1, 2, 3]
snapPoints 吸附点数据，格式：[{x, y, radius}]（radius 为吸附半径） Array []
snapPointVisible 控制吸附点是否可见（true：显示默认样式；false：填充和描边设为透明） Boolean true
showSnapPointLabels 控制吸附点标签是否可见 Boolean true
showSnapPointColors 控制吸附点颜色是否可见 Boolean false
customButtons 自定义按钮配置 Array 配置项
viewConfig 视图配置，必须包含WIDTH和HEIGHT，格式：{ WIDTH: Number, HEIGHT: Number } Object 配置项

事件

事件 说明 参数 默认值
data 路径数据变化时触发 updatedData：更新后的路径数据 null
brush-data 画笔路径数据变化时触发 brushData：更新后的画笔路径数据 null
play-state-change 播放状态变化时触发 {playing: Boolean, speed: Number}：播放状态和速度 null
rectangle-data 矩形标记数据变化时触发 rectangles：矩形标记数组 null
custom-button-click 自定义按钮点击时触发 {button: Object, data: Object}：按钮配置和当前数据 null
snap-points-change 吸附点数据变化时触发 snapPoints：更新后的吸附点数据 null

自定义按钮配置

属性 说明 类型 默认值
id 按钮唯一标识（必填） String null
label 按钮文字（必填） String null
type 按钮类型（可选，同Element Plus按钮类型） String default
size 按钮尺寸（可选，同Element Plus按钮尺寸） String default
action 按钮功能标识（可选，用于点击事件区分） String null
style 自定义样式（可选） Object null
className 自定义类名（可选） String null
disabled 是否禁用（可选） Boolean false

视图尺寸配置

属性 说明 类型 默认值
WIDTH 画布的基础宽度（单位：px），将作为画布的初始宽度基准（必填） Number null
HEIGHT 画布的基础高度（单位：px），将作为画布的初始高度基准（必填） Number null

results matching ""

    No results matching ""