From bb112524b72ba865fcad5485a2cb02cff11da7fb Mon Sep 17 00:00:00 2001 From: sakuya <1394232566@qq.com> Date: Sat, 11 Jan 2025 18:27:59 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AB=96=E5=B1=8FmusicUI=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- project/plugins.js | 182 +++++++++++++++++++++++++-------------------- 1 file changed, 101 insertions(+), 81 deletions(-) diff --git a/project/plugins.js b/project/plugins.js index 87b4706..1183a8f 100644 --- a/project/plugins.js +++ b/project/plugins.js @@ -14186,6 +14186,8 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = let page = 0; //初始页面 let ischange = false; let isvolume = false; + let pcx = 0; + let pcy = 0; music.addEventListener('mousedown', function (e) { e.stopPropagation(); const left = core.dom.gameGroup.offsetLeft; @@ -14339,7 +14341,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = } mousedown(px, py) { //鼠标按下时 - + console.log(px, py) const makeBox = ([x, y], [w, h]) => { return [ [x, y], @@ -14365,15 +14367,16 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = return; } if (core.domStyle.isVertical) { //竖屏 - const pageupbox = makeBox([1050, 1100], [200, 100]); - const pagedownbox = makeBox([1050, 1700], [200, 100]); - const musicbox = makeBox([100, 1000], [900, this.musicMx[page].length * 100]) - const beforebox = makeBox([135, 760], [50, 50]) - const afterbox = makeBox([440, 760], [50, 50]) - const playbox = makeBox([260, 730], [100, 100]) - const typebox = makeBox([580, 730], [100, 100]) - const changebox = makeBox([100, 590], [600, 20]) - const volumebox = makeBox([890, 200], [20, 500]) + + const pageupbox = makeBox([100, 900], [200, 100]); + const pagedownbox = makeBox([700, 900], [200, 100]); + const musicbox = makeBox([100, 200], [800, this.musicMx[page].length * 100]) + const beforebox = makeBox([310, 1720], [100, 100]) + const afterbox = makeBox([700, 1720], [100, 100]) + const playbox = makeBox([480, 1680], [160, 160]) + const typebox = makeBox([830, 1710], [150, 150]) + const changebox = makeBox([-100 + pcx, pcy + 590], [1000, 20]) + const volumebox = makeBox([890 + 250, 200], [20, 500]) if (inRect(pos, pageupbox)) { if (page !== 0) page -= 1 return; @@ -14484,7 +14487,8 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = return; } if (inRect(pos, musicbox)) { - const index = Math.floor((py - 1000) / 100) + pcy = -800 + const index = Math.floor((py - 1000 - pcy) / 100) if (page !== this.selection[0] || index !== this.selection[1]) { this.selection[0] = page this.selection[1] = index @@ -14506,7 +14510,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = } if (inRect(pos, changebox)) { - const time = Math.floor((px - 100) / 600 * audio.duration) + const time = Math.floor((px - 100) / 1000 * audio.duration) audio.pause() audio.currentTime = time; @@ -14523,10 +14527,10 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = const pageupbox = makeBox([1050, 1100], [200, 100]); const pagedownbox = makeBox([1550, 1100], [200, 100]); const musicbox = makeBox([900, 100], [1000, this.musicMx[page].length * 100]) - const beforebox = makeBox([135, 760], [50, 50]) - const afterbox = makeBox([440, 760], [50, 50]) - const playbox = makeBox([260, 730], [100, 100]) - const typebox = makeBox([580, 730], [100, 100]) + const beforebox = makeBox([165, 740], [50, 50]) + const afterbox = makeBox([500, 740], [50, 50]) + const playbox = makeBox([300, 700], [100, 100]) + const typebox = makeBox([600, 700], [100, 100]) const changebox = makeBox([100, 590], [600, 20]) const volumebox = makeBox([100, 990], [600, 20]) if (inRect(pos, pageupbox)) { @@ -14678,9 +14682,15 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = mousemove(px, py) { if (ischange) { - const time = Math.min(Math.max(Math.floor((px - 100) / 600 * audio.duration), 0), audio.duration) + if (core.domStyle.isVertical) { + const time = Math.min(Math.max(Math.floor((px - 100) / 1000 * audio.duration), 0), audio.duration) - audio.currentTime = time + audio.currentTime = time + } else { + const time = Math.min(Math.max(Math.floor((px - 100) / 600 * audio.duration), 0), audio.duration) + + audio.currentTime = time + } } if (isvolume) { @@ -14721,13 +14731,15 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = core.ui._buildFont(66, true) ); //core.fillRect(ctx, 440, 760, 50, 50) + pcx = 0 + pcy = -800 ctx.strokeStyle = "#FFFFFF" ctx.lineWidth = 3 ctx.beginPath() - ctx.moveTo(50, 1000) - ctx.lineTo(50, 1900) - ctx.moveTo(1000, 1000) - ctx.lineTo(1000, 1900) + ctx.moveTo(50 + pcx, pcy + 1000) + ctx.lineTo(50 + pcx, pcy + 1900) + ctx.moveTo(1000 + pcx, pcy + 1000) + ctx.lineTo(1000 + pcx, pcy + 1900) ctx.stroke() let posy = 1100 const indexList = this.musicMx[page] @@ -14737,7 +14749,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = core.fillBoldText1( ctx, text, - 100, + 100 + pcx, pcy + posy - 30, page === this.selection[0] && i === this.selection[1] ? "#FFFFFF" : "#444444", "#000000", @@ -14747,16 +14759,18 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = ctx.strokeStyle = "#FFFFFF" ctx.lineWidth = 3 ctx.beginPath() - ctx.moveTo(100, posy) - ctx.lineTo(900, posy) + ctx.moveTo(100 + pcx, pcy + posy) + ctx.lineTo(900 + pcx, pcy + posy) ctx.stroke() posy += 100 } + + core.fillBoldText1( ctx, '上一页', - 1050, - 1200 - 30, + 100, + 1000, page === 0 ? "#444444" : "#FFFFFF", "#000000", 6, @@ -14766,8 +14780,8 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = core.fillBoldText1( ctx, (page + 1) + "/" + this.musicMx.length, - 1050, - 1500 - 30, + 450, + 1000, "#FFFFFF", "#000000", 6, @@ -14776,102 +14790,108 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = core.fillBoldText1( ctx, '下一页', - 1050, - 1800 - 30, + 700, + 1000, page === this.musicMx.length - 1 ? "#444444" : "#FFFFFF", "#000000", 6, core.ui._buildFont(66, true) ); + + pcx = 200 + pcy = 1000 ctx.strokeStyle = "#ffffff" ctx.lineWidth = 3 ctx.beginPath() - ctx.moveTo(100, 600) - ctx.lineTo(700, 600) + ctx.moveTo(-100 + pcx, pcy + 600) + ctx.lineTo(900 + pcx, pcy + 600) ctx.stroke() ctx.fillStyle = "#ffffff" - ctx.font = "bold 48px Verdana" - ctx.fillText('|', 130, 797) - ctx.fillText('◀', 140, 800) + ctx.font = "bold 96px Verdana" + ctx.fillText('|', 100 + pcx, pcy + 797) + ctx.fillText('◀', 115 + pcx, pcy + 800) ctx.beginPath() - ctx.arc(310, 780, 50, 0, 2 * Math.PI) + ctx.arc(355 + pcx, pcy + 770, 80, 0, 3 * Math.PI) ctx.stroke() - if (this.stop) { ctx.fillText('▶', 295, 797) } else { ctx.fillText('||', 285, 794) } + ctx.fillText('|', 555 + pcx, pcy + 797) + ctx.fillText('▶', 505 + pcx, pcy + 800) + if (this.stop) { ctx.fillText('▶', 323 + pcx, pcy + 797) } else { ctx.fillText('||', 303 + pcx, pcy + 794) } - ctx.fillText('|', 470, 797) - ctx.fillText('▶', 450, 800) - ctx.fillText('音', 810, 425) - ctx.fillText('量', 810, 510) - ctx.beginPath() - ctx.moveTo(900, 200) - ctx.lineTo(900, 700) - ctx.stroke() - ctx.strokeStyle = "#ffffff" - ctx.lineWidth = 9 - ctx.fillStyle = 'rgba(255,255,255,0.5)' - - ctx.beginPath() - ctx.moveTo(900, 700) - ctx.lineTo(900, -500 * audio.volume + 700) - ctx.stroke() - ctx.beginPath() - ctx.arc(900, -500 * audio.volume + 700, 10, 0, 2 * Math.PI) - ctx.fill() - core.fillBoldText1( - ctx, - Math.floor(100 * audio.volume), - 915, - 200, - "#FFFFFF", - "#000000", - 6, - core.ui._buildFont(32, true) - ); const img = core.material.images.images[this.type + '.webp'] - if (img) ctx.drawImage(img, 580, 730, 100, 100) + if (img) ctx.drawImage(img, 600 + pcx, pcy + 655, 200, 200) core.setTextAlign(ctx, "center"); - ctx.font = "bold 48px Verdana" - ctx.fillText('当前歌曲', 400, 297) - ctx.fillText(this.musicname[this.musicMx[this.selection[0]][this.selection[1]]], 400, 397) + ctx.font = "bold 52px Verdana" + ctx.fillText('当前歌曲', 400 + pcx, pcy + 297) + ctx.fillText(this.musicname[this.musicMx[this.selection[0]][this.selection[1]]], 400 + pcx, pcy + 457) ctx.font = "bold 36px Verdana" const thistime = audio.currentTime if (thistime) { const timetext = (Math.floor(thistime / 60).toString()).padStart(2, '0') + ':' + Math.floor(thistime % 60).toString().padStart(2, '0') - ctx.fillText(timetext, 510, 650) + ctx.fillText(timetext, 810 + pcx, pcy + 650) } else { const timetext = "00:00" - ctx.fillText(timetext, 510, 650) + ctx.fillText(timetext, 810 + pcx, pcy + 650) } - ctx.fillText("/", 580, 650) + ctx.fillText("/", 880 + pcx, pcy + 650) const fulltime = audio.duration if (fulltime) { const timetext = Math.floor(fulltime / 60).toString().padStart(2, '0') + ':' + Math.floor(fulltime % 60).toString().padStart(2, '0') - ctx.fillText(timetext, 650, 650) + ctx.fillText(timetext, 950 + pcx, pcy + 650) } else { const timetext = "00:00" - ctx.fillText(timetext, 650, 650) + ctx.fillText(timetext, 950 + pcx, pcy + 650) } ctx.strokeStyle = "#ffffff" ctx.lineWidth = 9 ctx.fillStyle = 'rgba(255,255,255,0.5)' - const pointx = 600 * thistime / fulltime + 100 + const pointx = 1000 * thistime / fulltime - 100 if (fulltime && thistime) { ctx.beginPath() - ctx.moveTo(100, 600) - ctx.lineTo(pointx, 600) + ctx.moveTo(-100 + pcx, pcy + 600) + ctx.lineTo(pointx + pcx, pcy + 600) ctx.stroke() ctx.beginPath() - ctx.arc(pointx, 600, 10, 0, 2 * Math.PI) + ctx.arc(pointx + pcx, pcy + 600, 10, 0, 2 * Math.PI) ctx.fill() } else { ctx.beginPath() - ctx.arc(100, 600, 10, 0, 2 * Math.PI) + ctx.arc(-100 + pcx, pcy + 600, 10, 0, 2 * Math.PI) ctx.fill() } + pcx = 250 + pcy = 0 + ctx.fillText('音', 850 + pcx, pcy + 425) + ctx.fillText('量', 850 + pcx, pcy + 510) + ctx.beginPath() + ctx.moveTo(900 + pcx, pcy + 200) + ctx.lineTo(900 + pcx, pcy + 700) + ctx.stroke() + ctx.strokeStyle = "#ffffff" + ctx.lineWidth = 9 + ctx.fillStyle = 'rgba(255,255,255,0.5)' + + ctx.beginPath() + ctx.moveTo(900 + pcx, pcy + 700) + ctx.lineTo(900 + pcx, pcy - 500 * audio.volume + 700) + ctx.stroke() + ctx.beginPath() + ctx.arc(900 + pcx, pcy - 500 * audio.volume + 700, 10, 0, 2 * Math.PI) + ctx.fill() + core.fillBoldText1( + ctx, + Math.floor(100 * audio.volume), + 915 + pcx, + pcy + 200, + "#FFFFFF", + "#000000", + 6, + core.ui._buildFont(32, true) + ); + } else { //横屏 core.fillRect(ctx, 0, 0, 2028, 1248, "#000000"); //黑色背景