将移动端交换怪物时的SVG直线更换为canvas手绘路径。

2024-07-31 02:25:31 +08:00 · 2024-07-31 02:25:31 +08:00 · ab9b13cad9
parent d44f5eb020
commit ab9b13cad9
6 changed files with 54 additions and 73 deletions
--- a/multi.html
+++ b/multi.html
@ -1518,11 +1518,7 @@ const teamsCount = 2;
 			<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title=""><div class="attrs"><div class="attr"></div><div class="attr"></div><div class="attr"></div><div class="attr"></div></div><div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div></div><div class="id"></div><div class="awoken-count-num"></div><div class="super-awoken display-none"><div class="awoken-icon"></div></div><div class="level"></div><div class="rarity"></div><div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div></a>
 		</template>
 	</div>
-	<svg id="interchange-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" height="100%" width="100%" style="display:none;">
-		<g class="transBox">
-			<line />
-		</g>
-	</svg>
+	<canvas id="touch-line"></canvas>
 	<div id="qr-code-frame" class="mask display-none">
 		<button class="mask-close brown-button"></button>
 		<div class="mask-content">
@ -1789,7 +1785,7 @@ const teamsCount = 2;
 		</form>
 	</dialog>

-	<svg height="24" width="100">
+	<svg width="0" height="0">
 		<defs>
 			<linearGradient id="gradient-active-skill" x1="0" x2="0" y1="0" y2="1">
 				<stop offset="25%" stop-color="white" />
--- a/script.js
+++ b/script.js
@ -4,13 +4,11 @@ let PlayerDatas = []; //玩家数据
 let currentLanguage; //当前语言
 let currentDataSource; //当前数据
 let currentPlayerData; //当前玩家数据
-let markedFilter = []; //收藏的特殊搜索
 let defaultLevel = 99; //默认等级

 const teamBigBoxs = []; //储存全部teamBigBox
 const allMembers = []; //储存所有成员，包含辅助

-let interchangeSvg; //储存划线的SVG
 let controlBox; //储存整个controlBox
 let statusLine; //储存状态栏
 let formationBox; //储存整个formationBox
@ -2653,26 +2651,14 @@ function initialize() {
 	const iptDefaultLevel = document.getElementById("default-level");
 	iptDefaultLevel.value = localStorage.getItem(cfgPrefix + iptDefaultLevel.id);
 	iptDefaultLevel.onchange = function(event){
-		let num = Number(this.value);
-		defaultLevel = num || this.placeholder;
+		const num = Number(this.value) || Number(this.placeholder);
+		if (Number.isInteger(num)) defaultLevel = num;
 		if (event instanceof Event) localStorage.setItem(cfgPrefix + this.id, this.value);
 	}
 	iptDefaultLevel.onchange(false);

-	//触屏使用的切换显示的线条
-	interchangeSvg = document.body.querySelector("#interchange-line");
-	interchangeSvg.line = interchangeSvg.querySelector("g line");
-	interchangeSvg.changePoint = function(p1, p2) {
-		const line = this.line;
-		if (p1 && p1.x != undefined)
-			line.setAttribute("x1", p1.x);
-		if (p1 && p1.y != undefined)
-			line.setAttribute("y1", p1.y);
-		if (p2 && p2.x != undefined)
-			line.setAttribute("x2", p2.x);
-		if (p2 && p2.y != undefined)
-			line.setAttribute("y2", p2.y);
-	};
+	const touchLineCanvas = document.body.querySelector("#touch-line");
+	const touchLineContex = touchLineCanvas.getContext('2d');

 	const btnDataUpdateTime = controlBox.querySelector("#datasource-updatetime");
 	btnDataUpdateTime.onclick = function() {
@ -3760,48 +3746,52 @@ function initialize() {
 		}
 		return false; //没有false将会打开链接
 	}
-	  
-	function noMove(event) {
+	
+	function noDefaultEvent(event) {
 		event.preventDefault();
 	}
+	function drawTouchLine(){
+		touchLineContex.stroke();
+	}
 	  
 	//移动端编辑界面每个怪物的头像的放下
 	function touchstartMonHead(e) {
-		document.addEventListener("touchmove",noMove,{passive:false});
+		document.addEventListener("touchmove",noDefaultEvent,{passive:false});
 		e.stopPropagation();
-		//console.log("开始触摸",e,this);
 		const tc = e.changedTouches[0];
-		const pX = tc.pageX,
-			pY = tc.pageY;
-		interchangeSvg.style.display = "none";
-		interchangeSvg.changePoint({ x: pX, y: pY }, { x: pX, y: pY });
+		const pX = tc.pageX, pY = tc.pageY;
+
+		//清空画布
+		touchLineContex.clearRect(0, 0, touchLineCanvas.width, touchLineCanvas.height);
+		touchLineCanvas.classList.remove(className_displayNone);
+		touchLineCanvas.width = document.body.scrollWidth;
+		touchLineCanvas.height = document.body.scrollHeight;
+
+		let color1 = Math.random(), color2 = color1 + (color1 < 0.5 ? 0.5 : -0.5);
+		touchLineContex.beginPath(); //重新开始一条线
+		touchLineContex.lineWidth = 3; //宽度为5
+		touchLineContex.fillStyle = `hsl(${color1}turn 100% 50%)`; //随机颜色
+		touchLineContex.strokeStyle = `hsl(${color2}turn 100% 50%)`; //随机颜色
+		touchLineContex.arc(pX, pY, 10, 0, 2 * Math.PI);
+		touchLineContex.fill();
+		touchLineContex.stroke();
+		touchLineContex.moveTo(pX, pY); //从下手点开始
 	}
 	//移动端编辑界面每个怪物的头像的移动
 	function touchmoveMonHead(e) {
-		//console.log("移动中",e,this);
 		const tc = e.changedTouches[0];
-		const pX = tc.pageX,
-			pY = tc.pageY;
-		const rect = this.getBoundingClientRect();
-		const top = rect.top + document.documentElement.scrollTop;
-		const left = rect.left + document.documentElement.scrollLeft;
-		if ((pY < top) || (pY > (top + rect.height)) ||
-			(pX < left) || (pX > (left + rect.width))) {
-			interchangeSvg.style.display = "block";
-			interchangeSvg.changePoint(null, { x: pX, y: pY });
-		} else {
-			interchangeSvg.style.display = "none";
-		}
+		const pX = tc.pageX, pY = tc.pageY;
+
+		touchLineContex.lineTo(pX, pY);
+		requestAnimationFrame(()=>drawTouchLine(pX, pY));
 	}
 	//移动端编辑界面每个怪物的头像的结束
 	function touchendMonHead(e) {
-		document.removeEventListener("touchmove",noMove,{passive:false});
+		document.removeEventListener("touchmove",noDefaultEvent,{passive:false});
+		touchLineCanvas.classList.add(className_displayNone);
 		const tc = e.changedTouches[0];
-		const pX = tc.pageX,
-			pY = tc.pageY;
-		//console.log("移动结束",pX,pY,e,this);
-		interchangeSvg.style.display = "none";
-		interchangeSvg.changePoint(null, { x: pX, y: pY });
+		const pX = tc.pageX, pY = tc.pageY;
+
 		const target = allMembers.find(m => {
 			const rect = m.getBoundingClientRect();
 			const top = rect.top + document.documentElement.scrollTop;
@ -3824,9 +3814,8 @@ function initialize() {
 	}
 	//移动端编辑界面每个怪物的头像的取消
 	function touchcancelMonHead(event) {
-		document.removeEventListener("touchmove",noMove,{passive:false});
-		interchangeSvg.style.display = "none";
-		console.log("移动取消", event, this);
+		document.removeEventListener("touchmove",noDefaultEvent,{passive:false});
+		touchLineCanvas.classList.add(className_displayNone);
 	}
 	function interchangeCard(formArr, toArr, isCopy) {
 		//优先使用传入的复制，然后才是考虑开关
--- a/service-worker.js
+++ b/service-worker.js
@ -32319,7 +32319,7 @@ const cachesMap = new Map([
 	],
 	[
 		"multi.html",
-		"63bfc3c77ce2f3ad302e2087e6e63f90"
+		"7187d627631fa7abc79622b1bdc2d477"
 	],
 	[
 		"script-custom_elements.js",
@ -32339,11 +32339,11 @@ const cachesMap = new Map([
 	],
 	[
 		"script.js",
-		"0c980b8fb810af4f0d0317fb174cb169"
+		"185f13fedf76220cf25070e80d63f4fb"
 	],
 	[
 		"solo.html",
-		"55c90c28d8a50946d8cd9f99e89ea9d8"
+		"5d9133d40c68f7f9733a3670d4213f3c"
 	],
 	[
 		"style-fix-html2canvas.css",
@ -32355,7 +32355,7 @@ const cachesMap = new Map([
 	],
 	[
 		"style.css",
-		"2c5682e1d40dd9fc7c3f91f5aca0cad3"
+		"49b86aed1bf468de63b32a5f32870300"
 	],
 	[
 		"temp.js",
@ -32363,7 +32363,7 @@ const cachesMap = new Map([
 	],
 	[
 		"triple.html",
-		"e4e16403259a0f549697ca5144985a46"
+		"0154840ff2c641967e67a1c7f8a99cb4"
 	],
 	[
 		"languages/en.css",
--- a/solo.html
+++ b/solo.html
@ -1256,11 +1256,7 @@ const teamsCount = 1;
 			<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title=""><div class="attrs"><div class="attr"></div><div class="attr"></div><div class="attr"></div><div class="attr"></div></div><div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div></div><div class="id"></div><div class="awoken-count-num"></div><div class="super-awoken display-none"><div class="awoken-icon"></div></div><div class="level"></div><div class="rarity"></div><div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div></a>
 		</template>
 	</div>
-	<svg id="interchange-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" height="100%" width="100%" style="display:none;">
-		<g class="transBox">
-			<line />
-		</g>
-	</svg>
+	<canvas id="touch-line"></canvas>
 	<div id="qr-code-frame" class="mask display-none">
 		<button class="mask-close brown-button"></button>
 		<div class="mask-content">
@ -1527,7 +1523,7 @@ const teamsCount = 1;
 		</form>
 	</dialog>

-	<svg height="24" width="100">
+	<svg width="0" height="0">
 		<defs>
 			<linearGradient id="gradient-active-skill" x1="0" x2="0" y1="0" y2="1">
 				<stop offset="25%" stop-color="white" />
--- a/style.css
+++ b/style.css
@ -55,7 +55,6 @@ body{

 	font-family: var(--font-family);
 	background-color: white;
-	overscroll-behavior: none;
 }
 details>summary {
 	cursor: pointer;
@ -1028,7 +1027,6 @@ label.badge {
 /*队伍A、B的文字*/
 .team-box{
 	vertical-align:bottom;
-	overscroll-behavior: none;
 }
 .team-box-name {
 	display: flex;
@ -3422,6 +3420,12 @@ a.series-search::before {
 	stroke-width: 5;
 	stroke-dasharray: 10;
 }
+#touch-line {
+	pointer-events: none;
+	position: absolute;
+	left: 0;
+	top: 0;
+}

 /*面板相关*/
 .board {
--- a/triple.html
+++ b/triple.html
@ -2197,11 +2197,7 @@ const teamsCount = 3;
 			<a class="monster" target="_blank" data-cardid="" data-cards-pic-idx="" data-cards-pic-x="" data-cards-pic-y="" title=""><div class="attrs"><div class="attr"></div><div class="attr"></div><div class="attr"></div><div class="attr"></div></div><div class="plus"><div class="hp"></div><div class="atk"></div><div class="rcv"></div></div><div class="id"></div><div class="awoken-count-num"></div><div class="super-awoken display-none"><div class="awoken-icon"></div></div><div class="level"></div><div class="rarity"></div><div class="count-in-box"><span class="same-id"></span><span class="evo-tree"></span></div></a>
 		</template>
 	</div>
-	<svg id="interchange-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" height="100%" width="100%" style="display:none;">
-		<g class="transBox">
-			<line />
-		</g>
-	</svg>
+	<canvas id="touch-line"></canvas>
 	<div id="qr-code-frame" class="mask display-none">
 		<button class="mask-close brown-button"></button>
 		<div class="mask-content">
@ -2468,7 +2464,7 @@ const teamsCount = 3;
 		</form>
 	</dialog>

-	<svg height="24" width="100">
+	<svg width="0" height="0">
 		<defs>
 			<linearGradient id="gradient-active-skill" x1="0" x2="0" y1="0" y2="1">
 				<stop offset="25%" stop-color="white" />