From bed6c2b5c8792e62915a8f0ee59453c444f6c7f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?= <2291200076@qq.com> Date: Sat, 21 May 2022 22:43:03 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B0=B4=E5=8D=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 ++- src/assets/css/svg.css | 14 ++++++++++++++ src/assets/image/logo-small.svg | 1 + src/assets/js/class.js | 7 +++++++ src/assets/js/index.js | 27 +++++++++++++++++++++++++++ 5 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 src/assets/image/logo-small.svg diff --git a/.vscode/settings.json b/.vscode/settings.json index 97c7068..adf39d3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,5 +6,6 @@ "**/.gitignore", "**/.vscode/**", "**/lib/**" - ] + ], + "liveServer.settings.port": 80 } \ No newline at end of file diff --git a/src/assets/css/svg.css b/src/assets/css/svg.css index 412a1d9..c19b088 100644 --- a/src/assets/css/svg.css +++ b/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; +} \ No newline at end of file diff --git a/src/assets/image/logo-small.svg b/src/assets/image/logo-small.svg new file mode 100644 index 0000000..11c5a31 --- /dev/null +++ b/src/assets/image/logo-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/js/class.js b/src/assets/js/class.js index ffb0153..3551bcc 100644 --- a/src/assets/js/class.js +++ b/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 diff --git a/src/assets/js/index.js b/src/assets/js/index.js index 99a85fb..b055038 100644 --- a/src/assets/js/index.js +++ b/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 }