Dove/Eustia
16
2
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

竖屏musicUI修改

Browse Source
This commit is contained in:
sakuya 2025-01-11 18:27:59 +08:00
parent 02b199904b
commit bb112524b7
1 changed files with 101 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

182
project/plugins.js
View File

@ -14186,6 +14186,8 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
let page = 0; //初始页面 let page = 0; //初始页面
let ischange = false; let ischange = false;
let isvolume = false; let isvolume = false;
let pcx = 0;
let pcy = 0;
music.addEventListener('mousedown', function (e) { music.addEventListener('mousedown', function (e) {
e.stopPropagation(); e.stopPropagation();
const left = core.dom.gameGroup.offsetLeft; const left = core.dom.gameGroup.offsetLeft;
@ -14339,7 +14341,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
} }
mousedown(px, py) { mousedown(px, py) {
//鼠标按下时 //鼠标按下时
console.log(px, py)
const makeBox = ([x, y], [w, h]) => { const makeBox = ([x, y], [w, h]) => {
return [ return [
[x, y], [x, y],
@ -14365,15 +14367,16 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
return; return;
} }
if (core.domStyle.isVertical) { //竖屏 if (core.domStyle.isVertical) { //竖屏
const pageupbox = makeBox([1050, 1100], [200, 100]);
const pagedownbox = makeBox([1050, 1700], [200, 100]); const pageupbox = makeBox([100, 900], [200, 100]);
const musicbox = makeBox([100, 1000], [900, this.musicMx[page].length * 100]) const pagedownbox = makeBox([700, 900], [200, 100]);
const beforebox = makeBox([135, 760], [50, 50]) const musicbox = makeBox([100, 200], [800, this.musicMx[page].length * 100])
const afterbox = makeBox([440, 760], [50, 50]) const beforebox = makeBox([310, 1720], [100, 100])
const playbox = makeBox([260, 730], [100, 100]) const afterbox = makeBox([700, 1720], [100, 100])
const typebox = makeBox([580, 730], [100, 100]) const playbox = makeBox([480, 1680], [160, 160])
const changebox = makeBox([100, 590], [600, 20]) const typebox = makeBox([830, 1710], [150, 150])
const volumebox = makeBox([890, 200], [20, 500]) const changebox = makeBox([-100 + pcx, pcy + 590], [1000, 20])
const volumebox = makeBox([890 + 250, 200], [20, 500])
if (inRect(pos, pageupbox)) { if (inRect(pos, pageupbox)) {
if (page !== 0) page -= 1 if (page !== 0) page -= 1
return; return;
@ -14484,7 +14487,8 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
return; return;
} }
if (inRect(pos, musicbox)) { 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]) { if (page !== this.selection[0] || index !== this.selection[1]) {
this.selection[0] = page this.selection[0] = page
this.selection[1] = index this.selection[1] = index
@ -14506,7 +14510,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
} }
if (inRect(pos, changebox)) { 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.pause()
audio.currentTime = time; audio.currentTime = time;
@ -14523,10 +14527,10 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
const pageupbox = makeBox([1050, 1100], [200, 100]); const pageupbox = makeBox([1050, 1100], [200, 100]);
const pagedownbox = makeBox([1550, 1100], [200, 100]); const pagedownbox = makeBox([1550, 1100], [200, 100]);
const musicbox = makeBox([900, 100], [1000, this.musicMx[page].length * 100]) const musicbox = makeBox([900, 100], [1000, this.musicMx[page].length * 100])
const beforebox = makeBox([135, 760], [50, 50]) const beforebox = makeBox([165, 740], [50, 50])
const afterbox = makeBox([440, 760], [50, 50]) const afterbox = makeBox([500, 740], [50, 50])
const playbox = makeBox([260, 730], [100, 100]) const playbox = makeBox([300, 700], [100, 100])
const typebox = makeBox([580, 730], [100, 100]) const typebox = makeBox([600, 700], [100, 100])
const changebox = makeBox([100, 590], [600, 20]) const changebox = makeBox([100, 590], [600, 20])
const volumebox = makeBox([100, 990], [600, 20]) const volumebox = makeBox([100, 990], [600, 20])
if (inRect(pos, pageupbox)) { if (inRect(pos, pageupbox)) {
@ -14678,9 +14682,15 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
mousemove(px, py) { mousemove(px, py) {
if (ischange) { 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) { if (isvolume) {
@ -14721,13 +14731,15 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
core.ui._buildFont(66, true) core.ui._buildFont(66, true)
); );
//core.fillRect(ctx, 440, 760, 50, 50) //core.fillRect(ctx, 440, 760, 50, 50)
pcx = 0
pcy = -800
ctx.strokeStyle = "#FFFFFF" ctx.strokeStyle = "#FFFFFF"
ctx.lineWidth = 3 ctx.lineWidth = 3
ctx.beginPath() ctx.beginPath()
ctx.moveTo(50, 1000) ctx.moveTo(50 + pcx, pcy + 1000)
ctx.lineTo(50, 1900) ctx.lineTo(50 + pcx, pcy + 1900)
ctx.moveTo(1000, 1000) ctx.moveTo(1000 + pcx, pcy + 1000)
ctx.lineTo(1000, 1900) ctx.lineTo(1000 + pcx, pcy + 1900)
ctx.stroke() ctx.stroke()
let posy = 1100 let posy = 1100
const indexList = this.musicMx[page] const indexList = this.musicMx[page]
@ -14737,7 +14749,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
core.fillBoldText1( core.fillBoldText1(
ctx, ctx,
text, text,
100, 100 + pcx, pcy +
posy - 30, posy - 30,
page === this.selection[0] && i === this.selection[1] ? "#FFFFFF" : "#444444", page === this.selection[0] && i === this.selection[1] ? "#FFFFFF" : "#444444",
"#000000", "#000000",
@ -14747,16 +14759,18 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
ctx.strokeStyle = "#FFFFFF" ctx.strokeStyle = "#FFFFFF"
ctx.lineWidth = 3 ctx.lineWidth = 3
ctx.beginPath() ctx.beginPath()
ctx.moveTo(100, posy) ctx.moveTo(100 + pcx, pcy + posy)
ctx.lineTo(900, posy) ctx.lineTo(900 + pcx, pcy + posy)
ctx.stroke() ctx.stroke()
posy += 100 posy += 100
} }
core.fillBoldText1( core.fillBoldText1(
ctx, ctx,
'上一页', '上一页',
1050, 100,
1200 - 30, 1000,
page === 0 ? "#444444" : "#FFFFFF", page === 0 ? "#444444" : "#FFFFFF",
"#000000", "#000000",
6, 6,
@ -14766,8 +14780,8 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
core.fillBoldText1( core.fillBoldText1(
ctx, ctx,
(page + 1) + "/" + this.musicMx.length, (page + 1) + "/" + this.musicMx.length,
1050, 450,
1500 - 30, 1000,
"#FFFFFF", "#FFFFFF",
"#000000", "#000000",
6, 6,
@ -14776,102 +14790,108 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 =
core.fillBoldText1( core.fillBoldText1(
ctx, ctx,
'下一页', '下一页',
1050, 700,
1800 - 30, 1000,
page === this.musicMx.length - 1 ? "#444444" : "#FFFFFF", page === this.musicMx.length - 1 ? "#444444" : "#FFFFFF",
"#000000", "#000000",
6, 6,
core.ui._buildFont(66, true) core.ui._buildFont(66, true)
); );
pcx = 200
pcy = 1000
ctx.strokeStyle = "#ffffff" ctx.strokeStyle = "#ffffff"
ctx.lineWidth = 3 ctx.lineWidth = 3
ctx.beginPath() ctx.beginPath()
ctx.moveTo(100, 600) ctx.moveTo(-100 + pcx, pcy + 600)
ctx.lineTo(700, 600) ctx.lineTo(900 + pcx, pcy + 600)
ctx.stroke() ctx.stroke()
ctx.fillStyle = "#ffffff" ctx.fillStyle = "#ffffff"
ctx.font = "bold 48px Verdana" ctx.font = "bold 96px Verdana"
ctx.fillText('|', 130, 797) ctx.fillText('|', 100 + pcx, pcy + 797)
ctx.fillText('◀', 140, 800) ctx.fillText('◀', 115 + pcx, pcy + 800)
ctx.beginPath() ctx.beginPath()
ctx.arc(310, 780, 50, 0, 2 * Math.PI) ctx.arc(355 + pcx, pcy + 770, 80, 0, 3 * Math.PI)
ctx.stroke() 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'] 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"); core.setTextAlign(ctx, "center");
ctx.font = "bold 48px Verdana" ctx.font = "bold 52px Verdana"
ctx.fillText('当前歌曲', 400, 297) ctx.fillText('当前歌曲', 400 + pcx, pcy + 297)
ctx.fillText(this.musicname[this.musicMx[this.selection[0]][this.selection[1]]], 400, 397) ctx.fillText(this.musicname[this.musicMx[this.selection[0]][this.selection[1]]], 400 + pcx, pcy + 457)
ctx.font = "bold 36px Verdana" ctx.font = "bold 36px Verdana"
const thistime = audio.currentTime const thistime = audio.currentTime
if (thistime) { if (thistime) {
const timetext = (Math.floor(thistime / 60).toString()).padStart(2, '0') + ':' + Math.floor(thistime % 60).toString().padStart(2, '0') 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 { } else {
const timetext = "00:00" 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 const fulltime = audio.duration
if (fulltime) { if (fulltime) {
const timetext = Math.floor(fulltime / 60).toString().padStart(2, '0') + ':' + Math.floor(fulltime % 60).toString().padStart(2, '0') 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 { } else {
const timetext = "00:00" const timetext = "00:00"
ctx.fillText(timetext, 650, 650) ctx.fillText(timetext, 950 + pcx, pcy + 650)
} }
ctx.strokeStyle = "#ffffff" ctx.strokeStyle = "#ffffff"
ctx.lineWidth = 9 ctx.lineWidth = 9
ctx.fillStyle = 'rgba(255,255,255,0.5)' ctx.fillStyle = 'rgba(255,255,255,0.5)'
const pointx = 600 * thistime / fulltime + 100 const pointx = 1000 * thistime / fulltime - 100
if (fulltime && thistime) { if (fulltime && thistime) {
ctx.beginPath() ctx.beginPath()
ctx.moveTo(100, 600) ctx.moveTo(-100 + pcx, pcy + 600)
ctx.lineTo(pointx, 600) ctx.lineTo(pointx + pcx, pcy + 600)
ctx.stroke() ctx.stroke()
ctx.beginPath() ctx.beginPath()
ctx.arc(pointx, 600, 10, 0, 2 * Math.PI) ctx.arc(pointx + pcx, pcy + 600, 10, 0, 2 * Math.PI)
ctx.fill() ctx.fill()
} else { } else {
ctx.beginPath() ctx.beginPath()
ctx.arc(100, 600, 10, 0, 2 * Math.PI) ctx.arc(-100 + pcx, pcy + 600, 10, 0, 2 * Math.PI)
ctx.fill() 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 { } else {
//横屏 //横屏
core.fillRect(ctx, 0, 0, 2028, 1248, "#000000"); //黑色背景 core.fillRect(ctx, 0, 0, 2028, 1248, "#000000"); //黑色背景