添加水印

.vscode/settings.json

@@ -6,5 +6,6 @@
         "**/.gitignore",
         "**/.vscode/**",
         "**/lib/**"
-    ]
+    ],
+    "liveServer.settings.port": 80
 }

src/assets/css/svg.css

@@ -7,3 +7,17 @@ text {
 svg {
   user-select: none;
 }
+
+/* 元素鼠标悬浮样式 */
+svg g:hover > rect {
+  fill: #ffafb6;
+}
+
+/* 右下角水印样式 */
+svg #watermark-r-b{
+  opacity: 0.2;
+  transition: 0.2s;
+}
+svg #watermark-r-b:hover{
+  opacity: 0.8;
+}

src/assets/js/class.js

@@ -133,6 +133,13 @@ class Shape {
     }
 
 
+    // 添加一个图片水印
+    addWatermark(id, { imageSrc }) {
+        var primaryCanvas = workSpace.primaryCanvas
+        return primaryCanvas.append("image", id)
+            .attr("xlink:href", imageSrc)
+    }
+
     // 绘制一个链表
     getLinkedListFragment(id, nodes) {
         var settings = this.workSpace.settings

src/assets/js/index.js

@@ -72,6 +72,33 @@ function initArray(elementId, listData) {
 
     console.log(fragment)
     workSpace.primaryCanvas.html("")
+
+    // 添加水印 居中
+    var watermarkWidth = settings.outerSize.height * 0.65
+    shape.addWatermark(elementId, {
+        imageSrc: "./assets/image/logo-small.svg",
+    })
+        .attr('id', 'watermark-c-c')
+        .attr('x', settings.outerSize.width / 2)
+        .attr('y', settings.outerSize.height / 2)
+        .style('width', watermarkWidth + 'px')
+        .style('height', watermarkWidth + 'px')
+        .style('transform', `translate(-${watermarkWidth / 2}px, -${watermarkWidth / 2}px)`)
+        .style('opacity', '0.015')
+        .style('transition', '0.2s')
+
+    // 添加水印 右下角
+    var watermarkWidth = 60
+    shape.addWatermark(elementId, {
+        imageSrc: "./assets/image/logo-small.svg",
+    })
+        .attr('id', 'watermark-r-b')
+        .attr('x', settings.outerSize.width)
+        .attr('y', settings.outerSize.height)
+        .style('width', watermarkWidth + 'px')
+        .style('height', watermarkWidth + 'px')
+        .style('transform', 'translate(-80px, -80px)')
+
     workSpace.primaryCanvas.node().appendChild(fragment)
     document.getElementById(elementId).customAttr = fragment.customAttr
 }