当前位置：首页 > news >正文

LineConnector 组件（连接线）-技术博客

news 2026/4/12 0:42:13

1. 组件概述

LineConnector 是一个基于 Vue 3 的线条连接组件，用于在两个点之间绘制各种类型的连接线，支持直线、折线和曲线，并提供丰富的自定义选项。该组件适用于流程图、拓扑图、连接线可视化等场景。

2. 组件特性

📏 多种线条类型：支持直线(straight)、折线(polyline)、曲线(curve)
🎨 高度可定制：颜色、宽度、虚线样式、箭头等
📍 点标记：可显示/隐藏连接点，支持自定义标签
🔄 灵活的折线类型：支持4种不同的折线连接方式
📱 响应式设计：适应不同屏幕尺寸

3. 组件结构

核心文件

index.vue：LineConnector 组件的主文件
demo.vue：组件的演示和使用示例

技术栈

Vue 3
TypeScript
SVG
SCSS

4. 安装与导入

组件源码（来自 LineConnector.vue）

<template><div class="line-connector-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"><!-- Points --><div v-if="showPoints" v-for="(point, index) in [pointA, pointB]" :key="index" class="point":class="index === 0 ? 'point-a' : 'point-b'" :style="{top: `${point.y}px`,left: `${point.x}px`,background: strokeColor}">{{ index === 0 ? labelA : labelB }}</div><!-- SVG Line --><svg class="line-svg"style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"><!-- Arrow Marker --><marker v-if="showArrow" id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6"orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" :fill="strokeColor" /></marker><!-- Straight Line --><line v-if="lineType === 'straight'" :x1="pointA.x + pointSize / 2" :y1="pointA.y + pointSize / 2":x2="pointB.x + pointSize / 2" :y2="pointB.y + pointSize / 2" :stroke="strokeColor":stroke-width="strokeWidth" :stroke-dasharray="dashed ? '5,5' : 'none'":marker-end="showArrow ? 'url(#arrow)' : undefined" /><!-- Polyline --><path v-else-if="lineType === 'polyline'" :d="polylinePath" :stroke="strokeColor":stroke-width="strokeWidth" :stroke-dasharray="dashed ? '5,5' : 'none'" fill="none":marker-end="showArrow ? 'url(#arrow)' : undefined" /><!-- Curve --><path v-else-if="lineType === 'curve'" :d="curvePath" :stroke="strokeColor" :stroke-width="strokeWidth":stroke-dasharray="dashed ? '5,5' : 'none'" fill="none":marker-end="showArrow ? 'url(#arrow)' : undefined" /></svg></div>
</template><script>
export default {name: 'LineConnector',props: {// 点A的位置（x, y 单位为像素）--- 默认值为 { x: 0, y: 0 }pointA: {type: Object,default: () => ({ x: 0, y: 0 }),validator: (value) => typeof value.x === 'number' && typeof value.y === 'number'},// 点B的位置（x, y 单位为像素）--- 必须提供pointB: {type: Object,required: true,validator: (value) => typeof value.x === 'number' && typeof value.y === 'number'},// 线条类型：straight（直线）, polyline（折线）, curve（曲线）lineType: {type: String,default: 'straight',validator: (value) => ['straight', 'polyline', 'curve'].includes(value)},// 是否为虚线dashed: {type: Boolean,default: false},// 是否显示箭头showArrow: {type: Boolean,default: false},// 是否显示点showPoints: {type: Boolean,default: true},// 点A的标签labelA: {type: String,// default: 'A'default: ''},// 点B的标签labelB: {type: String,// default: 'B'default: ''},// 线条和点的颜色strokeColor: {type: String,default: '#fff'// default: '#f00'},// 线条宽度strokeWidth: {type: Number,default: 8},// 点的大小（宽和高，单位为像素）pointSize: {type: Number,default: 0},// 折线类型：1-横竖横, 2-竖横竖, 3-横竖, 4-竖横polylineType: {type: String,default: '1',validator: (value) => ['1', '2', '3', '4'].includes(value)}},computed: {// Path for polyline (right angle)polylinePath() {const { x: x1, y: y1 } = this.pointA;const { x: x2, y: y2 } = this.pointB;const midX = (x1 + x2) / 2;const midY = (y1 + y2) / 2;// Calculate center offset based on point sizeconst centerOffset = this.pointSize / 2;// Add center offset to all coordinatesconst aX = x1 + centerOffset;const aY = y1 + centerOffset;const bX = x2 + centerOffset;const bY = y2 + centerOffset;const mX = midX + centerOffset;const mY = midY + centerOffset;switch (this.polylineType) {case '1': // 横竖横 (H-V-H)return `M ${aX} ${aY} L ${mX} ${aY} L ${mX} ${bY} L ${bX} ${bY}`;case '2': // 竖横竖 (V-H-V)return `M ${aX} ${aY} L ${aX} ${mY} L ${bX} ${mY} L ${bX} ${bY}`;case '3': // 横竖 (H-V)return `M ${aX} ${aY} L ${bX} ${aY} L ${bX} ${bY}`;case '4': // 竖横 (V-H)return `M ${aX} ${aY} L ${aX} ${bY} L ${bX} ${bY}`;default:return `M ${aX} ${aY} L ${mX} ${aY} L ${mX} ${bY} L ${bX} ${bY}`;}},// Path for curve (quadratic Bezier)curvePath() {const { x: x1, y: y1 } = this.pointA;const { x: x2, y: y2 } = this.pointB;const midX = (x1 + x2) / 2;const midY = (y1 + y2) / 2;// Control point above the midpoint for an upward curveconst controlY = midY - 50;// Calculate center offset based on point sizeconst centerOffset = this.pointSize / 2;return `M ${x1 + centerOffset} ${y1 + centerOffset} Q ${midX + centerOffset} ${controlY + centerOffset} ${x2 + centerOffset} ${y2 + centerOffset}`;}}
};
</script><style scoped>
.point {position: absolute;width: v-bind('pointSize + "px"');height: v-bind('pointSize + "px"');line-height: v-bind('pointSize + "px"');text-align: center;color: white;border-radius: 50%;cursor: move;user-select: none;z-index: 10;
}.line-svg {z-index: 1;
}
</style>

局部导入

import { defineAsyncComponent } from 'vue'
const LineConnector = defineAsyncComponent(() => import('/@/components/Line/index.vue'))

全局注册

// main.ts
import { createApp } from 'vue'
import LineConnector from './components/Line/index.vue'const app = createApp(App)
app.component('LineConnector', LineConnector)
app.mount('#app')

5. 使用示例

基本用法

<template><div class="container"><LineConnector :pointA="{ x: 0, y: 50 }" :pointB="{ x: 100, y: 150 }" line-type="straight"/></div>
</template>

完整示例（来自 demo.vue）

<template><div class="granulator-screen"><div class="device-content-menu"><!-- 直线 --><LineConnector :pointA="{ x: 0, y: 50 }" :pointB="{ x: 100, y: 150 }" line-type="straight" :dashed="false"label-a="" label-b="" stroke-color="#fff" :stroke-width="2" /><!-- 折线类型1-横竖横 --><LineConnector :pointA="{ x: 0, y: 150 }" :pointB="{ x: 100, y: 200 }" line-type="polyline":polyline-type="'1'" stroke-color="#fff" :stroke-width="2" /><!-- 折线类型2-竖横竖 --><LineConnector :pointA="{ x: 0, y: 300 }" :pointB="{ x: 100, y: 400 }" line-type="polyline":polyline-type="'2'" stroke-color="#409eff" :stroke-width="2" /><!-- 折线类型3-横竖 --><LineConnector :pointA="{ x: 0, y: 450 }" :pointB="{ x: 100, y: 550 }" line-type="polyline":polyline-type="'3'" stroke-color="#67c23a" :stroke-width="2" /><!-- 折线类型4-竖横 --><LineConnector :pointA="{ x: 0, y: 600 }" :pointB="{ x: 100, y: 650 }" line-type="polyline":polyline-type="'4'" stroke-color="#e6a23c" :stroke-width="2" /></div></div>
</template>

6. API 参考

Props

参数名	类型	默认值	说明
pointA	Object	`{ x: 0, y: 0 }`	起点坐标（像素单位）
pointB	Object	必填	终点坐标（像素单位）
lineType	String	`'straight'`	线条类型：`straight`(直线)、`polyline`(折线)、`curve`(曲线)
dashed	Boolean	`false`	是否为虚线
showArrow	Boolean	`false`	是否显示箭头
showPoints	Boolean	`true`	是否显示连接点
labelA	String	`''`	起点标签
labelB	String	`''`	终点标签
strokeColor	String	`'#fff'`	线条和点的颜色
strokeWidth	Number	`8`	线条宽度
pointSize	Number	`0`	点的大小（宽和高，像素单位）
polylineType	String	`'1'`	折线类型：`1`(横竖横)、`2`(竖横竖)、`3`(横竖)、`4`(竖横)

计算属性

polylinePath

根据折线类型和点坐标生成 SVG path 字符串：

类型1 (横竖横): M aX aY L mX aY L mX bY L bX bY
类型2 (竖横竖): M aX aY L aX mY L bX mY L bX bY
类型3 (横竖): M aX aY L bX aY L bX bY
类型4 (竖横): M aX aY L aX bY L bX bY

curvePath

生成曲线（二次贝塞尔曲线）的 SVG path 字符串，控制点位于中点上方 50px 处。

7. 组件实现细节

核心渲染逻辑

<!-- SVG Line -->
<svg class="line-svg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"><!-- Arrow Marker --><marker v-if="showArrow" id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" :fill="strokeColor" /></marker><!-- Straight Line --><line v-if="lineType === 'straight'" :x1="pointA.x + pointSize / 2" :y1="pointA.y + pointSize / 2":x2="pointB.x + pointSize / 2" :y2="pointB.y + pointSize / 2" :stroke="strokeColor":stroke-width="strokeWidth" :stroke-dasharray="dashed ? '5,5' : 'none'":marker-end="showArrow ? 'url(#arrow)' : undefined" /><!-- Polyline --><path v-else-if="lineType === 'polyline'" :d="polylinePath" :stroke="strokeColor":stroke-width="strokeWidth" :stroke-dasharray="dashed ? '5,5' : 'none'" fill="none":marker-end="showArrow ? 'url(#arrow)' : undefined" /><!-- Curve --><path v-else-if="lineType === 'curve'" :d="curvePath" :stroke="strokeColor" :stroke-width="strokeWidth":stroke-dasharray="dashed ? '5,5' : 'none'" fill="none":marker-end="showArrow ? 'url(#arrow)' : undefined" />
</svg>

点标记实现

<!-- Points -->
<div v-if="showPoints" v-for="(point, index) in [pointA, pointB]" :key="index" class="point":class="index === 0 ? 'point-a' : 'point-b'" :style="{top: `${point.y}px`,left: `${point.x}px`,background: strokeColor}">{{ index === 0 ? labelA : labelB }}
</div>

8. 样式设计

组件使用 CSS 变量和动态绑定实现样式的灵活控制：

.point {position: absolute;width: v-bind('pointSize + "px"');height: v-bind('pointSize + "px"');line-height: v-bind('pointSize + "px"');text-align: center;color: white;border-radius: 50%;cursor: move;user-select: none;z-index: 10;
}.line-svg {z-index: 1;
}

9. 扩展与定制

添加新的折线类型

要添加新的折线类型，只需在 polylinePath 计算属性中添加新的 case：

switch (this.polylineType) {case '1': // 横竖横 (H-V-H)return `M ${aX} ${aY} L ${mX} ${aY} L ${mX} ${bY} L ${bX} ${bY}`;case '2': // 竖横竖 (V-H-V)return `M ${aX} ${aY} L ${aX} ${mY} L ${bX} ${mY} L ${bX} ${bY}`;// 添加新类型case '5': // 自定义类型return `M ${aX} ${aY} L ${aX + 50} ${aY} L ${bX - 50} ${bY} L ${bX} ${bY}`;default:return `M ${aX} ${aY} L ${mX} ${aY} L ${mX} ${bY} L ${bX} ${bY}`;
}

自定义曲线控制点

可以扩展 props，允许用户自定义曲线的控制点：

// 添加新的 props
controlPoint: {type: Object,default: null
}// 在 curvePath 中使用
curvePath() {const { x: x1, y: y1 } = this.pointA;const { x: x2, y: y2 } = this.pointB;const midX = (x1 + x2) / 2;const midY = (y1 + y2) / 2;// 使用自定义控制点或默认值const controlX = this.controlPoint?.x || midX;const controlY = this.controlPoint?.y || (midY - 50);const centerOffset = this.pointSize / 2;return `M ${x1 + centerOffset} ${y1 + centerOffset} Q ${controlX + centerOffset} ${controlY + centerOffset} ${x2 + centerOffset} ${y2 + centerOffset}`;
}