Commit: 16 - takoyaki_umaaaaHideout (svn)

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

Commit MetaInfo

• Revision: 16 (tree)
• Time: 2016-11-15 08:19:19
• Author: takoyaki_umaaaa

Log Message

textboxサイズ変更方法変更中

Change Summary

• modified: HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/DispObj.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/UI_parts.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/vs.appxrecipe
• modified: HtmlDrawApp/HTMLDrawApp/js/DispObj.js
• modified: HtmlDrawApp/HTMLDrawApp/js/UI_parts.js
• added: HtmlDrawApp/doc/FontSize相対指定.txt
• added: HtmlDrawApp/doc/FontSize絶対指定.txt
• added: HtmlDrawApp/doc/PlaneText.txt

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/DispObj.js	(revision 15)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/DispObj.js	(revision 16)
@@ -15,6 +15,9 @@
 		this.DOMobject = null;
 		this.renderFunc = new Queue();
 
+		this.originalWidth = 0;
+		this.originalHeight = 0;
+
 		this.dropinitsize = 100.0;
 	}
 
@@ -60,11 +63,16 @@
 		this.y = rect.top;
 		this.width = rect.right - rect.left;
 		this.height = rect.bottom - rect.top;
+		this.originalWidth = this.width;
+		this.originalHeight = this.height;
 
 		// 画面に影響しない範囲で作成できるところまで Dom objectを作成する
 		let elType = (null != type.match(/imagebox/)) ? 'img' : 'div';
 		this.DOMobject = document.createElement(elType);
 		this.DOMobject.dataset.objid = this.ObjID;
+		this.DOMobject.dataset.orgwidth = this.originalWidth;	// transform: scaleの基準サイズ
+		this.DOMobject.dataset.orgheight = this.originalHeight;
+		this.DOMobject.dataset.degree = 0;
 		this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
 		if (null != type.match(/imagebox/)) {
 			// imageの場合、画像読み込み完了後に描画する必要がある
@@ -100,10 +108,14 @@
 			this.DOMobject.src = evt.target.result;
 			this.DOMobject.onload = function (evt) {
 				// 画像としての読み込み完了後に幅と高さが取れる
-				// 
+				// 大きすぎ/小さすぎても困るため初期サイズに収まるように拡大/縮小
 				let rect = this.calcImageWH(parseInt(evt.target.naturalWidth), parseInt(evt.target.naturalHeight));
 				this.width = rect.right - rect.left;
 				this.height = rect.bottom - rect.top;
+				this.originalWidth = this.width;
+				this.originalHeight = this.height;
+				this.DOMobject.dataset.orgwidth = this.originalWidth;	// transform: scaleの基準サイズ
+				this.DOMobject.dataset.orgheight = this.originalHeight;
 				// 表示サイズ取得完了したので画面に表示
 				this.renderFunc.enqueue(this.renderCreate.bind(this));
 			}.bind(this);
@@ -182,6 +194,7 @@
 
 	rollbox(degree) {
 		this.degree = degree;
+		this.DOMobject.dataset.degree = degree;
 		this.renderFunc.enqueue(this.renderrollbox.bind(this));
 	}
 	renderrollbox() {
@@ -228,6 +241,7 @@
 		// dispObjがあった位置からマウス移動分移動させた後の位置取得
 		moveX = this.x + moveX;
 		moveY = this.y + moveY;
+
 		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
 	}
 	renderMoveDragging(x, y) {

--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/UI_parts.js	(revision 15)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/UI_parts.js	(revision 16)
@@ -40,7 +40,7 @@
 
 		let originX = parseInt(this.clingingPartner.style.width) / 2;
 		let originY = parseInt(this.clingingPartner.style.height) / 2;
-
+		//								DOM			描画先rect			回転の中心位置
 		this.renderClingingSetPosition(this.DOM[0], this.getRectLeft(), (originX + this.lineWidth / 2) + 'px', '50%');
 		this.renderClingingSetPosition(this.DOM[1], this.getRectTop(), '50%', (originY + this.lineWidth / 2) + 'px');
 		this.renderClingingSetPosition(this.DOM[2], this.getRectRight(), (originX - this.lineWidth / 2) * -1 + 'px', '50%');
@@ -268,12 +268,49 @@
 		// 移動量取得
 		let moveX = this.endDragX - this.startDragX;
 		let moveY = this.endDragY - this.startDragY;
-		this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
+
+		switch(2){
+			case 0:
+				this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
+				break;
+			case 1:
+				{
+					let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
+					let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
+					let scaleX = (orgwidth + moveX) / orgwidth;
+					let scaleY = (orgheight + moveY) / orgheight;
+
+					this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, scaleX, scaleY));
+				}
+				break;
+			case 2:
+				{
+					let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
+					let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
+					let scaleX = (this.scaleStartWidth + moveX) / orgwidth;
+					let scaleY = (this.scaleStartHeight + moveY) / orgheight;
+					this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleX, scaleY));
+				}
+				break;
+		}
 	}
-	renderMouseMoveScale(width, height) {
-		this.clingingPartner.style.width = width + "px";
-		this.clingingPartner.style.height = height + "px";
+	renderMouseMoveScale(width, height, scalex, scaley) {
 		this.clingingPartner.style.opacity = 0.4;
+
+		switch(2){
+			case 0:
+				this.clingingPartner.style.width = width + "px";
+				this.clingingPartner.style.height = height + "px";
+				break;
+			case 1:
+				this.clingingPartner.style.transform = 'scaleX(' + width + ') scaleY(' + height + ') rotateZ(' + parseInt(this.clingingPartner.dataset.degree) + 'deg);';
+				break;
+			case 2:
+				this.clingingPartner.style.width = width + "px";
+				this.clingingPartner.style.height = height + "px";
+				this.clingingPartner.style.fontSize = (scaley * 100) + '%';
+				break;
+		}
 	}
 	mouseUpScale(evt) {
 		this.debuglog('mouseUpScale');

--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js	(revision 15)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js	(revision 16)
@@ -15,6 +15,9 @@
 		this.DOMobject = null;
 		this.renderFunc = new Queue();
 
+		this.originalWidth = 0;
+		this.originalHeight = 0;
+
 		this.dropinitsize = 100.0;
 	}
 
@@ -60,11 +63,16 @@
 		this.y = rect.top;
 		this.width = rect.right - rect.left;
 		this.height = rect.bottom - rect.top;
+		this.originalWidth = this.width;
+		this.originalHeight = this.height;
 
 		// 画面に影響しない範囲で作成できるところまで Dom objectを作成する
 		let elType = (null != type.match(/imagebox/)) ? 'img' : 'div';
 		this.DOMobject = document.createElement(elType);
 		this.DOMobject.dataset.objid = this.ObjID;
+		this.DOMobject.dataset.orgwidth = this.originalWidth;	// transform: scaleの基準サイズ
+		this.DOMobject.dataset.orgheight = this.originalHeight;
+		this.DOMobject.dataset.degree = 0;
 		this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
 		if (null != type.match(/imagebox/)) {
 			// imageの場合、画像読み込み完了後に描画する必要がある
@@ -100,10 +108,14 @@
 			this.DOMobject.src = evt.target.result;
 			this.DOMobject.onload = function (evt) {
 				// 画像としての読み込み完了後に幅と高さが取れる
-				// 
+				// 大きすぎ/小さすぎても困るため初期サイズに収まるように拡大/縮小
 				let rect = this.calcImageWH(parseInt(evt.target.naturalWidth), parseInt(evt.target.naturalHeight));
 				this.width = rect.right - rect.left;
 				this.height = rect.bottom - rect.top;
+				this.originalWidth = this.width;
+				this.originalHeight = this.height;
+				this.DOMobject.dataset.orgwidth = this.originalWidth;	// transform: scaleの基準サイズ
+				this.DOMobject.dataset.orgheight = this.originalHeight;
 				// 表示サイズ取得完了したので画面に表示
 				this.renderFunc.enqueue(this.renderCreate.bind(this));
 			}.bind(this);
@@ -182,6 +194,7 @@
 
 	rollbox(degree) {
 		this.degree = degree;
+		this.DOMobject.dataset.degree = degree;
 		this.renderFunc.enqueue(this.renderrollbox.bind(this));
 	}
 	renderrollbox() {
@@ -228,6 +241,7 @@
 		// dispObjがあった位置からマウス移動分移動させた後の位置取得
 		moveX = this.x + moveX;
 		moveY = this.y + moveY;
+
 		this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
 	}
 	renderMoveDragging(x, y) {

--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js	(revision 15)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js	(revision 16)
@@ -40,7 +40,7 @@
 
 		let originX = parseInt(this.clingingPartner.style.width) / 2;
 		let originY = parseInt(this.clingingPartner.style.height) / 2;
-
+		//								DOM			描画先rect			回転の中心位置
 		this.renderClingingSetPosition(this.DOM[0], this.getRectLeft(), (originX + this.lineWidth / 2) + 'px', '50%');
 		this.renderClingingSetPosition(this.DOM[1], this.getRectTop(), '50%', (originY + this.lineWidth / 2) + 'px');
 		this.renderClingingSetPosition(this.DOM[2], this.getRectRight(), (originX - this.lineWidth / 2) * -1 + 'px', '50%');
@@ -268,12 +268,49 @@
 		// 移動量取得
 		let moveX = this.endDragX - this.startDragX;
 		let moveY = this.endDragY - this.startDragY;
-		this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
+
+		switch(2){
+			case 0:
+				this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
+				break;
+			case 1:
+				{
+					let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
+					let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
+					let scaleX = (orgwidth + moveX) / orgwidth;
+					let scaleY = (orgheight + moveY) / orgheight;
+
+					this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, scaleX, scaleY));
+				}
+				break;
+			case 2:
+				{
+					let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
+					let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
+					let scaleX = (this.scaleStartWidth + moveX) / orgwidth;
+					let scaleY = (this.scaleStartHeight + moveY) / orgheight;
+					this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleX, scaleY));
+				}
+				break;
+		}
 	}
-	renderMouseMoveScale(width, height) {
-		this.clingingPartner.style.width = width + "px";
-		this.clingingPartner.style.height = height + "px";
+	renderMouseMoveScale(width, height, scalex, scaley) {
 		this.clingingPartner.style.opacity = 0.4;
+
+		switch(2){
+			case 0:
+				this.clingingPartner.style.width = width + "px";
+				this.clingingPartner.style.height = height + "px";
+				break;
+			case 1:
+				this.clingingPartner.style.transform = 'scaleX(' + width + ') scaleY(' + height + ') rotateZ(' + parseInt(this.clingingPartner.dataset.degree) + 'deg);';
+				break;
+			case 2:
+				this.clingingPartner.style.width = width + "px";
+				this.clingingPartner.style.height = height + "px";
+				this.clingingPartner.style.fontSize = (scaley * 100) + '%';
+				break;
+		}
 	}
 	mouseUpScale(evt) {
 		this.debuglog('mouseUpScale');

--- HtmlDrawApp/doc/FontSize相対指定.txt	(nonexistent)
+++ HtmlDrawApp/doc/FontSize相対指定.txt	(revision 16)
@@ -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/FontSize絶対指定.txt	(nonexistent)
+++ HtmlDrawApp/doc/FontSize絶対指定.txt	(revision 16)
@@ -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/PlaneText.txt	(nonexistent)
+++ HtmlDrawApp/doc/PlaneText.txt	(revision 16)
@@ -0,0 +1,2 @@
+テキスト
+Text
\ No newline at end of file