JavaScriptを色々あれこれしようとするがひたすら失敗を繰り返している
リビジョン | 38 (tree) |
---|---|
日時 | 2016-12-02 22:52:57 |
作者 | takoyaki_umaaaa |
(メッセージはありません)
@@ -35,6 +35,7 @@ | ||
35 | 35 | |
36 | 36 | #apparea{ |
37 | 37 | display: block; |
38 | + position: relative; | |
38 | 39 | width: 100%; height: 100%; |
39 | 40 | border: none; |
40 | 41 | margin: 0; padding: 0; |
@@ -44,6 +45,7 @@ | ||
44 | 45 | /* キャンバス要素の定義 */ |
45 | 46 | #DispField{ |
46 | 47 | display:block; |
48 | + position:relative; | |
47 | 49 | width:400px; height:300px; |
48 | 50 | border: none; |
49 | 51 | margin: 0; padding: 0; |
@@ -52,6 +54,7 @@ | ||
52 | 54 | |
53 | 55 | #FrameArea{ |
54 | 56 | display:block; |
57 | + position: absolute; | |
55 | 58 | width: 100%; height: 100%; |
56 | 59 | border: 1px solid black; |
57 | 60 | margin: 0; padding: 0; |
@@ -85,17 +88,14 @@ | ||
85 | 88 | display: inline-block; |
86 | 89 | position: absolute; |
87 | 90 | left:0px; top:310px; |
88 | - margin: 0px; | |
89 | - padding: 5px; | |
91 | + width: 195px; /* (5+25+5) * 5 + (5+5) */ | |
92 | + height: 55px; | |
93 | + margin: 0px; padding: 5px; | |
90 | 94 | background-color: rgba(205,133,63,0.6); |
91 | - border: 1px solid black; | |
95 | + border: 2px solid gray; | |
92 | 96 | border-radius: 4px; |
93 | 97 | box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21); |
94 | 98 | } |
95 | - .palgrouphorizon { | |
96 | - width: 195px; /* (5+25+5) * 5 + (5+5) */ | |
97 | - height: 55px; | |
98 | - } | |
99 | 99 | .pallegend { |
100 | 100 | background-color: transparent; |
101 | 101 | font-weight: bold; |
@@ -161,7 +161,7 @@ | ||
161 | 161 | } |
162 | 162 | </style> |
163 | 163 | |
164 | - <fieldset class="palgroup palgrouphorizon" data-objid="palgroup0" title="背景の色や画像を設定するパレットです"> | |
164 | + <fieldset class="palgroup" data-objid="palgroup0" title="背景の色や画像を設定するパレットです"> | |
165 | 165 | <legend class="pallegend"> Background Palette </legend> |
166 | 166 | <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div> |
167 | 167 | <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div> |
@@ -171,7 +171,7 @@ | ||
171 | 171 | </fieldset> |
172 | 172 | <br /> |
173 | 173 | |
174 | - <fieldset class="palgroup palgrouphorizon" data-objid="palgroup1" title="テキストの色を設定するパレットです"> | |
174 | + <fieldset class="palgroup" data-objid="palgroup1" title="テキストの色を設定するパレットです"> | |
175 | 175 | <legend class="pallegend"> Text Color Palette </legend> |
176 | 176 | <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div> |
177 | 177 | <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div> |
@@ -182,7 +182,7 @@ | ||
182 | 182 | |
183 | 183 | <br /> |
184 | 184 | |
185 | - <fieldset class="palgroup palgrouphorizon" data-objid="palgroup2" title="動きを設定するパレットです"> | |
185 | + <fieldset class="palgroup" data-objid="palgroup2" title="動きを設定するパレットです"> | |
186 | 186 | <legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend> |
187 | 187 | <div class="palact palact0" data-objid="palact0" data-palid="0"></div> |
188 | 188 | <div class="palact palact1" data-objid="palact1" data-palid="1"></div> |
@@ -231,7 +231,7 @@ | ||
231 | 231 | result = e.classList.contains(className); |
232 | 232 | if (true == result) break; |
233 | 233 | |
234 | - e = e.parent; | |
234 | + e = e.parentElement; | |
235 | 235 | } while (null != e); |
236 | 236 | } |
237 | 237 | return e; |
@@ -377,18 +377,19 @@ | ||
377 | 377 | // 引数のcallbackを1回呼び出します |
378 | 378 | // callback: function callback(time) |
379 | 379 | requestRenderFunc(callback) { |
380 | - console.log('Request render function = ' + (callback ? callback.name : 'null')); | |
380 | +// console.log('Request render function = ' + (callback ? callback.name : 'null')); | |
381 | 381 | if (null != callback){ |
382 | 382 | this.renderQue.enqueue(callback); |
383 | 383 | |
384 | 384 | // 描画loop |
385 | - (function renderloop(time) { | |
385 | + let loopfunc = function renderloop(time) { | |
386 | 386 | if (0 < this.renderQue.size()) { |
387 | 387 | this.renderQue.dequeue()(time); |
388 | - console.log('render func size=' + this.renderQue.size()); | |
388 | +// console.log('render func size=' + this.renderQue.size()); | |
389 | 389 | requestAnimationFrame(renderloop.bind(this)); |
390 | 390 | } |
391 | - }.call(this,window.performance.now())); | |
391 | + } | |
392 | + loopfunc.call(this, window.performance.now()); | |
392 | 393 | } |
393 | 394 | } |
394 | 395 | } |
@@ -216,9 +216,9 @@ | ||
216 | 216 | this.width = parseInt(ele.style.width); |
217 | 217 | this.height = parseInt(ele.style.height); |
218 | 218 | this.ObjID = ele.dataset.objid; |
219 | - this.degree = ele.dataset.degree; | |
220 | - this.mirrorLRdeg = ele.dataset.mirrorlr; | |
221 | - this.mirrorUDdeg = ele.dataset.mirrorud; | |
219 | + this.degree = parseFloat(ele.dataset.degree); | |
220 | + this.mirrorLRdeg = parseInt(ele.dataset.mirrorlr); | |
221 | + this.mirrorUDdeg = parseInt(ele.dataset.mirrorud); | |
222 | 222 | this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false); |
223 | 223 | |
224 | 224 | if( ele.children.length < 1 ){ |
@@ -286,12 +286,12 @@ | ||
286 | 286 | this.DOMbase.style.transform = 'rotateY(' + this.mirrorLRdeg + 'deg) rotateX(' + this.mirrorUDdeg + 'deg) rotateZ(' + this.degree + 'deg);'; |
287 | 287 | } |
288 | 288 | mirrorLR() { |
289 | - this.mirrorLRdeg = (0 < this.mirrorLRdeg) ? 0 : 180; | |
289 | + this.mirrorLRdeg = (0 == this.mirrorLRdeg) ? 180 : 0; | |
290 | 290 | this.DOMbase.dataset.mirrorlr = this.mirrorLRdeg; |
291 | 291 | window.renderLoop.requestRenderFunc(this.renderrollbox.bind(this)); |
292 | 292 | } |
293 | 293 | mirrorUD() { |
294 | - this.mirrorUDdeg = (0 < this.mirrorUDdeg) ? 0 : 180; | |
294 | + this.mirrorUDdeg = (0 == this.mirrorUDdeg) ? 180 : 0; | |
295 | 295 | this.DOMbase.dataset.mirrorud = this.mirrorUDdeg; |
296 | 296 | window.renderLoop.requestRenderFunc(this.renderrollbox.bind(this)); |
297 | 297 | } |
@@ -35,6 +35,7 @@ | ||
35 | 35 | |
36 | 36 | #apparea{ |
37 | 37 | display: block; |
38 | + position: relative; | |
38 | 39 | width: 100%; height: 100%; |
39 | 40 | border: none; |
40 | 41 | margin: 0; padding: 0; |
@@ -44,6 +45,7 @@ | ||
44 | 45 | /* キャンバス要素の定義 */ |
45 | 46 | #DispField{ |
46 | 47 | display:block; |
48 | + position:relative; | |
47 | 49 | width:400px; height:300px; |
48 | 50 | border: none; |
49 | 51 | margin: 0; padding: 0; |
@@ -52,6 +54,7 @@ | ||
52 | 54 | |
53 | 55 | #FrameArea{ |
54 | 56 | display:block; |
57 | + position: absolute; | |
55 | 58 | width: 100%; height: 100%; |
56 | 59 | border: 1px solid black; |
57 | 60 | margin: 0; padding: 0; |
@@ -85,17 +88,14 @@ | ||
85 | 88 | display: inline-block; |
86 | 89 | position: absolute; |
87 | 90 | left:0px; top:310px; |
88 | - margin: 0px; | |
89 | - padding: 5px; | |
91 | + width: 195px; /* (5+25+5) * 5 + (5+5) */ | |
92 | + height: 55px; | |
93 | + margin: 0px; padding: 5px; | |
90 | 94 | background-color: rgba(205,133,63,0.6); |
91 | - border: 1px solid black; | |
95 | + border: 2px solid gray; | |
92 | 96 | border-radius: 4px; |
93 | 97 | box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21); |
94 | 98 | } |
95 | - .palgrouphorizon { | |
96 | - width: 195px; /* (5+25+5) * 5 + (5+5) */ | |
97 | - height: 55px; | |
98 | - } | |
99 | 99 | .pallegend { |
100 | 100 | background-color: transparent; |
101 | 101 | font-weight: bold; |
@@ -161,7 +161,7 @@ | ||
161 | 161 | } |
162 | 162 | </style> |
163 | 163 | |
164 | - <fieldset class="palgroup palgrouphorizon" data-objid="palgroup0" title="背景の色や画像を設定するパレットです"> | |
164 | + <fieldset class="palgroup" data-objid="palgroup0" title="背景の色や画像を設定するパレットです"> | |
165 | 165 | <legend class="pallegend"> Background Palette </legend> |
166 | 166 | <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div> |
167 | 167 | <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div> |
@@ -171,7 +171,7 @@ | ||
171 | 171 | </fieldset> |
172 | 172 | <br /> |
173 | 173 | |
174 | - <fieldset class="palgroup palgrouphorizon" data-objid="palgroup1" title="テキストの色を設定するパレットです"> | |
174 | + <fieldset class="palgroup" data-objid="palgroup1" title="テキストの色を設定するパレットです"> | |
175 | 175 | <legend class="pallegend"> Text Color Palette </legend> |
176 | 176 | <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div> |
177 | 177 | <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div> |
@@ -182,7 +182,7 @@ | ||
182 | 182 | |
183 | 183 | <br /> |
184 | 184 | |
185 | - <fieldset class="palgroup palgrouphorizon" data-objid="palgroup2" title="動きを設定するパレットです"> | |
185 | + <fieldset class="palgroup" data-objid="palgroup2" title="動きを設定するパレットです"> | |
186 | 186 | <legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend> |
187 | 187 | <div class="palact palact0" data-objid="palact0" data-palid="0"></div> |
188 | 188 | <div class="palact palact1" data-objid="palact1" data-palid="1"></div> |
@@ -231,7 +231,7 @@ | ||
231 | 231 | result = e.classList.contains(className); |
232 | 232 | if (true == result) break; |
233 | 233 | |
234 | - e = e.parent; | |
234 | + e = e.parentElement; | |
235 | 235 | } while (null != e); |
236 | 236 | } |
237 | 237 | return e; |
@@ -377,18 +377,19 @@ | ||
377 | 377 | // 引数のcallbackを1回呼び出します |
378 | 378 | // callback: function callback(time) |
379 | 379 | requestRenderFunc(callback) { |
380 | - console.log('Request render function = ' + (callback ? callback.name : 'null')); | |
380 | +// console.log('Request render function = ' + (callback ? callback.name : 'null')); | |
381 | 381 | if (null != callback){ |
382 | 382 | this.renderQue.enqueue(callback); |
383 | 383 | |
384 | 384 | // 描画loop |
385 | - (function renderloop(time) { | |
385 | + let loopfunc = function renderloop(time) { | |
386 | 386 | if (0 < this.renderQue.size()) { |
387 | 387 | this.renderQue.dequeue()(time); |
388 | - console.log('render func size=' + this.renderQue.size()); | |
388 | +// console.log('render func size=' + this.renderQue.size()); | |
389 | 389 | requestAnimationFrame(renderloop.bind(this)); |
390 | 390 | } |
391 | - }.call(this,window.performance.now())); | |
391 | + } | |
392 | + loopfunc.call(this, window.performance.now()); | |
392 | 393 | } |
393 | 394 | } |
394 | 395 | } |
@@ -216,9 +216,9 @@ | ||
216 | 216 | this.width = parseInt(ele.style.width); |
217 | 217 | this.height = parseInt(ele.style.height); |
218 | 218 | this.ObjID = ele.dataset.objid; |
219 | - this.degree = ele.dataset.degree; | |
220 | - this.mirrorLRdeg = ele.dataset.mirrorlr; | |
221 | - this.mirrorUDdeg = ele.dataset.mirrorud; | |
219 | + this.degree = parseFloat(ele.dataset.degree); | |
220 | + this.mirrorLRdeg = parseInt(ele.dataset.mirrorlr); | |
221 | + this.mirrorUDdeg = parseInt(ele.dataset.mirrorud); | |
222 | 222 | this.DOMbase.addEventListener('mousedown', this.onMouseDown.bind(this), false); |
223 | 223 | |
224 | 224 | if( ele.children.length < 1 ){ |
@@ -286,12 +286,12 @@ | ||
286 | 286 | this.DOMbase.style.transform = 'rotateY(' + this.mirrorLRdeg + 'deg) rotateX(' + this.mirrorUDdeg + 'deg) rotateZ(' + this.degree + 'deg);'; |
287 | 287 | } |
288 | 288 | mirrorLR() { |
289 | - this.mirrorLRdeg = (0 < this.mirrorLRdeg) ? 0 : 180; | |
289 | + this.mirrorLRdeg = (0 == this.mirrorLRdeg) ? 180 : 0; | |
290 | 290 | this.DOMbase.dataset.mirrorlr = this.mirrorLRdeg; |
291 | 291 | window.renderLoop.requestRenderFunc(this.renderrollbox.bind(this)); |
292 | 292 | } |
293 | 293 | mirrorUD() { |
294 | - this.mirrorUDdeg = (0 < this.mirrorUDdeg) ? 0 : 180; | |
294 | + this.mirrorUDdeg = (0 == this.mirrorUDdeg) ? 180 : 0; | |
295 | 295 | this.DOMbase.dataset.mirrorud = this.mirrorUDdeg; |
296 | 296 | window.renderLoop.requestRenderFunc(this.renderrollbox.bind(this)); |
297 | 297 | } |