首先定义了一个RectAndText组件，这个组件实现了在矩形中显示居中的文本（矩形可以根据自己需求要或者不要）
<template><rect :x="x" :y="y" :width="width" :height="height" :stroke="stroke" :stroke-width="strokeWidth"></rect><g v-if="lines.length <= 1"><text :x="getRectangleCenter(x, y, width, height).centerX + skewX":y="getRectangleCenter(x, y, width, height).centerY + skewY":font-size="fontSize" :fill="fill" :font-family="fontFamily" text-anchor="middle" alignment-baseline="middle">{{ title }}</text></g><g v-if="lines.length > 1" :transform="`translate(${getRectangleCenter(x, y, width, height).centerX + skewX},${getRectangleCenter(x, y, width, height).centerY + skewY - (lines.length - 1) * fontSize / 4})`"><text v-for="(line, index) in lines" :key="index" :x="0" :y="index * fontSize * 1.2" :font-size="fontSize" :fill="fill" :font-family="fontFamily" text-anchor="middle" alignment-baseline="ideographic">{{ line }}</text></g>
</template><script setup>
//自定义组件 绘制矩形的同时渲染一个居中的文本
import {onMounted, ref} from "vue";const props = defineProps({fontSize: {type: Number,default: () => 40},fontFamily: {type: String,default: () => 'NSimSun'},stroke: {type: String,default: () => '#ffffff'},fill: {type: String,default: () => '#ffffff'},title: {type: [String, Number],default: () => ''},x: {type: Number,default: () => 100},y: {type: Number,default: () => 100},height: {type: Number,default: () => 100},width: {type: Number,default: () => 100},strokeWidth: {type: String,default: () => '2'},//偏移量：有时候不一定会居中显示，有可能偏移skewX: {type: Number,default: () => 0},skewY: {type: Number,default: () => 0},
});// 使用computed属性来将title字符串分割成多行
const lines = computed(() => {// 检查 props.title 是否是一个字符串if (typeof props.title === 'string') {// 如果是字符串，则按换行符分割return props.title.split('\n');} else {// 如果不是字符串，返回一个空数组或包含默认值的数组return [''];}
});onMounted(() => {});//计算文字在矩形居中的位置
function getRectangleCenter(x, y, width, height) {// 计算中心点的x坐标const centerX = x + width / 2;// 计算中心点的y坐标const centerY = y + height / 2;// 返回中心点坐标return { centerX, centerY };
}
</script>
第一个g里面实现了默认的一行居中显示文本。重点是第二个g，如果检测到了文本中存在换行符\n，则渲染第二个g，这里通过transform实现y坐标的偏移，偏移量是根据fontSize文本大小来计算的，这是为了保证在偏移时不超出矩形边框。这时你只需要传入一个包含\n的文本字符串就可以实现动态换行了。效果如下：
至于如何换行的逻辑，这里就需要自己去实现，我举个例子：
我这边有个字符串"IG,IIG,3G,4G,4DG,8DG,4G,4DG"，我需要把他拆分为两行显示，我通过,分割出来的字符串确认要从哪里进行拆分，(同时拆分后要把文字大小减小，否则会超出矩形边框，这个根据自己的需求去写就行）。
/*** 文本换行逻辑* 动态的通过\n分割文本* 同时计算文本的大小（比如文本默认大小是40，那么分为两行就要变为30，三行变为20...）*/
function getTextLineAndSize(text, fontSize, devicesPerLine) {let devices = text.split(',');let lines = Math.ceil(devices.length / devicesPerLine); // 计算需要的行数let decreaseSize = 10 * (lines - 1); // 每增加一行，字体大小减少10let result = { content: text, size: fontSize - decreaseSize };// 根据每行的设备数量添加换行符for (let i = devicesPerLine; i < devices.length; i += devicesPerLine) {devices[i] = '\n' + devices[i];}result.content = devices.join(',');return result;
}最后是调用这个组件的例子，这里的变量自己传入就可以
<RectAndText :x="rectX" :y="rectY" :width="rectWidth" :height="100" :stroke="stroke" :strokeWidth="strokeWidth" :fontSize="getTextLineAndSize(devName, fontSize, 4).size" :title="getTextLineAndSize(devName, fontSize, 4).content"/>