封装svg图片展示及操纵组件——svgComponent——js技能提升 ...

template部分

1. <template>
2.   <div class="canvas-wrapper" ref="canvasWrapper">
3.     <svg
4.         :viewBox="computedViewBox"
5.         ref="svgCanvas"
6.         xmlns="http://www.w3.org/2000/svg"
7.         xmlns:xlink="http://www.w3.org/1999/xlink"
8.         class="schematic-svg"
9.         @mousedown="startDrag"
10.         @mousemove="onDrag"
11.         @mouseup="endDrag"
12.         @wheel="onScroll"
13.         v-html="svgContent"
14.         preserveAspectRatio="xMinYMin meet"
15.     >
16.     </svg>
17.   </div>
18. </template>

复制代码

this.klFile = "data:image/svg+xml;base64," + data[0].kl_svg
<svg-component v-if="klFile !== null" :svg-base64="klFile" view-box="0 0 2000 2000"></svg-component>
script部分

1. <script>
2. export default {
3.   name:'SvgComponent',
4.   props: {
5.     svgBase64: {
6.       type: String,
7.       required: true
8.     },
9.     viewBox: {
10.       type: String,
11.       required: true
12.     },
13.   },
14.   data() {
15.     return {
16.       computedViewBox: this.viewBox, // 用于动态修改的 viewBox
17.       dragging: false,
18.       startX: 0,
19.       startY: 0,
20.       viewBoxX: 0,
21.       viewBoxY: 0,
22.       svgContent: "", // 存储解码后的 SVG 内容
23.     };
24.   },
25.   watch: {
26.     svgBase64() {
27.       // 响应 props 变化并重新渲染 SVG
28.       this.decodeSvgBase64();
29.     },
30.   },
31.   mounted() {
32.     this.decodeSvgBase64();
33.   },
34.   methods: {
35.     decodeSvgBase64() {
36.       // 解码 Base64 数据
37.       // 检查并移除可能存在的 Base64 数据头
38.       let base64String = this.svgBase64;
39.       const prefix = "data:image/svg+xml;base64,";
41.       if (base64String.startsWith(prefix)) {
42.         base64String = base64String.replace(prefix, "");
43.       }
45.       // 尝试解码 Base64 数据
46.       const decodedData = atob(base64String);
48.       this.svgContent = decodedData; // 将解码后的内容赋值给 svgContent
49.     },
50.     startDrag(event) {
51.       this.dragging = true;
52.       this.startX = event.clientX;
53.       this.startY = event.clientY;
54.     },
55.     onDrag(event) {
56.       if (this.dragging) {
57.         const dx = this.startX - event.clientX;
58.         const dy = this.startY - event.clientY;
59.         this.viewBoxX += dx;
60.         this.viewBoxY += dy;
61.         this.updateViewBox();
62.         this.startX = event.clientX;
63.         this.startY = event.clientY;
64.       }
65.     },
66.     endDrag() {
67.       this.dragging = false;
68.     },
69.     onScroll(event) {
70.       event.preventDefault();
71.       const zoomAmount = 1.1;
72.       const [x, y, w, h] = this.computedViewBox.split(" ").map(Number);
74.       // Zoom in or out
75.       if (event.deltaY < 0) {
76.         // Zoom in
77.         this.computedViewBox = `${x + w * (1 - 1 / zoomAmount) / 2} ${y + h * (1 - 1 / zoomAmount) / 2} ${w / zoomAmount} ${h / zoomAmount}`;
78.       } else {
79.         // Zoom out
80.         this.computedViewBox = `${x - w * (zoomAmount - 1) / 2} ${y - h * (zoomAmount - 1) / 2} ${w * zoomAmount} ${h * zoomAmount}`;
81.       }
82.     },
83.     updateViewBox() {
84.       const [x, y, w, h] = this.viewBox.split(" ").map(Number);
85.       this.computedViewBox = `${this.viewBoxX} ${this.viewBoxY} ${w} ${h}`;
86.     }
87.   },
88. };
89. </script>

复制代码

css部分

1. <style scoped>
2. .canvas-wrapper {
3.   border-radius: 10px;
4.   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
5.   overflow: hidden;
6. }
8. .schematic-svg {
9.   width: 100%;
10.   height: 100%;
11. }
12. </style>

复制代码

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