竖屏musicUI修改
This commit is contained in:
parent
02b199904b
commit
bb112524b7
@ -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) {
|
||||
if (core.domStyle.isVertical) {
|
||||
const time = Math.min(Math.max(Math.floor((px - 100) / 1000 * audio.duration), 0), audio.duration)
|
||||
|
||||
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"); //黑色背景
|
||||
|
||||
Loading…
Reference in New Issue
Block a user