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

Revision40 (tree)
Time2016-12-04 05:02:59
Authortakoyaki_umaaaa

Log Message

・要素反転後のマウス操作追従対応
・Text Palette定義ファイルからの文字列取得条件変更 (他のスタイルも定義できるように)
・いくつかの Palette Sample を作成

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 39)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 40)
@@ -46,28 +46,47 @@
4646 function degToRad(deg) {
4747 return parseFloat(deg) * (Math.PI / 180);
4848 };
49-function rotateY(
50- x, // 回転するY軸の座標
51- degree, // 角度
52- inputX, // 回転対象座標X
53- inputY // 回転対象座標Y
49+function rotateUD(
50+ y, // 回転する軸の座標
51+ degree, // 角度
52+ inputX, inputY // 回転対象座標
5453 ) {
54+ let radius = parseFloat(inputY) - parseFloat(y);
55+ let resultY = radius * Math.cos(degToRad(degree)) + parseFloat(y);
56+ return [parseFloat(inputX), resultY];
57+};
58+function rotateLR(
59+ x, // 回転する軸の座標
60+ degree, // 角度
61+ inputX, inputY // 回転対象座標
62+) {
5563 let radius = parseFloat(inputX) - parseFloat(x);
5664 let resultX = radius * Math.cos(degToRad(degree)) + parseFloat(x);
57- return [resultX,parseFloat(inputY)];
65+ return [resultX, parseFloat(inputY)];
5866 };
59-function rotateX(
60- y, // 回転するX軸の座標
61- degree, // 角度
62- inputX, // 回転対象座標X
63- inputY // 回転対象座標Y
67+function rotateZ(
68+ cx, cy, // 回転する軸の座標
69+ degree, // 角度
70+ inputX, inputY // 回転対象座標
6471 ) {
65- let radius = parseFloat(inputY) - parseFloat(y);
66- let resultY = radius * Math.cos(degToRad(degree)) + parseFloat(y);
67- return [parseFloat(inputX),resultY];
68-}
72+ //　x = x1 * cos(rad) - y1 * sin(rad)
73+ // y = x1 * sin(rad) + y1 * cos(rad)
74+ let radian = degToRad(degree);
75+ let x1 = parseFloat(inputX) - parseFloat(cx);
76+ let y1 = parseFloat(inputY) - parseFloat(cy);
6977
78+ let x = x1 * Math.cos(radian) - y1 * Math.sin(radian);
79+ let y = x1 * Math.sin(radian) + y1 * Math.cos(radian);
7080
81+ return [(x + cx), (y + cy)];
82+};
83+function mirrorUDorigin() {
84+ return "0 100%";
85+};
86+function mirrorLRorigin() {
87+ return "100% 0";
88+};
89+
7190 // Image fileを読み込み、その内容を対象CSSに設定
7291 // CSSには "'cssstr1' + fileBlob + 'cssstr2'" が設定される
7392 // image/text共に読み込んだ内容をそのままCSS定義にする
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 39)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 40)
@@ -150,8 +150,8 @@
150150 // 要素を画面から隠す。削除はしない。Undoに対応するため。
151151 // 要素を DOM treeから 切り離すことで表示されないようにする
152152 if (id < this.ObjIDLen) {
153- let displayField = document.getElementById('DispField');
154- displayField.removeChild(this.ObjIDarray[id].DOMbase);
153+ // this.ObjIDarray[id].DOMbase.removeChild(this.ObjIDarray[id].DOMobject);
154+ window.frameArea.DOMobject.removeChild(this.ObjIDarray[id].DOMbase);
155155 }
156156 }
157157 } // class CObjIDMgr
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js (revision 39)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js (revision 40)
@@ -185,11 +185,29 @@
185185 // Mouse eventをappAreaからScalerに渡してもらうように設定
186186 window.appArea.setMouseEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
187187
188+
189+
190+ // 画像を反転している場合、マウス入力座標も反転させる
191+ this.x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
192+ this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
193+ this.degUD = parseInt(eleFocus[0].dataset.mirrorud);
194+ this.degLR = parseInt(eleFocus[0].dataset.mirrorlr);
195+ let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
196+ let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
197+ let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
198+ // x2 = tmp2[0];
199+ // y2 = tmp1[1];
200+ // x2 = tmp3[0];
201+ // y2 = tmp3[1];
202+ // ------------
203+
188204 // 移動元として座標を保持
205+ this.scaleStartLeft = parseInt(eleFocus[0].style.left);
206+ this.scaleStartTop = parseInt(eleFocus[0].style.top);
189207 this.scaleStartWidth = parseInt(eleFocus[0].style.width);
190208 this.scaleStartHeight = parseInt(eleFocus[0].style.height);
191- this.startDragX = evt.pageX;
192- this.startDragY = evt.pageY;
209+ this.startDragX = tmp2[0];
210+ this.startDragY = tmp1[1];
193211 }
194212 mouseMoveScale(evt) {
195213 let eleFocus = this.getFocusdElements();
@@ -197,14 +215,30 @@
197215 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
198216 evt.preventDefault(); // 要素既定のdefault動作を止める
199217
218+ // 画像を反転している場合、マウス入力座標も反転させる
219+ // let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
220+ // let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
221+ // let degUD = parseInt(eleFocus[0].dataset.mirrorud);
222+ // let degLR = parseInt(eleFocus[0].dataset.mirrorlr);
223+ let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
224+ let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
225+ let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
226+ // x2 = tmp3[0];
227+ // y2 = tmp3[1];
228+ // ------------
229+
230+
200231 // 画像の仮変形
201- this.endDragX = evt.pageX;
202- this.endDragY = evt.pageY;
232+ this.endDragX = tmp2[0];
233+ this.endDragY = tmp1[1];
203234 // 移動量取得
204235 let moveX = this.endDragX - this.startDragX;
205236 let moveY = this.endDragY - this.startDragY;
237+ // 反転によるサイズ増減基準座標変更 (見た目上 左上基準での増減を反転)
238+ let mirrorCodUD = (this.degUD) ? -1 : 0;
239+ let mirrorCodLR = (this.degLR) ? -1 : 0;
206240
207- switch(1){
241+ switch (1) {
208242 case 0: // 領域サイズ変更のみ
209243 window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
210244 break;
@@ -212,12 +246,12 @@
212246 {
213247 let orgheight = parseInt(eleFocus[1].dataset.orgheight);
214248 let scaleY = (this.scaleStartHeight + moveY) / orgheight * 100; // ★さらに初期倍率設定値を掛ける必要がある
215- window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
249+ window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
216250 }
217251 break;
218252 }
219253 }
220- renderMouseMoveScale(width, height, scalefont) {
254+ renderMouseMoveScale(left, top, width, height, scalefont) {
221255 let eleFocus = this.getFocusdElements();
222256 if (eleFocus.length < 2) return;
223257 eleFocus[1].style.opacity = 0.4;
@@ -228,6 +262,8 @@
228262 eleFocus[0].style.height = height + "px";
229263 break;
230264 case 1:
265+ eleFocus[0].style.left = left + "px";
266+ eleFocus[0].style.top = top + "px";
231267 eleFocus[0].style.width = width + "px";
232268 eleFocus[0].style.height = height + "px";
233269 eleFocus[1].style.fontSize = scalefont + '%';
@@ -244,17 +280,24 @@
244280 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
245281 evt.preventDefault(); // 要素既定のdefault動作を止める
246282
283+ let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
284+ let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
285+ let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
286+
247287 // 画像の仮変形
248- this.endDragX = evt.pageX;
249- this.endDragY = evt.pageY;
288+ this.endDragX = tmp2[0];
289+ this.endDragY = tmp1[1];
250290 // 移動量取得
251291 let moveX = this.endDragX - this.startDragX;
252292 let moveY = this.endDragY - this.startDragY;
293+ // 反転によるサイズ増減基準座標変更 (見た目上 左上基準での増減を反転)
294+ let mirrorCodUD = (this.degUD) ? -1 : 0;
295+ let mirrorCodLR = (this.degLR) ? -1 : 0;
253296
254297 let rectFrom = new rectData();
255298 let rectTo = new rectData();
256- rectFrom.setLTWH(parseInt(eleFocus[0].style.left), parseInt(eleFocus[0].style.top), this.scaleStartWidth, this.scaleStartHeight);
257- rectTo.setLTWH(rectFrom.left, rectFrom.top, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
299+ rectFrom.setLTWH(this.scaleStartLeft, this.scaleStartTop, this.scaleStartWidth, this.scaleStartHeight);
300+ rectTo.setLTWH(this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
258301
259302 let scaleY = 1.0;
260303 switch (1) {
@@ -282,6 +325,13 @@
282325
283326 // Mouse eventをappAreaからRollerに渡してもらうように設定
284327 window.appArea.setMouseEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
328+
329+
330+ // 変化しない値を使いまわすために保持
331+ this.x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
332+ this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
333+ this.degUD = parseInt(eleFocus[0].dataset.mirrorud);
334+ this.degLR = parseInt(eleFocus[0].dataset.mirrorlr);
285335 }
286336 mouseMoveRoll(evt) {
287337 let eleFocus = this.getFocusdElements();
@@ -289,22 +339,19 @@
289339 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
290340 evt.preventDefault(); // 要素既定のdefault動作を止める
291341
292- let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
293- let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
342+// let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
343+// let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
294344 let x2 = evt.pageX;
295345 let y2 = evt.pageY;
296346 // 画像を反転している場合、マウス入力座標も反転させる
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];
347+ let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
348+ let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
349+ x2 = tmp2[0];
350+ y2 = tmp1[1];
301351 // ------------
302- let degree = angle(x2, y2, x1, y1);
352+ let degree = angle(x2, y2, this.x1, this.y1);
303353
304- let mirrorlr = parseInt(eleFocus[0].dataset.mirrorlr);
305- let mirrorud = parseInt(eleFocus[0].dataset.mirrorud);
306-
307- window.renderLoop.requestRenderFunc(this.renderMouseMoveRoll.bind(this, degree, mirrorlr, mirrorud));
354+ window.renderLoop.requestRenderFunc(this.renderMouseMoveRoll.bind(this, degree, this.degLR, this.degUD));
308355 }
309356 renderMouseMoveRoll(degree, mirrorlr, mirrorud) {
310357 let eleFocus = this.getFocusdElements();
@@ -326,10 +373,10 @@
326373 let x2 = evt.pageX;
327374 let y2 = evt.pageY;
328375 // 画像を反転している場合、マウス入力座標も反転させる
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];
376+ let tmp1 = rotateUD(y1, eleFocus[0].this.degUD, evt.pageX, evt.pageY);
377+ let tmp2 = rotateLR(x1, eleFocus[0].this.degLR, evt.pageX, evt.pageY);
378+ x2 = tmp2[0];
379+ y2 = tmp1[1];
333380 // ------------
334381 let degree = angle(x2, y2, x1, y1);
335382 // this.debuglog('■■ x1=' + x1 + ', y1=' + y1 + ',\nx2=' + x2 + ', y2=' + y2 + '\nangle=' + degree);
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 39)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 40)
@@ -73,8 +73,8 @@
7373 id, // txtcol palette要素番号
7474 file // Textを指しているfile object
7575 ) {
76- let cssstr1 = '.paltxtcol' + id + ' {\ncolor: ';
77- let cssstr2 = ';\n}';
76+ let cssstr1 = '.paltxtcol' + id + ' {\n';
77+ let cssstr2 = '\n}';
7878 setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
7979 };
8080 // 指定された画像を font colorとして設定する
--- HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 39)
+++ HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 40)
@@ -46,28 +46,47 @@
4646 function degToRad(deg) {
4747 return parseFloat(deg) * (Math.PI / 180);
4848 };
49-function rotateY(
50- x, // 回転するY軸の座標
51- degree, // 角度
52- inputX, // 回転対象座標X
53- inputY // 回転対象座標Y
49+function rotateUD(
50+ y, // 回転する軸の座標
51+ degree, // 角度
52+ inputX, inputY // 回転対象座標
5453 ) {
54+ let radius = parseFloat(inputY) - parseFloat(y);
55+ let resultY = radius * Math.cos(degToRad(degree)) + parseFloat(y);
56+ return [parseFloat(inputX), resultY];
57+};
58+function rotateLR(
59+ x, // 回転する軸の座標
60+ degree, // 角度
61+ inputX, inputY // 回転対象座標
62+) {
5563 let radius = parseFloat(inputX) - parseFloat(x);
5664 let resultX = radius * Math.cos(degToRad(degree)) + parseFloat(x);
57- return [resultX,parseFloat(inputY)];
65+ return [resultX, parseFloat(inputY)];
5866 };
59-function rotateX(
60- y, // 回転するX軸の座標
61- degree, // 角度
62- inputX, // 回転対象座標X
63- inputY // 回転対象座標Y
67+function rotateZ(
68+ cx, cy, // 回転する軸の座標
69+ degree, // 角度
70+ inputX, inputY // 回転対象座標
6471 ) {
65- let radius = parseFloat(inputY) - parseFloat(y);
66- let resultY = radius * Math.cos(degToRad(degree)) + parseFloat(y);
67- return [parseFloat(inputX),resultY];
68-}
72+ //　x = x1 * cos(rad) - y1 * sin(rad)
73+ // y = x1 * sin(rad) + y1 * cos(rad)
74+ let radian = degToRad(degree);
75+ let x1 = parseFloat(inputX) - parseFloat(cx);
76+ let y1 = parseFloat(inputY) - parseFloat(cy);
6977
78+ let x = x1 * Math.cos(radian) - y1 * Math.sin(radian);
79+ let y = x1 * Math.sin(radian) + y1 * Math.cos(radian);
7080
81+ return [(x + cx), (y + cy)];
82+};
83+function mirrorUDorigin() {
84+ return "0 100%";
85+};
86+function mirrorLRorigin() {
87+ return "100% 0";
88+};
89+
7190 // Image fileを読み込み、その内容を対象CSSに設定
7291 // CSSには "'cssstr1' + fileBlob + 'cssstr2'" が設定される
7392 // image/text共に読み込んだ内容をそのままCSS定義にする
--- HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 39)
+++ HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 40)
@@ -150,8 +150,8 @@
150150 // 要素を画面から隠す。削除はしない。Undoに対応するため。
151151 // 要素を DOM treeから 切り離すことで表示されないようにする
152152 if (id < this.ObjIDLen) {
153- let displayField = document.getElementById('DispField');
154- displayField.removeChild(this.ObjIDarray[id].DOMbase);
153+ // this.ObjIDarray[id].DOMbase.removeChild(this.ObjIDarray[id].DOMobject);
154+ window.frameArea.DOMobject.removeChild(this.ObjIDarray[id].DOMbase);
155155 }
156156 }
157157 } // class CObjIDMgr
--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 39)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 40)
@@ -185,11 +185,29 @@
185185 // Mouse eventをappAreaからScalerに渡してもらうように設定
186186 window.appArea.setMouseEventObj(null, this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
187187
188+
189+
190+ // 画像を反転している場合、マウス入力座標も反転させる
191+ this.x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
192+ this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
193+ this.degUD = parseInt(eleFocus[0].dataset.mirrorud);
194+ this.degLR = parseInt(eleFocus[0].dataset.mirrorlr);
195+ let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
196+ let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
197+ let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
198+ // x2 = tmp2[0];
199+ // y2 = tmp1[1];
200+ // x2 = tmp3[0];
201+ // y2 = tmp3[1];
202+ // ------------
203+
188204 // 移動元として座標を保持
205+ this.scaleStartLeft = parseInt(eleFocus[0].style.left);
206+ this.scaleStartTop = parseInt(eleFocus[0].style.top);
189207 this.scaleStartWidth = parseInt(eleFocus[0].style.width);
190208 this.scaleStartHeight = parseInt(eleFocus[0].style.height);
191- this.startDragX = evt.pageX;
192- this.startDragY = evt.pageY;
209+ this.startDragX = tmp2[0];
210+ this.startDragY = tmp1[1];
193211 }
194212 mouseMoveScale(evt) {
195213 let eleFocus = this.getFocusdElements();
@@ -197,14 +215,30 @@
197215 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
198216 evt.preventDefault(); // 要素既定のdefault動作を止める
199217
218+ // 画像を反転している場合、マウス入力座標も反転させる
219+ // let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
220+ // let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
221+ // let degUD = parseInt(eleFocus[0].dataset.mirrorud);
222+ // let degLR = parseInt(eleFocus[0].dataset.mirrorlr);
223+ let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
224+ let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
225+ let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
226+ // x2 = tmp3[0];
227+ // y2 = tmp3[1];
228+ // ------------
229+
230+
200231 // 画像の仮変形
201- this.endDragX = evt.pageX;
202- this.endDragY = evt.pageY;
232+ this.endDragX = tmp2[0];
233+ this.endDragY = tmp1[1];
203234 // 移動量取得
204235 let moveX = this.endDragX - this.startDragX;
205236 let moveY = this.endDragY - this.startDragY;
237+ // 反転によるサイズ増減基準座標変更 (見た目上 左上基準での増減を反転)
238+ let mirrorCodUD = (this.degUD) ? -1 : 0;
239+ let mirrorCodLR = (this.degLR) ? -1 : 0;
206240
207- switch(1){
241+ switch (1) {
208242 case 0: // 領域サイズ変更のみ
209243 window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
210244 break;
@@ -212,12 +246,12 @@
212246 {
213247 let orgheight = parseInt(eleFocus[1].dataset.orgheight);
214248 let scaleY = (this.scaleStartHeight + moveY) / orgheight * 100; // ★さらに初期倍率設定値を掛ける必要がある
215- window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
249+ window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
216250 }
217251 break;
218252 }
219253 }
220- renderMouseMoveScale(width, height, scalefont) {
254+ renderMouseMoveScale(left, top, width, height, scalefont) {
221255 let eleFocus = this.getFocusdElements();
222256 if (eleFocus.length < 2) return;
223257 eleFocus[1].style.opacity = 0.4;
@@ -228,6 +262,8 @@
228262 eleFocus[0].style.height = height + "px";
229263 break;
230264 case 1:
265+ eleFocus[0].style.left = left + "px";
266+ eleFocus[0].style.top = top + "px";
231267 eleFocus[0].style.width = width + "px";
232268 eleFocus[0].style.height = height + "px";
233269 eleFocus[1].style.fontSize = scalefont + '%';
@@ -244,17 +280,24 @@
244280 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
245281 evt.preventDefault(); // 要素既定のdefault動作を止める
246282
283+ let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
284+ let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
285+ let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
286+
247287 // 画像の仮変形
248- this.endDragX = evt.pageX;
249- this.endDragY = evt.pageY;
288+ this.endDragX = tmp2[0];
289+ this.endDragY = tmp1[1];
250290 // 移動量取得
251291 let moveX = this.endDragX - this.startDragX;
252292 let moveY = this.endDragY - this.startDragY;
293+ // 反転によるサイズ増減基準座標変更 (見た目上 左上基準での増減を反転)
294+ let mirrorCodUD = (this.degUD) ? -1 : 0;
295+ let mirrorCodLR = (this.degLR) ? -1 : 0;
253296
254297 let rectFrom = new rectData();
255298 let rectTo = new rectData();
256- rectFrom.setLTWH(parseInt(eleFocus[0].style.left), parseInt(eleFocus[0].style.top), this.scaleStartWidth, this.scaleStartHeight);
257- rectTo.setLTWH(rectFrom.left, rectFrom.top, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
299+ rectFrom.setLTWH(this.scaleStartLeft, this.scaleStartTop, this.scaleStartWidth, this.scaleStartHeight);
300+ rectTo.setLTWH(this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
258301
259302 let scaleY = 1.0;
260303 switch (1) {
@@ -282,6 +325,13 @@
282325
283326 // Mouse eventをappAreaからRollerに渡してもらうように設定
284327 window.appArea.setMouseEventObj(null, this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
328+
329+
330+ // 変化しない値を使いまわすために保持
331+ this.x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
332+ this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
333+ this.degUD = parseInt(eleFocus[0].dataset.mirrorud);
334+ this.degLR = parseInt(eleFocus[0].dataset.mirrorlr);
285335 }
286336 mouseMoveRoll(evt) {
287337 let eleFocus = this.getFocusdElements();
@@ -289,22 +339,19 @@
289339 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
290340 evt.preventDefault(); // 要素既定のdefault動作を止める
291341
292- let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
293- let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
342+// let x1 = parseInt(eleFocus[0].style.left) + parseInt(eleFocus[0].style.width) / 2;
343+// let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
294344 let x2 = evt.pageX;
295345 let y2 = evt.pageY;
296346 // 画像を反転している場合、マウス入力座標も反転させる
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];
347+ let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
348+ let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
349+ x2 = tmp2[0];
350+ y2 = tmp1[1];
301351 // ------------
302- let degree = angle(x2, y2, x1, y1);
352+ let degree = angle(x2, y2, this.x1, this.y1);
303353
304- let mirrorlr = parseInt(eleFocus[0].dataset.mirrorlr);
305- let mirrorud = parseInt(eleFocus[0].dataset.mirrorud);
306-
307- window.renderLoop.requestRenderFunc(this.renderMouseMoveRoll.bind(this, degree, mirrorlr, mirrorud));
354+ window.renderLoop.requestRenderFunc(this.renderMouseMoveRoll.bind(this, degree, this.degLR, this.degUD));
308355 }
309356 renderMouseMoveRoll(degree, mirrorlr, mirrorud) {
310357 let eleFocus = this.getFocusdElements();
@@ -326,10 +373,10 @@
326373 let x2 = evt.pageX;
327374 let y2 = evt.pageY;
328375 // 画像を反転している場合、マウス入力座標も反転させる
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];
376+ let tmp1 = rotateUD(y1, eleFocus[0].this.degUD, evt.pageX, evt.pageY);
377+ let tmp2 = rotateLR(x1, eleFocus[0].this.degLR, evt.pageX, evt.pageY);
378+ x2 = tmp2[0];
379+ y2 = tmp1[1];
333380 // ------------
334381 let degree = angle(x2, y2, x1, y1);
335382 // this.debuglog('■■ x1=' + x1 + ', y1=' + y1 + ',\nx2=' + x2 + ', y2=' + y2 + '\nangle=' + degree);
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 39)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 40)
@@ -73,8 +73,8 @@
7373 id, // txtcol palette要素番号
7474 file // Textを指しているfile object
7575 ) {
76- let cssstr1 = '.paltxtcol' + id + ' {\ncolor: ';
77- let cssstr2 = ';\n}';
76+ let cssstr1 = '.paltxtcol' + id + ' {\n';
77+ let cssstr2 = '\n}';
7878 setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file, this.loadresult.bind(this, this.DOMpaltxtcol[id], file));
7979 };
8080 // 指定された画像を font colorとして設定する
--- HtmlDrawApp/doc/FontColor_Red.txt (revision 39)
+++ HtmlDrawApp/doc/FontColor_Red.txt (nonexistent)
@@ -1 +0,0 @@
1-#ff0000
\ No newline at end of file
--- HtmlDrawApp/doc/targetButton.txt (revision 39)
+++ HtmlDrawApp/doc/targetButton.txt (nonexistent)
@@ -1 +0,0 @@
1-<a id="BtnPC" class="buttonstyle" href="#DispField">ボタン</a>
--- HtmlDrawApp/doc/ActSetting.txt (revision 39)
+++ HtmlDrawApp/doc/ActSetting.txt (nonexistent)
@@ -1,16 +0,0 @@
1-dummy {
2- animation: animeY1 1.5s ease-in 0.3s infinite alternate;
3-}
4-@keyframes animeY1 {
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-}
\ No newline at end of file
--- HtmlDrawApp/doc/PlaneText.txt (revision 39)
+++ HtmlDrawApp/doc/PlaneText.txt (nonexistent)
@@ -1,2 +0,0 @@
1-テキスト
2-Text
\ No newline at end of file
--- HtmlDrawApp/doc/FontSize絶対指定.txt (revision 39)
+++ HtmlDrawApp/doc/FontSize絶対指定.txt (nonexistent)
@@ -1 +0,0 @@
1-テ<span style="font-size:20pt;color:red">キ<strong style="font-size:30pt">ス</strong>ト</span><br>Text
\ No newline at end of file
--- HtmlDrawApp/doc/FontSize相対指定.txt (revision 39)
+++ HtmlDrawApp/doc/FontSize相対指定.txt (nonexistent)
@@ -1 +0,0 @@
1-テ<span style="font-size:150%;color:red">キ<strong style="font-size:200%">ス</strong>ト</span><br>Text
\ No newline at end of file
--- HtmlDrawApp/doc/ActionSample/斜め45度で表示.txt (revision 39)
+++ HtmlDrawApp/doc/ActionSample/斜め45度で表示.txt (nonexistent)
@@ -1,8 +0,0 @@
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 40)
@@ -0,0 +1,7 @@
1+dummy {
2+ animation: speharriTree 1s linear infinite;
3+}
4+@keyframes speharriTree {
5+ 0% { transform: translateZ(-1000px)}
6+ 100% { transform: translateZ(1000px)}
7+}
--- HtmlDrawApp/doc/ActionSample/背景画像横移動.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/背景画像横移動.txt (revision 40)
@@ -0,0 +1,8 @@
1+dummy {
2+ animation: slidez 1s linear infinite;
3+ background-size: 50px 50px;
4+}
5+@keyframes slidez {
6+ 0% { background-position:0% 0%}
7+ 100% {background-position:100% 0%}
8+}
--- HtmlDrawApp/doc/ActionSample/背景画像縦移動.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/背景画像縦移動.txt (revision 40)
@@ -0,0 +1,8 @@
1+dummy {
2+ animation: slidez 1s linear infinite;
3+ background-size: 50px 50px;
4+}
5+@keyframes slidez {
6+ 0% { background-position:0% 0%}
7+ 100% {background-position:0% 100%}
8+}
--- HtmlDrawApp/doc/ActionSample/跳ねるZ.txt (nonexistent)
+++ HtmlDrawApp/doc/ActionSample/跳ねるZ.txt (revision 40)
@@ -0,0 +1,7 @@
1+dummy {
2+ animation: notebaseaniZ 0.4s ease-out 0s infinite alternate;
3+}
4+@keyframes notebaseaniZ {
5+ 0% {transform: translateZ(0px);}
6+ 100% {transform: translateZ(20px);}
7+}
--- HtmlDrawApp/doc/TextColorSample/TextColor_Red.txt (nonexistent)
+++ HtmlDrawApp/doc/TextColorSample/TextColor_Red.txt (revision 40)
@@ -0,0 +1 @@
1+color: #ff0000;
\ No newline at end of file
--- HtmlDrawApp/doc/TextColorSample/クォータービュー.txt (nonexistent)
+++ HtmlDrawApp/doc/TextColorSample/クォータービュー.txt (revision 40)
@@ -0,0 +1,2 @@
1+ overflow: visible;
2+ transform: translateX(0%) rotateX(45deg) rotateZ(-45deg);
--- HtmlDrawApp/doc/TextColorSample/奥から手前.txt (nonexistent)
+++ HtmlDrawApp/doc/TextColorSample/奥から手前.txt (revision 40)
@@ -0,0 +1,2 @@
1+ overflow: visible;
2+ transform: translateX(0%) rotateX(75deg) rotateZ(0deg);
--- HtmlDrawApp/doc/TextColorSample/斜めに構える.txt (nonexistent)
+++ HtmlDrawApp/doc/TextColorSample/斜めに構える.txt (revision 40)
@@ -0,0 +1,2 @@
1+ overflow: visible;
2+ transform: translateX(0%) rotateY(45deg) rotateZ(0deg);
--- HtmlDrawApp/doc/文字要素Sample/FontSize相対指定.txt (nonexistent)
+++ HtmlDrawApp/doc/文字要素Sample/FontSize相対指定.txt (revision 40)
@@ -0,0 +1 @@
1+テ<span style="font-size:150%;color:red">キ<strong style="font-size:200%">ス</strong>ト</span><br>Text
\ No newline at end of file
--- HtmlDrawApp/doc/文字要素Sample/FontSize絶対指定.txt (nonexistent)
+++ HtmlDrawApp/doc/文字要素Sample/FontSize絶対指定.txt (revision 40)
@@ -0,0 +1 @@
1+テ<span style="font-size:20pt;color:red">キ<strong style="font-size:30pt">ス</strong>ト</span><br>Text
\ No newline at end of file
--- HtmlDrawApp/doc/文字要素Sample/PlaneText.txt (nonexistent)
+++ HtmlDrawApp/doc/文字要素Sample/PlaneText.txt (revision 40)
@@ -0,0 +1,2 @@
1+テキスト
2+Text
\ No newline at end of file
--- HtmlDrawApp/doc/文字要素Sample/targetButton.txt (nonexistent)
+++ HtmlDrawApp/doc/文字要素Sample/targetButton.txt (revision 40)
@@ -0,0 +1 @@
1+<a id="BtnPC" class="buttonstyle" href="#DispField">ボタン</a>