OSDN -- Develop and Download Open Source Software
  • R/O
  • SSH
  • HTTPS

Commit

Frequently used words (click to add to your profile)

javac++androidlinuxc#windowsobjective-ccocoa誰得qtpythonphprubygameguibathyscaphec計画中(planning stage)翻訳omegatframeworktwitterdomtestvb.netdirectxゲームエンジンbtronarduinopreviewer

JavaScriptを色々あれこれしようとするがひたすら失敗を繰り返している


Commit MetaInfo

Revision39 (tree)
Time2016-12-03 19:45:54
Authortakoyaki_umaaaa

Log Message

・画像反転にマウス入力が追従するように対応
・ActionPaletteのサンプルをいくつか作成

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 39)
@@ -25,7 +25,12 @@
2525 font-weight: normal;
2626 }
2727
28-
28+ .dialogframe {
29+ display: block;
30+ position: fixed;
31+ left: 0px; top: 0px;
32+ width: 300px; height: 250px;
33+ }
2934 /*
3035 [data-objid] {
3136 transition: transform 2s linear 0s;
@@ -51,6 +56,9 @@
5156 margin: 0; padding: 0;
5257 background-color: transparent;
5358 }
59+ .DispField {
60+ overflow: hidden;
61+ }
5462
5563 #FrameArea{
5664 display:block;
@@ -59,6 +67,7 @@
5967 border: 1px solid black;
6068 margin: 0; padding: 0;
6169 background-color: white;
70+ transform-style: inherit;
6271 }
6372 .FrameArea {
6473
@@ -69,7 +78,10 @@
6978 .DispObj {
7079 display: inline-block;
7180 position: absolute;
72- marginj:0; padding:0;
81+ margin:0; padding:0;
82+ perspective: 800px;
83+ transform-style: preserve-3d;
84+ backface-visibility: visible;
7385 }
7486 .DispObj {
7587 left:0; top:0;
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 39)
@@ -40,9 +40,34 @@
4040 }
4141 return (theta * 360 / (2 * Math.PI) - 90); // atan2は X軸基準での角度を出すため、画面表示系の Y軸基準に合わせるため 90を減算する
4242 };
43+function radToDeg(rad) {
44+ return parseFloat(rad) / (Math.PI / 180);
45+};
46+function degToRad(deg) {
47+ return parseFloat(deg) * (Math.PI / 180);
48+};
49+function rotateY(
50+ x, // 回転するY軸の座標
51+ degree, // 角度
52+ inputX, // 回転対象座標X
53+ inputY // 回転対象座標Y
54+) {
55+ let radius = parseFloat(inputX) - parseFloat(x);
56+ let resultX = radius * Math.cos(degToRad(degree)) + parseFloat(x);
57+ return [resultX,parseFloat(inputY)];
58+};
59+function rotateX(
60+ y, // 回転するX軸の座標
61+ degree, // 角度
62+ inputX, // 回転対象座標X
63+ inputY // 回転対象座標Y
64+) {
65+ let radius = parseFloat(inputY) - parseFloat(y);
66+ let resultY = radius * Math.cos(degToRad(degree)) + parseFloat(y);
67+ return [parseFloat(inputX),resultY];
68+}
4369
4470
45-
4671 // Image fileを読み込み、その内容を対象CSSに設定
4772 // CSSには "'cssstr1' + fileBlob + 'cssstr2'" が設定される
4873 // image/text共に読み込んだ内容をそのままCSS定義にする
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Dialog.js (nonexistent)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Dialog.js (revision 39)
@@ -0,0 +1,18 @@
1+class Dialog {
2+ constructor() {
3+ this.DOMelement = null;
4+ this.cssDialog = "\
5+\
6+dialog {\
7+ display: block;\
8+ position: float\
9+}\
10+\
11+";
12+ }
13+ initialize(domParent) {
14+ }
15+
16+ showModal() {
17+ }
18+}
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 39)
@@ -283,7 +283,7 @@
283283 window.renderLoop.requestRenderFunc(this.renderrollbox.bind(this));
284284 }
285285 renderrollbox() {
286- this.DOMbase.style.transform = 'rotateY(' + this.mirrorLRdeg + 'deg) rotateX(' + this.mirrorUDdeg + 'deg) rotateZ(' + this.degree + 'deg);';
286+ this.DOMbase.style.transform = 'rotateY(' + this.mirrorLRdeg + 'deg) rotateX(' + this.mirrorUDdeg + 'deg) rotateZ(' + this.degree + 'deg)';
287287 }
288288 mirrorLR() {
289289 this.mirrorLRdeg = (0 == this.mirrorLRdeg) ? 180 : 0;
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js (revision 39)
@@ -293,6 +293,12 @@
293293 let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
294294 let x2 = evt.pageX;
295295 let y2 = evt.pageY;
296+ // 画像を反転している場合、マウス入力座標も反転させる
297+ let tmp1 = rotateY(x1, eleFocus[0].dataset.mirrorlr, evt.pageX, evt.pageY);
298+ let tmp2 = rotateX(y1, eleFocus[0].dataset.mirrorud, evt.pageX, evt.pageY);
299+ x2 = tmp1[0];
300+ y2 = tmp2[1];
301+ // ------------
296302 let degree = angle(x2, y2, x1, y1);
297303
298304 let mirrorlr = parseInt(eleFocus[0].dataset.mirrorlr);
@@ -304,7 +310,7 @@
304310 let eleFocus = this.getFocusdElements();
305311 if (eleFocus.length < 2) return;
306312
307- eleFocus[0].style.transform = 'rotateY(' + mirrorlr + 'deg) rotateX(' + mirrorud + 'deg) rotateZ(' + degree + 'deg);';
313+ eleFocus[0].style.transform = 'rotateY(' + mirrorlr + 'deg) rotateX(' + mirrorud + 'deg) rotateZ(' + degree + 'deg)';
308314 }
309315 mouseUpRoll(evt) {
310316 this.debuglog('mouseUpRoll');
@@ -319,6 +325,12 @@
319325 let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
320326 let x2 = evt.pageX;
321327 let y2 = evt.pageY;
328+ // 画像を反転している場合、マウス入力座標も反転させる
329+ let tmp1 = rotateY(x1, eleFocus[0].dataset.mirrorlr, evt.pageX, evt.pageY);
330+ let tmp2 = rotateX(y1, eleFocus[0].dataset.mirrorud, evt.pageX, evt.pageY);
331+ x2 = tmp1[0];
332+ y2 = tmp2[1];
333+ // ------------
322334 let degree = angle(x2, y2, x1, y1);
323335 // this.debuglog('■■ x1=' + x1 + ', y1=' + y1 + ',\nx2=' + x2 + ', y2=' + y2 + '\nangle=' + degree);
324336 // window.ObjIDMgr.rollbox( eleFocus[0].dataset.objid, degree ); // debug用 設定情報で直接表示
@@ -389,4 +401,5 @@
389401
390402 return [eleBase, eleDisp];
391403 }
404+
392405 } // class CPartsFocus
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 39)
@@ -47,12 +47,19 @@
4747
4848 onMouseDown(evt) {
4949 // Mouse eventをappAreaからCSSPalに渡してもらうように設定
50- window.appArea.setMouseEventObj(null, this.mouseMove.bind(this), null);
50+ window.appArea.setMouseEventObj('palgroup', this.mouseMove.bind(this), null);
5151 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
5252 evt.preventDefault(); // 要素既定のdefault動作を止める
5353
54+ let e = findClassNameParent('palgroup', evt.target);
55+ if (null == e) {
56+ console.error('マウスダウン パレットグループが見つからない evt.target.objid = ' + evt.target.dataset.objid);
57+ return;
58+ }
59+
60+
5461 // Drag対象を保持
55- this.draggingDOM = evt.target;
62+ this.draggingDOM = e;
5663 // ElementのDrag開始位置を保持
5764 this.startElementX = parseInt(this.draggingDOM.style.left);
5865 this.startElementY = parseInt(this.draggingDOM.style.top);
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 39)
@@ -25,7 +25,12 @@
2525 font-weight: normal;
2626 }
2727
28-
28+ .dialogframe {
29+ display: block;
30+ position: fixed;
31+ left: 0px; top: 0px;
32+ width: 300px; height: 250px;
33+ }
2934 /*
3035 [data-objid] {
3136 transition: transform 2s linear 0s;
@@ -51,6 +56,9 @@
5156 margin: 0; padding: 0;
5257 background-color: transparent;
5358 }
59+ .DispField {
60+ overflow: hidden;
61+ }
5462
5563 #FrameArea{
5664 display:block;
@@ -59,6 +67,7 @@
5967 border: 1px solid black;
6068 margin: 0; padding: 0;
6169 background-color: white;
70+ transform-style: inherit;
6271 }
6372 .FrameArea {
6473
@@ -69,7 +78,10 @@
6978 .DispObj {
7079 display: inline-block;
7180 position: absolute;
72- marginj:0; padding:0;
81+ margin:0; padding:0;
82+ perspective: 800px;
83+ transform-style: preserve-3d;
84+ backface-visibility: visible;
7385 }
7486 .DispObj {
7587 left:0; top:0;
--- HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 39)
@@ -40,9 +40,34 @@
4040 }
4141 return (theta * 360 / (2 * Math.PI) - 90); // atan2は X軸基準での角度を出すため、画面表示系の Y軸基準に合わせるため 90を減算する
4242 };
43+function radToDeg(rad) {
44+ return parseFloat(rad) / (Math.PI / 180);
45+};
46+function degToRad(deg) {
47+ return parseFloat(deg) * (Math.PI / 180);
48+};
49+function rotateY(
50+ x, // 回転するY軸の座標
51+ degree, // 角度
52+ inputX, // 回転対象座標X
53+ inputY // 回転対象座標Y
54+) {
55+ let radius = parseFloat(inputX) - parseFloat(x);
56+ let resultX = radius * Math.cos(degToRad(degree)) + parseFloat(x);
57+ return [resultX,parseFloat(inputY)];
58+};
59+function rotateX(
60+ y, // 回転するX軸の座標
61+ degree, // 角度
62+ inputX, // 回転対象座標X
63+ inputY // 回転対象座標Y
64+) {
65+ let radius = parseFloat(inputY) - parseFloat(y);
66+ let resultY = radius * Math.cos(degToRad(degree)) + parseFloat(y);
67+ return [parseFloat(inputX),resultY];
68+}
4369
4470
45-
4671 // Image fileを読み込み、その内容を対象CSSに設定
4772 // CSSには "'cssstr1' + fileBlob + 'cssstr2'" が設定される
4873 // image/text共に読み込んだ内容をそのままCSS定義にする
--- HtmlDrawApp/HTMLDrawApp/js/Dialog.js (nonexistent)
+++ HtmlDrawApp/HTMLDrawApp/js/Dialog.js (revision 39)
@@ -0,0 +1,18 @@
1+class Dialog {
2+ constructor() {
3+ this.DOMelement = null;
4+ this.cssDialog = "\
5+\
6+dialog {\
7+ display: block;\
8+ position: float\
9+}\
10+\
11+";
12+ }
13+ initialize(domParent) {
14+ }
15+
16+ showModal() {
17+ }
18+}
--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 39)
@@ -283,7 +283,7 @@
283283 window.renderLoop.requestRenderFunc(this.renderrollbox.bind(this));
284284 }
285285 renderrollbox() {
286- this.DOMbase.style.transform = 'rotateY(' + this.mirrorLRdeg + 'deg) rotateX(' + this.mirrorUDdeg + 'deg) rotateZ(' + this.degree + 'deg);';
286+ this.DOMbase.style.transform = 'rotateY(' + this.mirrorLRdeg + 'deg) rotateX(' + this.mirrorUDdeg + 'deg) rotateZ(' + this.degree + 'deg)';
287287 }
288288 mirrorLR() {
289289 this.mirrorLRdeg = (0 == this.mirrorLRdeg) ? 180 : 0;
--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 39)
@@ -293,6 +293,12 @@
293293 let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
294294 let x2 = evt.pageX;
295295 let y2 = evt.pageY;
296+ // 画像を反転している場合、マウス入力座標も反転させる
297+ let tmp1 = rotateY(x1, eleFocus[0].dataset.mirrorlr, evt.pageX, evt.pageY);
298+ let tmp2 = rotateX(y1, eleFocus[0].dataset.mirrorud, evt.pageX, evt.pageY);
299+ x2 = tmp1[0];
300+ y2 = tmp2[1];
301+ // ------------
296302 let degree = angle(x2, y2, x1, y1);
297303
298304 let mirrorlr = parseInt(eleFocus[0].dataset.mirrorlr);
@@ -304,7 +310,7 @@
304310 let eleFocus = this.getFocusdElements();
305311 if (eleFocus.length < 2) return;
306312
307- eleFocus[0].style.transform = 'rotateY(' + mirrorlr + 'deg) rotateX(' + mirrorud + 'deg) rotateZ(' + degree + 'deg);';
313+ eleFocus[0].style.transform = 'rotateY(' + mirrorlr + 'deg) rotateX(' + mirrorud + 'deg) rotateZ(' + degree + 'deg)';
308314 }
309315 mouseUpRoll(evt) {
310316 this.debuglog('mouseUpRoll');
@@ -319,6 +325,12 @@
319325 let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
320326 let x2 = evt.pageX;
321327 let y2 = evt.pageY;
328+ // 画像を反転している場合、マウス入力座標も反転させる
329+ let tmp1 = rotateY(x1, eleFocus[0].dataset.mirrorlr, evt.pageX, evt.pageY);
330+ let tmp2 = rotateX(y1, eleFocus[0].dataset.mirrorud, evt.pageX, evt.pageY);
331+ x2 = tmp1[0];
332+ y2 = tmp2[1];
333+ // ------------
322334 let degree = angle(x2, y2, x1, y1);
323335 // this.debuglog('■■ x1=' + x1 + ', y1=' + y1 + ',\nx2=' + x2 + ', y2=' + y2 + '\nangle=' + degree);
324336 // window.ObjIDMgr.rollbox( eleFocus[0].dataset.objid, degree ); // debug用 設定情報で直接表示
@@ -389,4 +401,5 @@
389401
390402 return [eleBase, eleDisp];
391403 }
404+
392405 } // class CPartsFocus
--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 38)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 39)
@@ -47,12 +47,19 @@
4747
4848 onMouseDown(evt) {
4949 // Mouse eventをappAreaからCSSPalに渡してもらうように設定
50- window.appArea.setMouseEventObj(null, this.mouseMove.bind(this), null);
50+ window.appArea.setMouseEventObj('palgroup', this.mouseMove.bind(this), null);
5151 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
5252 evt.preventDefault(); // 要素既定のdefault動作を止める
5353
54+ let e = findClassNameParent('palgroup', evt.target);
55+ if (null == e) {
56+ console.error('マウスダウン パレットグループが見つからない evt.target.objid = ' + evt.target.dataset.objid);
57+ return;
58+ }
59+
60+
5461 // Drag対象を保持
55- this.draggingDOM = evt.target;
62+ this.draggingDOM = e;
5663 // ElementのDrag開始位置を保持
5764 this.startElementX = parseInt(this.draggingDOM.style.left);
5865 this.startElementY = parseInt(this.draggingDOM.style.top);
--- HtmlDrawApp/doc/ActionSample/まっすぐ移動.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/まっすぐ移動.txt (revision 39)
@@ -0,0 +1,7 @@
1+dummy {
2+ animation: moveX 1.5s ease-out 0.5s 1;
3+}
4+@keyframes moveX {
5+ 0% {transform: translateX(-400px);}
6+ 100% {transform: translateX(0px);}
7+}
--- HtmlDrawApp/doc/ActionSample/ゆっくり移動して消える.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/ゆっくり移動して消える.txt (revision 39)
@@ -0,0 +1,11 @@
1+dummy {
2+ animation: cloudaniOut 10s linear 0s infinite forwards;
3+}
4+@keyframes cloudaniOut {
5+ 0% {transform: translateX(0px);opacity:1;}
6+ 40% {transform: translateX(-10px);opacity:1;}
7+ 45% {transform: translateX(-20px);opacity:0;}
8+ 55% {transform: translateX(20px);opacity:0;}
9+ 60% {transform: translateX(10px);opacity:1;}
10+ 100% {transform: translateX(0px);opacity:1;}
11+}
--- HtmlDrawApp/doc/ActionSample/左下から拡大.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/左下から拡大.txt (revision 39)
@@ -0,0 +1,9 @@
1+dummy {
2+ animation: balloon 0.4s linear 0.5s 1;
3+ transform-origin: 0 100%;
4+}
5+@keyframes balloon {
6+ 0% {transform: scaleX(0.0) scaleY(0.0) rotateZ(20deg);}
7+ 50% {transform: scaleX(0.5) scaleY(0.5) rotateZ(30deg);}
8+ 100% {transform: scaleX(1.0) scaleY(1.0) rotateZ(0deg);}
9+}
--- HtmlDrawApp/doc/ActionSample/斜め45度で表示.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/斜め45度で表示.txt (revision 39)
@@ -0,0 +1,8 @@
1+dummy {
2+ overflow: visible;
3+ transform: translateX(0%) rotateX(45deg) rotateZ(-45deg);
4+}
5+@keyframes dummy {
6+ 0% {transform: translateX(-400px);}
7+ 100% {transform: translateX(0px);}
8+}
--- HtmlDrawApp/doc/ActionSample/波紋.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/波紋.txt (revision 39)
@@ -0,0 +1,17 @@
1+dummy {
2+ animation: ripple 0.6s linear infinite;
3+}
4+@keyframes ripple {
5+ 0% {
6+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
7+ 0 0 0 20px rgba(255, 255, 255, 0.1),
8+ 0 0 0 40px rgba(255, 255, 255, 0.1),
9+ 0 0 0 60px rgba(255, 255, 255, 0.1);
10+ }
11+ 100% {
12+ box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
13+ 0 0 0 40px rgba(255, 255, 255, 0.1),
14+ 0 0 0 60px rgba(255, 255, 255, 0.1),
15+ 0 0 0 80px rgba(255, 255, 255, 0);
16+ }
17+}
--- HtmlDrawApp/doc/ActionSample/縞模様移動.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/縞模様移動.txt (revision 39)
@@ -0,0 +1,19 @@
1+dummy {
2+ animation: stripe 5s linear infinite;
3+ background-image: linear-gradient(
4+ -45deg,
5+ rgba(255,255,255,0.5),
6+ rgba(255,255,255,0.5) 25%,
7+ rgba(0,0,0,0.5) 26%,
8+ rgba(0,0,0,0.5) 50%,
9+ rgba(255,255,255,0.5) 51%,
10+ rgba(255,255,255,0.5) 75%,
11+ rgba(0,0,0,0.5) 76%,
12+ rgba(0,0,0,0.5) 100%
13+ );
14+ background-size: 15px 15px;
15+}
16+@keyframes stripe {
17+ 0% { background-position:0% 0%}
18+ 100% {background-position:100% 100%}
19+}
--- HtmlDrawApp/doc/ActionSample/衝撃.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/衝撃.txt (revision 39)
@@ -0,0 +1,16 @@
1+dummy {
2+ animation: shock 0.6s ease 0.5s 1;
3+}
4+@keyframes shock {
5+ 0% {transform: translateY(-60px) translateX(-30px);}
6+ 10% {transform: translateY(20px) translateX(30px);}
7+ 20% {transform: translateY(-40px) translateX(-20px);}
8+ 30% {transform: translateY(50px) translateX(-10px);}
9+ 40% {transform: translateY(-40px) translateX(20px);}
10+ 50% {transform: translateY(30px) translateX(-15px);}
11+ 60% {transform: translateY(-25px) translateX(0px);}
12+ 70% {transform: translateY(15px) translateX(-15px);}
13+ 80% {transform: translateY(-10px) translateX(10px);}
14+ 90% {transform: translateY(0px) translateX(-5px);}
15+ 100% {transform: translateY(0px) translateX(0px);}
16+}
--- HtmlDrawApp/doc/ActionSample/跳ねる.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/跳ねる.txt (revision 39)
@@ -0,0 +1,7 @@
1+dummy {
2+ animation: notebaseani 0.4s ease-out 0s infinite alternate;
3+}
4+@keyframes notebaseani {
5+ 0% {transform: translateY(0px);}
6+ 100% {transform: translateY(-20px);}
7+}
--- HtmlDrawApp/doc/targetButton.txt (nonexistent)
+++ HtmlDrawApp/doc/targetButton.txt (revision 39)
@@ -0,0 +1 @@
1+<a id="BtnPC" class="buttonstyle" href="#DispField">ボタン</a>