新增竖屏CGUI

This commit is contained in:
sakuya 2024-12-06 13:59:36 +08:00
parent e629d8c049
commit 2ae8119ae3

View File

@ -8663,8 +8663,6 @@ core.plugin.animate = {
CGUI.style.transform = "translate(-50%,-50%)" CGUI.style.transform = "translate(-50%,-50%)"
const ctx = CGUI.getContext("2d"); const ctx = CGUI.getContext("2d");
main.dom.CGUI = CGUI; main.dom.CGUI = CGUI;
let page = 0; // 当前页面变量
let select = 'view'; // 'view'为浏览模式,'zoom'为放大模式
CGUI.onclick = function (e) { CGUI.onclick = function (e) {
try { try {
e.preventDefault(); e.preventDefault();
@ -8798,14 +8796,15 @@ core.plugin.animate = {
core.clearMap(ctx) core.clearMap(ctx)
core.restart(); core.restart();
} }
if (select === 'view') { if (core.domStyle.isVertical) {
// 浏览模式,点击切换页面 //竖屏
page = (page + 1) % main.core.ui.CG.UIMx.length; } else {
main.core.ui.CG.update(); if (px >= 33 && px <= 177 && py >= 342 && py <= 471) {
} else if (select === 'zoom') { //下翻页
// 放大模式,点击清空画布重绘当前页面 console.log(1);
core.clearMap(ctx); } else if (px >= 33 && px <= 177 && py >= 837 && py <= 975) {
main.core.ui.CG.drawUI(); console.log(2);
}
} }
} }
drawUI() { drawUI() {
@ -8822,25 +8821,29 @@ core.plugin.animate = {
core.fillRoundRect(ctx, 45 - 6, 45 - 6, 120 + 12, 80 + 12, 6, '#444444'); core.fillRoundRect(ctx, 45 - 6, 45 - 6, 120 + 12, 80 + 12, 6, '#444444');
core.strokeRoundRect(ctx, 45 - 12, 45 - 12, 120 + 24, 80 + 24, 12, "#444444", 3); core.strokeRoundRect(ctx, 45 - 12, 45 - 12, 120 + 24, 80 + 24, 12, "#444444", 3);
core.fillText(ctx, '离开', 100, 110, '#FFFFFF', core.ui._buildFont(33, true)); core.fillText(ctx, '离开', 100, 110, '#FFFFFF', core.ui._buildFont(33, true));
/*
// 添加向上翻页和向下翻页的按钮 // 添加向上翻页和向下翻页的按钮
core.fillRoundRect(ctx, 100 - 6, 100 - 6, 120 + 12, 120 + 12, 6, '#444444'); core.fillRoundRect(ctx, 45 - 6, 400 - 6, 120 + 12, 120 + 12, 6, '#444444');
core.strokeRoundRect(ctx, 100 - 12, 100 - 12, 120 + 24, 120 + 120, 12, "#444444", 3); core.strokeRoundRect(ctx, 45 - 12, 400 - 12, 120 + 24, 120 + 12, 12, "#444444", 3);
core.fillText(ctx, '向上翻页', 100, 250, '#FFFFFF', core.ui._buildFont(24, true)); core.fillRoundRect(ctx, 45 - 6, 1100 - 6, 120 + 12, 120 + 12, 6, '#444444');
core.fillText(ctx, '向下翻页', 100, 1500, '#FFFFFF', core.ui._buildFont(24, true)); core.strokeRoundRect(ctx, 45 - 12, 1100 - 12, 120 + 24, 120 + 12, 12, "#444444", 3);
core.fillText(ctx, '向上翻页', 100, 450, '#FFFFFF', core.ui._buildFont(24, true));
core.fillText(ctx, '向下翻页', 100, 1150, '#FFFFFF', core.ui._buildFont(24, true));
// 添加3*2个4:3的画框 // 添加3*2个4:3的画框
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
for (let j = 0; j < 2; j++) { for (let j = 0; j < 2; j++) {
core.strokeRect(ctx, 200 + j * 200, 300 + i * 300, 160, 120, "#FFFFFF", 2); core.fillRect(ctx, 200 + j * 500, 300 + i * 450, 480, 320, '#FFFFFF');
core.fillRect(ctx, 200 + j * 200, 300 + i * 300, 160, 120, '#FFFFFF'); core.strokeRect(ctx, 200 + j * 500, 300 + i * 450, 480, 320, "#444444", 2);
} }
} }
// 添加浏览模式和CG模式的字样 // 添加浏览模式和CG模式的字样
core.fillRoundRect(ctx, 350 - 6, 120 - 6, 120 + 12, 120 + 12, 6, '#444444');
core.strokeRoundRect(ctx, 350 - 12, 120 - 12, 120 + 24, 120 + 12, 12, "#444444", 3);
core.fillRoundRect(ctx, 950 - 6, 120 - 6, 120 + 12, 120 + 12, 6, '#444444');
core.strokeRoundRect(ctx, 950 - 12, 120 - 12, 120 + 24, 120 + 12, 12, "#444444", 3);
core.fillText(ctx, '浏览模式', 400, 180, '#FFFFFF', core.ui._buildFont(24, true)); core.fillText(ctx, '浏览模式', 400, 180, '#FFFFFF', core.ui._buildFont(24, true));
core.fillText(ctx, 'CG模式', 1200, 180, '#FFFFFF', core.ui._buildFont(24, true)); core.fillText(ctx, 'CG模式', 1000, 180, '#FFFFFF', core.ui._buildFont(24, true));
*/
} else { //横屏 } else { //横屏
core.fillRect(ctx, 0, 0, 2028, 1248, "#000000") //黑色背景 core.fillRect(ctx, 0, 0, 2028, 1248, "#000000") //黑色背景
ctx.globalAlpha = 0.5 //透明度 ctx.globalAlpha = 0.5 //透明度
@ -8862,9 +8865,9 @@ core.plugin.animate = {
// 添加3*2个4:3的画框 // 添加3*2个4:3的画框
for (let i = 0; i < 2; i++) { for (let i = 0; i < 2; i++) {
for (let j = 0; j < 6; j++) { for (let j = 0; j < 3; j++) {
core.fillRect(ctx, 200 + j * 300, 350 + i * 450, 240, 160, '#FFFFFF'); core.fillRect(ctx, 300 + j * 500, 300 + i * 450, 480, 320, '#FFFFFF');
core.strokeRect(ctx, 200 + j * 300, 350 + i * 450, 240, 160, "#444444", 2); core.strokeRect(ctx, 300 + j * 500, 300 + i * 450, 480, 320, "#444444", 2);
} }
} }