1 class WebBasic {
2
3 constructor( app ) {
4 this.app = app;
5 //check.　canvas contextに独自拡張する場所を設ける
6 if( ! this.app.cc.tmp ) {
7 this.app.cc.tmp = new Object();
8 }
9 this.cc = this.app.cc;
10 addEventListener( "resize", this.resizex.bind( this ), false );
11
12 let canvas = this.app.cc.canvas;
13 canvas.dataset.app = this;
14 let cstyle = window.getComputedStyle( canvas );
15
16 this.aboutScreen = {
17 //switch
18 widthAsPer : null, //1～100:on, 0:off
19 heightAsPer : null, //1～100:on, 0:off
20 stretchWidth : true, //true:stretch, false:off
21 stretchHeight : true, //true:stretch, false:off
22 keepAspectRatio : false,//true:keepAspectRatio, false:off
23
24 //infomation
25 initialWidth : canvas.width, //read only
26 initialHeight : canvas.height, //read only
27 initialAspectRatio : null, //read only
28
29 //内部使用
30 widthAsPer_bak : null,
31 heightAsPer_bak : null,
32 styleWidth_bak : null,
33 styleHeight_bak : null,
34 }
35
36 let bp = this.getBP();
37
38 let as = this.aboutScreen;
39 as.initialStyleWidth_inner = Number( cstyle.width.replace( /px/, "" ) );
40 as.initialStyleHeight_inner = Number( cstyle.height.replace( /px/, "" ) );
41 as.initialStyleWidth_outer = Number( cstyle.width.replace( /px/, "" ) );
42 as.initialStyleHeight_outer = Number( cstyle.height.replace( /px/, "" ) );
43 //check.　style.width,height は style.boxSizing により差異があるので埋める
44 if( cstyle.boxSizing == "border-box" ) {
45 as.initialStyleWidth_inner -= bp.L + bp.R;
46 as.initialStyleHeight_inner -= bp.T + bp.B;
47 } else {
48 //"content-box"
49 as.initialStyleWidth_outer += bp.L + bp.R;
50 as.initialStyleHeight_outer += bp.T + bp.B;
51 }
52
53 as.initialAspectRatio = as.initialStyleWidth_inner / as.initialStyleHeight_inner;
54
55 //canvasタグに設定されたdata属性を実行
56 if( typeof canvas.dataset.webbasic != "undefined" )
57 eval( canvas.dataset.webbasic.replace( /<BR>/gi, "\n" ) );
58
59 }//WebBasic constructor()
60
61 //BP is border and padding size at left, top, right, bottom
62 getBP() {
63 let cstyle = window.getComputedStyle( this.app.cc.canvas );
64
65 //style.borderWidth
66 let blw = Number( cstyle.borderLeftWidth.replace( /px/, "" ) );
67 let btw = Number( cstyle.borderTopWidth.replace( /px/, "" ) );
68 let brw = Number( cstyle.borderRightWidth.replace( /px/, "" ) );
69 let bbw = Number( cstyle.borderBottomWidth.replace( /px/, "" ) );
70
71 //style.padding
72 let pl = Number( cstyle.paddingLeft.replace( /px/, "" ) );
73 let pt = Number( cstyle.paddingTop.replace( /px/, "" ) );
74 let pr = Number( cstyle.paddingRight.replace( /px/, "" ) );
75 let pb = Number( cstyle.paddingBottom.replace( /px/, "" ) );
76
77 //ex. bpL is border,padding left
78
79 let bpL = blw + pl;
80 let bpT = btw + pt;
81 let bpR = brw + pr;
82 let bpB = bbw + pb;
83
84 return {
85 L : bpL,
86 T : bpT,
87 R : bpR,
88 B : bpB,
89 }
90 }
91
92 start() {
93 this.resizex();
94 this.app.start();
95 }
96
97 stop() {
98 this.app.stop();
99 }
100
101 resizex( e ) {
102 let canvas = this.app.cc.canvas;
103 let cstyle = window.getComputedStyle( canvas );
104 let isContentBox = cstyle.boxSizing == "content-box";
105 let isBorderBox = cstyle.boxSizing == "border-box";
106
107 //そのままの変数名だと長いので略語を定義
108
109 let ISWI = this.aboutScreen.initialStyleWidth_inner;
110 let ISHI = this.aboutScreen.initialStyleHeight_inner;
111 let ISWO = this.aboutScreen.initialStyleWidth_outer;
112 let ISHO = this.aboutScreen.initialStyleHeight_outer;
113
114 let IAR = this.aboutScreen.initialAspectRatio;
115 let SW = this.aboutScreen.stretchWidth;
116 let SH = this.aboutScreen.stretchHeight;
117 let IW = this.aboutScreen.initialWidth;
118 let IH = this.aboutScreen.initialHeight;
119
120 let WasP;
121 let HasP;
122 if( this.aboutScreen.maximize ) {
123 //最大化指定時
124 if( this.aboutScreen.widthAsPer_bak == null ) {
125 //現在値をバックアップ
126 this.aboutScreen.widthAsPer_bak = this.aboutScreen.widthAsPer;
127 this.aboutScreen.heightAsPer_bak = this.aboutScreen.heightAsPer;
128 this.aboutScreen.styleWidth_bak = canvas.style.width;
129 this.aboutScreen.styleHeight_bak = canvas.style.height;
130 }
131 this.aboutScreen.widthAsPer = 100;
132 this.aboutScreen.heightAsPer = 100;
133 } else if( this.aboutScreen.widthAsPer_bak != null ) {
134 //バックアップから復元
135 this.aboutScreen.widthAsPer = this.aboutScreen.widthAsPer_bak;
136 this.aboutScreen.heightAsPer = this.aboutScreen.heightAsPer_bak;
137 canvas.style.width = this.aboutScreen.styleWidth_bak;
138 canvas.style.height = this.aboutScreen.styleHeight_bak;
139 this.aboutScreen.widthAsPer_bak = null;
140 this.aboutScreen.heightAsPer_bak = null;
141 this.aboutScreen.styleWidth_bak = null;
142 this.aboutScreen.styleHeight_bak = null;
143 }
144 WasP = this.aboutScreen.widthAsPer;
145 HasP = this.aboutScreen.heightAsPer;
146
147 //見た目のサイズについて
148 if( isContentBox ) {
149 canvas.style.width = WasP ? WasP + "%" : ISWI + "px";
150 canvas.style.height = HasP ? HasP + "%" : ISHI + "px";
151 } else {
152 canvas.style.width = WasP ? WasP + "%" : ISWO + "px";
153 canvas.style.height = HasP ? HasP + "%" : ISHO + "px";
154 }
155
156 let bp = this.getBP(); //style.borderWidth + style.padding at L,T,R,B
157
158 let RWI, RHI; //ex. RWI is rect width inner
159 if( this.keepAspectRatio ) {
160 //縦横比を保持する場合
161
162 let rect = canvas.getBoundingClientRect();
163 RWI = rect.width - bp.L - bp.R;
164 RHI = rect.height - bp.T - bp.B;
165
166 let AR = RWI / RHI;
167
168 //見た目のサイズについて（再度）
169 if( AR <= IAR ) {
170 //左右にフィット
171 console.log( "左右にフィット" );
172 if( HasP && ! WasP ) {
173 if( isContentBox )
174 canvas.style.width = RHI / ISHI * ISWI + "px";
175 else
176 canvas.style.width = RHI / ISHI * ISWI + bp.L + bp.R + "px";
177 } else {
178 if( isContentBox )
179 canvas.style.height = RWI / IAR + "px";
180 else
181 canvas.style.height = RWI / IAR + bp.T + bp.B + "px";
182 }
183 } else {
184 //上下にフィット
185 console.log( "上下にフィット" );
186 if( WasP && ! HasP ) {
187 if( isContentBox )
188 canvas.style.height = RWI / ISWI * ISHI + "px";
189 else
190 canvas.style.height = RWI / ISWI * ISHI + bp.T + bp.B + "px";
191 } else {
192 if( isContentBox )
193 canvas.style.width = RHI * IAR + "px";
194 else
195 canvas.style.width = RHI * IAR + bp.L + bp.R + "px";
196 }
197 }
198
199 //解像度について
200 rect = canvas.getBoundingClientRect();
201 RWI = rect.width - bp.L - bp.R;
202 RHI = rect.height - bp.T - bp.B;
203
204 } else {
205
206 //縦横比を保持しない場合
207
208 //解像度について
209 let rect = canvas.getBoundingClientRect();
210 RWI = rect.width - bp.L - bp.R;
211 RHI = rect.height - bp.T - bp.B;
212 }
213 canvas.width = SW ? IW : RWI;
214 canvas.height = SH ? IH : RHI;
215
216 //canvasの最大サイズを得るには tmp.width, height を使用すること。理由は下記※A
217 this.app.cc.tmp.width = canvas.width;
218 this.app.cc.tmp.height = canvas.height;
219
220 //canvas.width, height はこのif文内に入ると意図した値を返さなくなる。※A
221 if( this.pixelWidth != 1 || this.pixelHeight != 1 ) {
222 //ドットを粗くする（モザイク）
223 canvas.width /= this.pixelWidth;
224 canvas.height /= this.pixelHeight;
225 this.app.cc.scale( 1 / this.pixelWidth, 1 / this.pixelHeight );
226 }
227
228 if( ! this.antiAliasing ) {
229 //ドット間のアンチエイリアシングをオフにする
230 canvas.style.imageRendering = "pixelated";
231 canvas.style.imageRendering = "optimizeSpeed";
232 } else {
233 //ドット間のアンチエイリアシングをオンにする
234 canvas.style.imageRendering = null;
235 }
236
237 this.app.draw( this.app.cc );
238
239 }//WebBasic resizex()
240
241 }//WebBasic