JS实现SVG的TEXT标签自动换行功能

首先界说了一个RectAndText组件，这个组件实现了在矩形中表现居中的文本（矩形可以根据自己需求要或者不要）

1. <template>
2.     <rect :x="x" :y="y" :width="width" :height="height" :stroke="stroke" :stroke-width="strokeWidth"></rect>
3.   <g v-if="lines.length <= 1">
4.     <text :x="getRectangleCenter(x, y, width, height).centerX + skewX"
5.           :y="getRectangleCenter(x, y, width, height).centerY + skewY"
6.           :font-size="fontSize" :fill="fill" :font-family="fontFamily" text-anchor="middle" alignment-baseline="middle">
7.       {{ title }}</text>
9.   </g>
11.   <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})`">
12.     <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">
13.       {{ line }}
14.     </text>
15.   </g>
16. </template>
18. <script setup>
19. //自定义组件 绘制矩形的同时渲染一个居中的文本
20. import {onMounted, ref} from "vue";
22. const props = defineProps({
23.   fontSize: {
24.     type: Number,
25.     default: () => 40
26.   },
27.   fontFamily: {
28.     type: String,
29.     default: () => 'NSimSun'
30.   },
31.   stroke: {
32.     type: String,
33.     default: () => '#ffffff'
34.   },
35.   fill: {
36.     type: String,
37.     default: () => '#ffffff'
38.   },
39.   title: {
40.     type: [String, Number],
41.     default: () => ''
42.   },
43.   x: {
44.     type: Number,
45.     default: () => 100
46.   },
47.   y: {
48.     type: Number,
49.     default: () => 100
50.   },
51.   height: {
52.     type: Number,
53.     default: () => 100
54.   },
55.   width: {
56.     type: Number,
57.     default: () => 100
58.   },
59.   strokeWidth: {
60.     type: String,
61.     default: () => '2'
62.   },
63.   //偏移量：有时候不一定会居中显示，有可能偏移
64.   skewX: {
65.     type: Number,
66.     default: () => 0
67.   },
68.   skewY: {
69.     type: Number,
70.     default: () => 0
71.   },
72. });
74. // 使用computed属性来将title字符串分割成多行
75. const lines = computed(() => {
76.   // 检查 props.title 是否是一个字符串
77.   if (typeof props.title === 'string') {
78.     // 如果是字符串，则按换行符分割
79.     return props.title.split('\n');
80.   } else {
81.     // 如果不是字符串，返回一个空数组或包含默认值的数组
82.     return [''];
83.   }
84. });
87. onMounted(() => {
89. });
91. //计算文字在矩形居中的位置
92. function getRectangleCenter(x, y, width, height) {
93.   // 计算中心点的x坐标
94.   const centerX = x + width / 2;
95.   // 计算中心点的y坐标
96.   const centerY = y + height / 2;
98.   // 返回中心点坐标
99.   return { centerX, centerY };
100. }
101. </script>

复制代码

第一个g里面实现了默认的一行居中表现文本。重点是第二个g，如果检测到了文本中存在换行符\n，则渲染第二个g，这里通过transform实现y坐标的偏移，偏移量是根据fontSize文本巨细来盘算的，这是为了保证在偏移时不超出矩形边框。这时你只必要传入一个包含\n的文本字符串就可以实现动态换行了。结果如下：

至于如何换行的逻辑，这里就必要自己去实现，我举个例子：
我这边有个字符串"IG,IIG,3G,4G,4DG,8DG,4G,4DG"，我必要把他拆分为两行表现，我通过,分割出来的字符串确认要从哪里举行拆分，(同时拆分后要把文字巨细减小，否则会超出矩形边框，这个根据自己的需求去写就行）。

1. /**
2. * 文本换行逻辑
3. * 动态的通过\n分割文本
4. * 同时计算文本的大小（比如文本默认大小是40，那么分为两行就要变为30，三行变为20...）
5. */
6. function getTextLineAndSize(text, fontSize, devicesPerLine) {
7.   let devices = text.split(',');
8.   let lines = Math.ceil(devices.length / devicesPerLine); // 计算需要的行数
9.   let decreaseSize = 10 * (lines - 1); // 每增加一行，字体大小减少10
10.   let result = { content: text, size: fontSize - decreaseSize };
12.   // 根据每行的设备数量添加换行符
13.   for (let i = devicesPerLine; i < devices.length; i += devicesPerLine) {
14.     devices[i] = '\n' + devices[i];
15.   }
17.   result.content = devices.join(',');
18.   return result;
19. }

复制代码

末了是调用这个组件的例子，这里的变量自己传入就可以

1. <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"/>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。