git auto update
This commit is contained in:
lhy6305
parent
dcdb9485c2
commit
b42932dfa0
@ -10,5 +10,5 @@ body{
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color:#000;
|
background-color: #888;
|
||||||
}
|
}
|
||||||
@ -5,5 +5,5 @@
|
|||||||
<script src="./js/0-jsloader.js"></script>
|
<script src="./js/0-jsloader.js"></script>
|
||||||
<script src="./js/0-jsloadentry.js"></script>
|
<script src="./js/0-jsloadentry.js"></script>
|
||||||
</head><body>
|
</head><body>
|
||||||
<div id="mainframe"><canvas id="stagecanvas"></canvas></div>
|
<div id="mainframe"><canvas id="maincanvas"></canvas></div>
|
||||||
</body></html>
|
</body></html>
|
||||||
273
js/libmain.js
273
js/libmain.js
@ -1,6 +1,6 @@
|
|||||||
//libmain.js
|
//libmain.js
|
||||||
|
|
||||||
(function() {
|
(async function() {
|
||||||
if(typeof PIXI!="object") {
|
if(typeof PIXI!="object") {
|
||||||
if(typeof loadfail=="function") {
|
if(typeof loadfail=="function") {
|
||||||
loadfail("libmain.js: object PIXI(type of "+(typeof PIXI)+") is not defined");
|
loadfail("libmain.js: object PIXI(type of "+(typeof PIXI)+") is not defined");
|
||||||
@ -11,39 +11,46 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
var main_stage= {};
|
var main_stage= {};
|
||||||
|
main_stage.settings= {};
|
||||||
|
main_stage.api= {};
|
||||||
|
|
||||||
|
/////////////////////////////////////// set default settings
|
||||||
|
|
||||||
|
main_stage.settings.fixed_ratio=16/9;
|
||||||
|
main_stage.settings.use_fixed_aspect_ratio=true;
|
||||||
|
|
||||||
|
/////////////////////////////////////// init canvas and frame
|
||||||
|
|
||||||
(function() { //init canvas and frame
|
|
||||||
console.log("[libmain] setting up basic pixi application...");
|
console.log("[libmain] setting up basic pixi application...");
|
||||||
// set up main canvas element
|
// set up main canvas element
|
||||||
main_stage.width=1920;
|
main_stage.mainframe=document.getElementById("mainframe");
|
||||||
main_stage.height=1080;
|
main_stage.canvas=document.getElementById("maincanvas");
|
||||||
var mainframe=document.getElementById("mainframe");
|
if(main_stage.mainframe===null) {
|
||||||
var canvas=document.getElementById("stagecanvas");
|
main_stage.mainframe=document.createElement("div");
|
||||||
if(mainframe===null) {
|
main_stage.mainframe.id="mainframe";
|
||||||
mainframe=document.createElement("div");
|
document.body.appendChild(main_stage.mainframe);
|
||||||
mainframe.id="mainframe";
|
|
||||||
document.body.appendChild(mainframe);
|
|
||||||
}
|
}
|
||||||
mainframe.style.display="inline-block";
|
main_stage.mainframe.style.display="inline-block";
|
||||||
mainframe.style.display="inline-block";
|
main_stage.mainframe.style.display="inline-block";
|
||||||
mainframe.style.zIndex=0;
|
main_stage.mainframe.style.zIndex=0;
|
||||||
mainframe.style.backgroundColor="#000000";
|
main_stage.mainframe.style.backgroundColor="#000000";
|
||||||
if(canvas===null) {
|
if(main_stage.canvas===null) {
|
||||||
canvas=document.createElement("canvas");
|
main_stage.canvas=document.createElement("canvas");
|
||||||
canvas.id="stagecanvas";
|
main_stage.canvas.id="maincanvas";
|
||||||
mainframe.appendChild(canvas);
|
main_stage.mainframe.appendChild(main_stage.canvas);
|
||||||
}
|
}
|
||||||
canvas.style.width="100%";
|
main_stage.canvas.style.width="100%";
|
||||||
canvas.style.height="100%";
|
main_stage.canvas.style.height="100%";
|
||||||
canvas.style.display="inline-block";
|
main_stage.canvas.style.display="inline-block";
|
||||||
canvas.style.position="absolute";
|
main_stage.canvas.style.position="absolute";
|
||||||
canvas.style.zIndex=1;
|
main_stage.canvas.style.zIndex=1;
|
||||||
main_stage.mainframe=mainframe;
|
|
||||||
main_stage.canvas=canvas;
|
|
||||||
|
|
||||||
// document resize handler
|
// document resize handler
|
||||||
main_stage.resize=function() {
|
main_stage.resize=function() {
|
||||||
var res=libutil.calcresize(document.body.clientWidth, document.body.clientHeight, main_stage.width, main_stage.height);
|
var res=[document.body.clientWidth, document.body.clientHeight, 0, 0];
|
||||||
|
if(main_stage.settings.use_fixed_aspect_ratio) {
|
||||||
|
res=libutil.calcresize(document.body.clientWidth, document.body.clientHeight, main_stage.settings.fixed_ratio);
|
||||||
|
}
|
||||||
mainframe.style.width=res[0]+"px";
|
mainframe.style.width=res[0]+"px";
|
||||||
mainframe.style.height=res[1]+"px";
|
mainframe.style.height=res[1]+"px";
|
||||||
mainframe.style.left=res[2]+"px";
|
mainframe.style.left=res[2]+"px";
|
||||||
@ -54,216 +61,24 @@
|
|||||||
main_stage.resize();
|
main_stage.resize();
|
||||||
|
|
||||||
// setup pixi application
|
// setup pixi application
|
||||||
if(window.suppgl) {
|
main_stage.renderer=await PIXI.autoDetectRenderer({
|
||||||
main_stage.renderer=new PIXI.Renderer({"view":canvas, "antialias":true, "transparent":true, "backgroundAlpha":0, "width":main_stage.width, "height":main_stage.height});
|
"preference":"webgpu",
|
||||||
} else {
|
"canvas":main_stage.canvas,
|
||||||
main_stage.renderer=new PIXI.CanvasRenderer({"view":canvas, "antialias":true, "transparent":true, "backgroundAlpha":0, "width":main_stage.width, "height":main_stage.height});
|
"antialias":true,
|
||||||
}
|
"backgroundAlpha":0,
|
||||||
|
"width":main_stage.width,
|
||||||
|
"height":main_stage.height
|
||||||
|
});
|
||||||
|
|
||||||
main_stage.stage=new PIXI.Container();
|
main_stage.stage=new PIXI.Container();
|
||||||
main_stage.stage.sortableChildren=true;
|
main_stage.stage.sortableChildren=true;
|
||||||
main_stage.render=function() {
|
main_stage.render=function() {
|
||||||
requestAnimationFrame(main_stage.render);
|
requestAnimationFrame(main_stage.render);
|
||||||
main_stage.renderer.render(main_stage.stage);
|
main_stage.renderer.render(main_stage.stage);
|
||||||
};
|
};
|
||||||
main_stage.render();
|
requestAnimationFrame(main_stage.render);
|
||||||
|
|
||||||
})();
|
/////////////////////////////////////// end of setup
|
||||||
|
|
||||||
(function() { //api functions
|
|
||||||
console.log("[libmain] initalizing api functions...");
|
|
||||||
|
|
||||||
main_stage.addVideoPIXI=function(pth, width, height, left, top) { //[DEPRECIATED] return=PIXI.Sprite
|
|
||||||
if(arguments.length<=1||isNaN(Number(width))) {
|
|
||||||
width=main_stage.renderer.screen.width;
|
|
||||||
}
|
|
||||||
if(arguments.length<=2||isNaN(Number(height))) {
|
|
||||||
height=main_stage.renderer.screen.height;
|
|
||||||
}
|
|
||||||
if(arguments.length<=3||isNaN(Number(left))) {
|
|
||||||
left=0;
|
|
||||||
}
|
|
||||||
if(arguments.length<=4||isNaN(Number(top))) {
|
|
||||||
top=0;
|
|
||||||
}
|
|
||||||
var tex=PIXI.Texture.from(pth);
|
|
||||||
var spr=PIXI.Sprite.from(tex);
|
|
||||||
spr.width=width;
|
|
||||||
spr.height=height;
|
|
||||||
spr.position.x=left;
|
|
||||||
spr.position.y=top;
|
|
||||||
spr.anchor.x=0;
|
|
||||||
spr.anchor.y=0;
|
|
||||||
main_stage.stage.addChild(spr);
|
|
||||||
tex.baseTexture.on("loaded", function() {
|
|
||||||
setTimeout(function() {
|
|
||||||
tex.baseTexture.resource.source.pause();
|
|
||||||
tex.baseTexture.resource.source.currentTime=0;
|
|
||||||
}, 0);
|
|
||||||
});
|
|
||||||
spr.play=function() {
|
|
||||||
tex.baseTexture.resource.source.play();
|
|
||||||
};
|
|
||||||
spr.pause=function() {
|
|
||||||
tex.baseTexture.resource.source.pause();
|
|
||||||
};
|
|
||||||
spr.stop=function() {
|
|
||||||
tex.baseTexture.resource.source.pause();
|
|
||||||
tex.baseTexture.resource.source.currentTime=0;
|
|
||||||
};
|
|
||||||
spr.seek=function(t) {
|
|
||||||
tex.baseTexture.resource.source.currentTime=t;
|
|
||||||
};
|
|
||||||
spr.mute=function(t) {
|
|
||||||
tex.baseTexture.resource.source.muted=t;
|
|
||||||
};
|
|
||||||
spr.loop=function(t) {
|
|
||||||
tex.baseTexture.resource.source.loop=t;
|
|
||||||
};
|
|
||||||
return spr;
|
|
||||||
};
|
|
||||||
|
|
||||||
main_stage.addVideo=function(pth, width, height, left, top) { //return=HTMLVideoElement
|
|
||||||
if(arguments.length<=1||isNaN(Number(width))) {
|
|
||||||
width=main_stage.renderer.screen.width;
|
|
||||||
}
|
|
||||||
if(arguments.length<=2||isNaN(Number(height))) {
|
|
||||||
height=main_stage.renderer.screen.height;
|
|
||||||
}
|
|
||||||
if(arguments.length<=3||isNaN(Number(left))) {
|
|
||||||
left=0;
|
|
||||||
}
|
|
||||||
if(arguments.length<=4||isNaN(Number(top))) {
|
|
||||||
top=0;
|
|
||||||
}
|
|
||||||
width*=100;
|
|
||||||
width/=main_stage.renderer.screen.width;
|
|
||||||
height*=100;
|
|
||||||
height/=main_stage.renderer.screen.height;
|
|
||||||
left*=100;
|
|
||||||
left/=main_stage.renderer.screen.width;
|
|
||||||
top*=100;
|
|
||||||
top/=main_stage.renderer.screen.height;
|
|
||||||
var elem=document.createElement("video");
|
|
||||||
elem.src=pth;
|
|
||||||
elem.load();
|
|
||||||
elem.style.pointerEvents="none";
|
|
||||||
elem.style.left=left+"%";
|
|
||||||
elem.style.top=top+"%";
|
|
||||||
elem.style.width=width+"%";
|
|
||||||
elem.style.height=height+"%";
|
|
||||||
elem.style.position="absolute";
|
|
||||||
elem.style.display="inline-block";
|
|
||||||
elem.style.zIndex=-1;
|
|
||||||
elem.destroy=function() {
|
|
||||||
elem.parentNode.removeChild(elem);
|
|
||||||
elem=null;
|
|
||||||
};
|
|
||||||
elem.setposi=function(x, y) {
|
|
||||||
x*=100;
|
|
||||||
x/=main_stage.renderer.screen.width;
|
|
||||||
y*=100;
|
|
||||||
y/=main_stage.renderer.screen.height;
|
|
||||||
elem.style.left=x+"%";
|
|
||||||
elem.style.top=y+"%";
|
|
||||||
};
|
|
||||||
main_stage.mainframe.appendChild(elem);
|
|
||||||
return elem;
|
|
||||||
};
|
|
||||||
|
|
||||||
main_stage.addAudio=function(pth) { //return=HTMLAudioElement
|
|
||||||
var elem=document.createElement("audio");
|
|
||||||
elem.style.display="none";
|
|
||||||
elem.src=pth;
|
|
||||||
elem.load();
|
|
||||||
elem.destroy=function() {
|
|
||||||
elem.parentNode.removeChild(elem);
|
|
||||||
elem=null;
|
|
||||||
};
|
|
||||||
main_stage.mainframe.appendChild(elem);
|
|
||||||
return elem;
|
|
||||||
};
|
|
||||||
|
|
||||||
main_stage.addText=function(text, left, top, cfg) { //return=PIXI.Sprite
|
|
||||||
if(arguments.length<=1||isNaN(Number(left))) {
|
|
||||||
left=0;
|
|
||||||
}
|
|
||||||
if(arguments.length<=2||isNaN(Number(top))) {
|
|
||||||
top=0;
|
|
||||||
}
|
|
||||||
if(arguments.length<=3||!(cfg instanceof Object)) {
|
|
||||||
cfg= {"fontFamily":"Arial", "fontSize":35, "fill":0xffffff, "align":"left"};
|
|
||||||
}
|
|
||||||
var spr=new PIXI.Text(text, cfg);
|
|
||||||
spr.position.x=left;
|
|
||||||
spr.position.y=top;
|
|
||||||
spr.anchor.x=0.5;
|
|
||||||
spr.anchor.y=0.5;
|
|
||||||
main_stage.stage.addChild(spr);
|
|
||||||
return spr;
|
|
||||||
};
|
|
||||||
|
|
||||||
main_stage.addShape=function(name, left, top, width, height) { //return=PIXI.Sprite
|
|
||||||
var shape=null;
|
|
||||||
for(var a=0; a<main_stage.shapes.length; a++) {
|
|
||||||
if(main_stage.shapes[a].name==name) {
|
|
||||||
shape=main_stage.shapes[a];
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if(shape===null) {
|
|
||||||
console.error("shape \""+name+"\" is not defined.");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if(arguments.length<=1||isNaN(Number(left))) {
|
|
||||||
left=0;
|
|
||||||
}
|
|
||||||
if(arguments.length<=2||isNaN(Number(top))) {
|
|
||||||
top=0;
|
|
||||||
}
|
|
||||||
if(arguments.length<=3||isNaN(Number(width))) {
|
|
||||||
width=shape.canvas.width;
|
|
||||||
}
|
|
||||||
if(arguments.length<=4||isNaN(Number(height))) {
|
|
||||||
height=shape.canvas.height;
|
|
||||||
}
|
|
||||||
var tex=PIXI.Texture.from(shape.canvas);
|
|
||||||
var spr=PIXI.Sprite.from(tex);
|
|
||||||
spr.width=width;
|
|
||||||
spr.height=height;
|
|
||||||
spr.position.x=left;
|
|
||||||
spr.position.y=top;
|
|
||||||
spr.anchor.x=0.5;
|
|
||||||
spr.anchor.y=0.5;
|
|
||||||
main_stage.stage.addChild(spr);
|
|
||||||
return spr;
|
|
||||||
};
|
|
||||||
|
|
||||||
main_stage.addImage=function(pth, left, top, width, height) { //return=PIXI.Sprite
|
|
||||||
var tex=PIXI.Texture.from(pth);
|
|
||||||
if(arguments.length<=1||isNaN(Number(left))) {
|
|
||||||
left=0;
|
|
||||||
}
|
|
||||||
if(arguments.length<=2||isNaN(Number(top))) {
|
|
||||||
top=0;
|
|
||||||
}
|
|
||||||
if(arguments.length<=3||isNaN(Number(width))) {
|
|
||||||
width=tex.width;
|
|
||||||
}
|
|
||||||
if(arguments.length<=4||isNaN(Number(height))) {
|
|
||||||
height=tex.height;
|
|
||||||
}
|
|
||||||
var spr=PIXI.Sprite.from(tex);
|
|
||||||
spr.width=width;
|
|
||||||
spr.height=height;
|
|
||||||
spr.position.x=left;
|
|
||||||
spr.position.y=top;
|
|
||||||
spr.anchor.x=0.5;
|
|
||||||
spr.anchor.y=0.5;
|
|
||||||
main_stage.stage.addChild(spr);
|
|
||||||
return spr;
|
|
||||||
};
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
||||||
window.main_stage=main_stage;
|
window.main_stage=main_stage;
|
||||||
console.log("[libmain] all components initialized successfully.");
|
console.log("[libmain] all components initialized successfully.");
|
||||||
|
|||||||
@ -18,37 +18,16 @@
|
|||||||
return Math.min(Math.max(val, min), max);
|
return Math.min(Math.max(val, min), max);
|
||||||
};
|
};
|
||||||
|
|
||||||
libutil.calcresize=function(cw, ch, ew, eh) { //return=[width,height,left,top]
|
libutil.calcresize=function(cw, ch, ratio) { // return=[width,height,left,top]
|
||||||
if(cw/ew<ch/eh) {
|
if(cw/ch<ratio) {
|
||||||
return [cw, cw/ew*eh, 0, (ch-cw/ew*eh)/2];
|
var h=cw/ratio;
|
||||||
|
return [cw, h, 0, (ch-h)/2];
|
||||||
} else {
|
} else {
|
||||||
return [ch/eh*ew, ch, (cw-ch/eh*ew)/2, 0];
|
var w=ch*ratio;
|
||||||
|
return [w, ch, (cw-w)/2, 0];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
libutil.encodeHtmlSpecChars=function(html) {
|
|
||||||
var elem=document.createElement("div");
|
|
||||||
var txt=document.createTextNode(html);
|
|
||||||
elem.appendChild(txt);
|
|
||||||
return elem.innerHTML;
|
|
||||||
};
|
|
||||||
|
|
||||||
libutil.decodeHtmlSpecChars=function(str) {
|
|
||||||
var elem=document.createElement("div");
|
|
||||||
elem.innerHTML=str;
|
|
||||||
return elem.innerText||elem.textContent;
|
|
||||||
};
|
|
||||||
|
|
||||||
libutil.preloadFont=function(name) {
|
|
||||||
var elem=document.createElement("div");
|
|
||||||
elem.style.fontFamily=name;
|
|
||||||
elem.innerHTML=String(Math.random());
|
|
||||||
document.body.appendChild(elem);
|
|
||||||
setTimeout(function() {
|
|
||||||
document.body.removeChild(elem);
|
|
||||||
}, 0);
|
|
||||||
};
|
|
||||||
|
|
||||||
window.libutil=libutil;
|
window.libutil=libutil;
|
||||||
|
|
||||||
})();
|
})();
|
||||||
Loading…
x
Reference in New Issue
Block a user