Skip to content
This repository was archived by the owner on Feb 13, 2024. It is now read-only.

Commit 1a8db01

Browse files
xiazeyuxiazeyu
committed
feat: TEST Create DOM use js
1 parent 6854707 commit 1a8db01

File tree

12 files changed

+131
-166
lines changed

12 files changed

+131
-166
lines changed

‎dev.html‎

Lines changed: 1 addition & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,61 +7,6 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
</head>
99
<body>
10-
<div id="app">
11-
<canvas id="live2dcanvas" width="1" height="2" style="border:dashed 1px #CCC"></canvas>
12-
</div>
13-
<style>
14-
#live2dcanvas{
15-
width: 3;
16-
height: 4;
17-
position: fixed;
18-
opacity: 1;
19-
z-index: 999;
20-
pointer-events: none;
21-
}
22-
</style>
23-
width: <input type="text" id="twidth" value="600"><br>
24-
height: <input type="text" id="theight" value="800"><br>
25-
modelName: <input type="text" id="tmodelName" value="shizuku"><br>
26-
headPos: <input type="text" id="theadPos" value="0.5"><br>
27-
scaling: <input type="text" id="tscaling" value="2"><br>
28-
opacityDefault: <input type="text" id="topacityDefault" value="0.7"><br>
29-
opacityHover: <input type="text" id="topacityHover" value="1"><br>
30-
<input type="button" value="GO!" onclick="javascript:myfunc()">
31-
<script src="dev/clL2D.min.js">
32-
<script language="JAVASCRIPT">
33-
function myfunc (){
34-
// 获取输入数值
35-
var width = document.getElementById("twidth").value;
36-
var height = document.getElementById("theight").value;
37-
var modelName = document.getElementById("tmodelName").value;
38-
var headPos = document.getElementById("theadPos").value;
39-
var scaling = document.getElementById("tscaling").value;
40-
var opacityDefault = document.getElementById("topacityDefault").value;
41-
var opacityHover = document.getElementById("topacityHover").value;
42-
var modelUrl="https://raw.githubusercontent.com/EYHN/hexo-helper-live2d/master/assets/name/name.model.json";
43-
// 初始化canvas
44-
document.getElementById("live2dcanvas").width = width * scaling;
45-
document.getElementById("live2dcanvas").height = height * scaling;
46-
document.getElementById("live2dcanvas").style.width = width + 'px';
47-
document.getElementById("live2dcanvas").style.height = height + 'px';
48-
document.getElementById("live2dcanvas").style.opacity = opacityDefault;
49-
// 初始化绘制
50-
modelUrl = modelUrl.replace(/name/g, modelName);
51-
console.log(modelUrl);
52-
loadlive2d("live2dcanvas", modelUrl, headPos, opacityDefault, opacityHover);
53-
54-
canvas = document.getElementById('live2dcanvas');
55-
// DEBUG Area Start
56-
57-
var twidth = canvas.width;
58-
var theight = canvas.height;
59-
var tsWidth = parseInt(canvas.style.width);
60-
var tsHeight = parseInt(canvas.style.height);
61-
62-
// DEBUG Area Ends Here
63-
64-
}
65-
</script>
10+
<script src="dev/clL2D.min.js"></script>
6611
</body>
6712
</html>

‎src/_canvasManager.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/_tmplate/_innerHTML.html‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎src/_webglcontext.js‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/_cLive2DApp.js‎ renamed to ‎src/cLive2DApp.js‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/**
2+
* @description The main part of live2d-widget
3+
*/
4+
5+
16
/*import {
27
UtSystem,
38
UtDebug,
@@ -16,12 +21,10 @@
1621
ParamID
1722
} from './lib/live2d.min';*//*
1823
import './lib/live2d.min.js';
19-
import { createCanvas, initCanvas } from "./lib/canvasManager";
2024
import { device } from 'current-device';
2125
import { L2DTargetPoint, L2DViewMatrix, L2DMatrix44 } from "./lib/Live2DFramework";
2226
import cManager from "./cManager";
2327
import { MatrixStack } from "./utils/MatrixStack";
24-
import { setContext } from "./lib/webGLContext";
2528
import { cDefine } from "./cDefine";
2629
2730
const live2DMgr = new cManager();
@@ -40,23 +43,37 @@ let opacityDefault = 0.7;
4043
let opacityHover = 1;
4144
*/
4245

43-
import { config }from './config/configMgr.js';
46+
import { config } from './config/configMgr';
47+
import { createCanvas, setCurrWebGL, getCurrWebGL } from './elementManager';
48+
49+
/**
50+
* Main function of live2d-widget
51+
* @return {null}
52+
*/
4453

4554
export default () => {
46-
console.log('config:');
47-
console.log(config);
48-
/*
49-
headPos = typeof iHeadPos === 'undefined' ? 0.5 : iHeadPos;
50-
opacityDefault = typeof iOpacityDefault === 'undefined' ? 0.7 : iOpacityDefault;
51-
opacityHover = typeof iOpacityHover === 'undefined' ? 1 : iOpacityHover;
52-
initSettings();
53-
createCanvas(iID);
54-
initCanvas(iID);
55-
init(iModelUrl);*/
55+
56+
createCanvas();
57+
// initL2D();
58+
5659
}
5760

5861

59-
function init(modelUrl) {
62+
function initCanvas(){/*
63+
canvas = document.getElementById(canvasId);
64+
if (canvas.addEventListener) {
65+
window.addEventListener("click", mouseEvent);
66+
window.addEventListener("mousedown", mouseEvent);
67+
window.addEventListener("mousemove", mouseEvent);
68+
window.addEventListener("mouseup", mouseEvent);
69+
document.addEventListener("mouseleave", mouseEvent);
70+
window.addEventListener("touchstart", touchEvent);
71+
window.addEventListener("touchend", touchEvent);
72+
window.addEventListener("touchmove", touchEvent);
73+
}*/
74+
}
75+
76+
function initL2D() {
6077
// 此处获取的是canvas的大小 即绘制大小，与实际显示大小无关
6178
let width = canvas.width;
6279
let height = canvas.height;
@@ -401,16 +418,3 @@ function transformScreenY(deviceY)
401418
{
402419
return deviceToScreen.transformY(deviceY);
403420
}
404-
405-
function getWebGLContext()
406-
{
407-
var NAMES = [ "webgl" , "experimental-webgl" , "webkit-3d" , "moz-webgl"];
408-
for( var i = 0; i < NAMES.length; i++ ){
409-
try{
410-
var ctx = canvas.getContext(NAMES[i], {premultipliedAlpha : true});
411-
if(ctx) return ctx;
412-
}
413-
catch(e){}
414-
}
415-
return null;
416-
};

‎src/config/configMgr.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ const defaultConfig = {
5252
},
5353
dev: {
5454
log: false,
55+
border: false,
5556
mouseLog: false,
5657
mouseFunc: (x, y, ix, iy) => {console.log(`MouseFunc: ${x},${y}; ${ix}, ${iy}`);},
5758
},
@@ -61,6 +62,7 @@ const defaultConfig = {
6162
/**
6263
* Apply users function, make the full settings
6364
* @param {Object} [userConfig] User's custom config
65+
* @return {null}
6466
*/
6567

6668
function configApplyer(userConfig){

‎src/config/configValidater.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const configPropTypes = {
4848
}),
4949
dev: PropTypes.shape({
5050
log: PropTypes.bool,
51+
border: PropTypes.bool,
5152
mouseLog: PropTypes.bool,
5253
mouseFunc: PropTypes.func,
5354
}),
@@ -58,6 +59,7 @@ const configPropTypes = {
5859
* @param {Object} [userConfig] User's config
5960
* @description Only console.warn
6061
* @deprecated Only respond one time when you call it, won't be built in production.
62+
* @return {null}
6163
*/
6264

6365
function configValidater(userConfig){

‎src/elementManager.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* @description The container and manager for all the DOM and WebGL emelents.
3+
*/
4+
5+
6+
import { config } from './config/configMgr';
7+
import { htmlTemplate } from './tmplate/innerHTML';
8+
9+
let currWebGL = undefined;
10+
let currCanvas;
11+
12+
function createCanvas(){
13+
14+
let newElem = document.createElement('div');
15+
newElem.id = config.name.div;
16+
newElem.innerHTML = htmlTemplate(config);
17+
document.body.appendChild(newElem);
18+
19+
}
20+
21+
function getCurrCanvas(){
22+
return currCanvas;
23+
}
24+
25+
/**
26+
* set the current WebGL element to the container
27+
* @param {RenderingContext } e The WebGL element to be set
28+
* @return {null}
29+
*/
30+
31+
function setCurrWebGL(e){
32+
currWebGL = e;
33+
}
34+
35+
/**
36+
* get the current WebGL element in the container
37+
* @return {RenderingContext} The current WebGL element
38+
*/
39+
40+
function getCurrWebGL(){
41+
return currWebGL;
42+
}
43+
44+
function getWebGLContext()
45+
{
46+
var NAMES = [ "webgl" , "experimental-webgl" , "webkit-3d" , "moz-webgl"];
47+
for( var i = 0; i < NAMES.length; i++ ){
48+
try{
49+
var ctx = canvas.getContext(NAMES[i], {premultipliedAlpha : true});
50+
if(ctx) return ctx;
51+
}
52+
catch(e){}
53+
}
54+
return null;
55+
};
56+
57+
58+
export{
59+
createCanvas,
60+
getCurrCanvas,
61+
setCurrWebGL,
62+
getCurrWebGL,
63+
}

‎src/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
import device from 'current-device';
1515
import { config, configApplyer }from './config/configMgr';
1616

17+
if (process.env.NODE_ENV === 'development'){
18+
console.log('--- --- --- --- ---\nHey that, notice that you are now in DEV MODE.\n--- --- --- --- ---');
19+
}
20+
1721
/**
1822
* The public entry point
1923
* @param {Object} [userConfig] User's custom config 用户自定义设置
@@ -37,27 +41,23 @@ import { config, configApplyer }from './config/configMgr';
3741
* @param {Number} [userConfig.react.opacityOnHover = 0.2] OnHover opacity 鼠标移上透明度
3842
* @param {Function} [userConfig.react.myFunc = func(e)] Custom event handler, won't override main handler, will reveice the event type. 自定义事件接收器
3943
* @param {Boolean} [userConfig.dev.log = false] Whether to show log 显示日志
44+
* @param {Boolean} [userConfig.dev.border = false] Whether to show border around the canvas 在canvas周围显示边界
4045
* @param {Boolean} [userConfig.dev.mouseLog = false] Whether to show mouse log (tons of log), only work when dev.log is enabled 显示鼠标移动
4146
* @param {Function} [userConfig.dev.mouseFunc = func(x, y, ix, iy)] Custom logger, only work when dev.log is enabled, will receive (x, y, ix, iy), which presents the actucally position and vitural position 自定义鼠标移动处理函数
47+
* @return {null}
4248
*/
4349

4450
function init(userConfig){
4551

4652
userConfig = typeof userConfig === 'undefined' ? {} : userConfig;
4753

48-
if (process.env.NODE_ENV === 'development'){
49-
console.log('--- --- --- --- ---');
50-
console.log('Hey that, notice that you are now in DEV MODE.');
51-
console.log('--- --- --- --- ---');
52-
}
53-
5454
configApplyer(userConfig);
5555

5656
if((!config.mobile.show)&&(device.mobile())){
5757
return;
5858
}
5959

60-
import(/* webpackMode: "lazy" */ './_cLive2DApp').then(f => {
60+
import(/* webpackMode: "lazy" */ './cLive2DApp').then(f => {
6161
f.default();
6262
}).catch(err => {
6363
console.error(err);

‎src/tmplate/innerHTML.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
function htmlTemplate(config){
2+
return `<canvas id="${config.name.canvas}" width="${config.display.widget * config.display.AA}" height="${config.display.height * config.display.AA}"></canvas>
3+
<style>
4+
#${config.name.canvas}{
5+
position: fixed;
6+
width: ${config.display.widget};
7+
height: ${config.display.height};
8+
opacity: ${config.react.opacityDefault};
9+
${config.display.position}: ${config.display.hOffset};
10+
bottom: ${config.display.vOffset};
11+
z-index: 99999;
12+
pointer-events: none;
13+
${config.dev.border ? 'border: dashed 1px #CCC;' : ''}
14+
}
15+
</style>`
16+
}
17+
18+
export {
19+
htmlTemplate,
20+
}

0 commit comments

Comments
 (0)