Commit: 41 - takoyaki_umaaaaHideout (svn)

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

Commit MetaInfo

• Revision: 41 (tree)
• Time: 2016-12-04 17:06:05
• Author: takoyaki_umaaaa

Log Message

・要素回転後のマウス操作追従 - 途中

左上座標が動かず、マウス操作と表示でずれが発生してしまう

Change Summary

• added: HtmlDrawApp/HTMLDrawApp/BrowserCheck.tar.gz
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js
• modified: HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/vs.appxrecipe
• modified: HtmlDrawApp/HTMLDrawApp/js/UI_parts.js
• delete: HtmlDrawApp/doc/ActionSample/波紋.txt
• added: HtmlDrawApp/doc/ActionSample/波紋_白.txt
• added: HtmlDrawApp/doc/ActionSample/波紋_赤.txt
• added: HtmlDrawApp/doc/TextColorSample/円.txt

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js	(revision 40)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js	(revision 41)
@@ -192,13 +192,9 @@
 		this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
 		this.degUD = parseInt(eleFocus[0].dataset.mirrorud);
 		this.degLR = parseInt(eleFocus[0].dataset.mirrorlr);
-		let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
-		let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
-		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
-		//		x2 = tmp2[0];
-		//		y2 = tmp1[1];
-		//		x2 = tmp3[0];
-		//		y2 = tmp3[1];
+		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, evt.pageX, evt.pageY);
+		let tmp1 = rotateUD(this.y1, this.degUD, tmp3[0], tmp3[1]);
+		let tmp2 = rotateLR(this.x1, this.degLR, tmp3[0], tmp3[1]);
 		// ------------
 
 		// 移動元として座標を保持
@@ -220,11 +216,9 @@
 	//	let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
 	//	let degUD = parseInt(eleFocus[0].dataset.mirrorud);
 	//	let degLR = parseInt(eleFocus[0].dataset.mirrorlr);
-		let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
-		let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
-		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
-		//		x2 = tmp3[0];
-		//		y2 = tmp3[1];
+		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, evt.pageX, evt.pageY);
+		let tmp1 = rotateUD(this.y1, this.degUD, tmp3[0], tmp3[1]);
+		let tmp2 = rotateLR(this.x1, this.degLR, tmp3[0], tmp3[1]);
 		// ------------
 
 
@@ -238,6 +232,53 @@
 		let mirrorCodUD = (this.degUD) ? -1 : 0;
 		let mirrorCodLR = (this.degLR) ? -1 : 0;
 
+/*
+		let resultLeft	 = this.scaleStartLeft;
+		let resultTop	 = this.scaleStartTop;
+		let resultRight	 = this.scaleStartLeft + (this.scaleStartWidth + moveX);
+		let resultBottom = this.scaleStartTop + (this.scaleStartHeight + moveY);
+		let resultLT = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, resultLeft, resultTop);
+		let resultRB = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, resultRight, resultBottom);
+*/
+		/*
+		width, heightを増減させたときの transform-origin相当の設定を変化させる必要がある
+		座標指定は常に左上基準になっており、これを変更することができない
+		回転させたときに左上位置が見た目上の座標系と物理的座標系でずれてしまうことで
+		操作と表示にずれが発生している
+
+		Math.cos(degToRad(degree))
+cos		y座標の増分に対して
+1		  0度 : y +    0%	height + 100%	x +    0%	width +   0%	height
+0		 90度 : y +    0%	height +   0%	x +    0%	width + 100%	width
+-1		180度 : y + -100%	height +   0%	x +    0%	width +   0%	y
+0		270度 : y +    0%	height +   0%	x + -100%	width +   0%	x
+1		360度 : y +    0%	height + 100%	x +    0%	width +   0%	height
+				y1 = y増分 * cos(theta)		x1 = y増分 * sin(theta)
+												 ~~~~~＼
+													    yの変化量にsinを掛ける
+
+sin		x座標の増分に対して
+0		  0度 : x +    0%	width  + 100%
+1		 90度 : 
+0		180度 : x + -100%	width  +   0%
+-1		270度 : 
+0		360度 : 
+				y2 = x増分 * cos(theta)		x2 = x増分 * sin(theta)
+
+				((x1+x2),(y1+y2))
+
+		 x1 y1		x2,	  y2
+		( 0, 0)-(増分x,増分y) に対してrotateZ(degree) すればいい？
+		算出結果 x1',y1'-x2',y2'をleft,top,right,bottomに加算？
+		*/
+		let deg = parseFloat(eleFocus[0].dataset.degree) * -1;
+		let resultLT = rotateZ(0, 0, deg, 0, 0);
+
+		let resultRB = rotateZ(0, 0, deg, moveX, moveY);
+
+
+
+
 		switch (1) {
 			case 0:	// 領域サイズ変更のみ
 				window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
@@ -246,7 +287,8 @@
 				{
 					let orgheight = parseInt(eleFocus[1].dataset.orgheight);
 					let scaleY = (this.scaleStartHeight + moveY) / orgheight * 100;	// ★さらに初期倍率設定値を掛ける必要がある
-					window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
+//					window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
+					window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartLeft + resultLT[0], this.scaleStartTop + resultLT[1],  this.scaleStartWidth + resultRB[0], this.scaleStartHeight + resultRB[1], scaleY));
 				}
 				break;
 		}
@@ -270,6 +312,18 @@
 				break;
 		}
 	}
+	renderMouseMoveScaleLTRB(left, top, right, bottom, scalefont) {
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus.length < 2) return;
+		eleFocus[1].style.opacity = 0.4;
+
+		eleFocus[0].style.left = left + "px";
+		eleFocus[0].style.top = top + "px";
+		eleFocus[0].style.right = right + "px";
+		eleFocus[0].style.bottom = bottom + "px";
+		eleFocus[1].style.fontSize = scalefont + '%';
+	}
+
 	mouseUpScale(evt) {
 		this.debuglog('mouseUpScale');
 		// Mouse event callback設定をクリア
@@ -280,9 +334,9 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-		let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
-		let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
-		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
+		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, evt.pageX, evt.pageY);
+		let tmp1 = rotateUD(this.y1, this.degUD, tmp3[0], tmp3[1]);
+		let tmp2 = rotateLR(this.x1, this.degLR, tmp3[0], tmp3[1]);
 
 		// 画像の仮変形
 		this.endDragX = tmp2[0];
@@ -294,10 +348,17 @@
 		let mirrorCodUD = (this.degUD) ? -1 : 0;
 		let mirrorCodLR = (this.degLR) ? -1 : 0;
 
+
+		let deg = parseFloat(eleFocus[0].dataset.degree) * -1;
+		let resultLT = rotateZ(0, 0, deg, 0, 0);
+		let resultRB = rotateZ(0, 0, deg, moveX, moveY);
+
+
 		let rectFrom = new rectData();
 		let rectTo = new rectData();
 		rectFrom.setLTWH(this.scaleStartLeft, this.scaleStartTop, this.scaleStartWidth, this.scaleStartHeight);
-		rectTo.setLTWH(this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
+//		rectTo.setLTWH(this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
+		rectTo.setLTWH(this.scaleStartLeft + resultLT[0], this.scaleStartTop + resultLT[1], this.scaleStartWidth + resultRB[0], this.scaleStartHeight + resultRB[1]);
 
 		let scaleY = 1.0;
 		switch (1) {
@@ -320,6 +381,8 @@
 
 	onMouseDownRoll(evt) {
 		this.debuglog('onMouseDownRoll');
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus.length < 2) return;
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
@@ -373,8 +436,8 @@
 		let x2 = evt.pageX;
 		let y2 = evt.pageY;
 		// 画像を反転している場合、マウス入力座標も反転させる
-		let tmp1 = rotateUD(y1, eleFocus[0].this.degUD, evt.pageX, evt.pageY);
-		let tmp2 = rotateLR(x1, eleFocus[0].this.degLR, evt.pageX, evt.pageY);
+		let tmp1 = rotateUD(y1, this.degUD, evt.pageX, evt.pageY);
+		let tmp2 = rotateLR(x1, this.degLR, evt.pageX, evt.pageY);
 		x2 = tmp2[0];
 		y2 = tmp1[1];
 		// ------------

--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js	(revision 40)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js	(revision 41)
@@ -192,13 +192,9 @@
 		this.y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
 		this.degUD = parseInt(eleFocus[0].dataset.mirrorud);
 		this.degLR = parseInt(eleFocus[0].dataset.mirrorlr);
-		let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
-		let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
-		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
-		//		x2 = tmp2[0];
-		//		y2 = tmp1[1];
-		//		x2 = tmp3[0];
-		//		y2 = tmp3[1];
+		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, evt.pageX, evt.pageY);
+		let tmp1 = rotateUD(this.y1, this.degUD, tmp3[0], tmp3[1]);
+		let tmp2 = rotateLR(this.x1, this.degLR, tmp3[0], tmp3[1]);
 		// ------------
 
 		// 移動元として座標を保持
@@ -220,11 +216,9 @@
 	//	let y1 = parseInt(eleFocus[0].style.top) + parseInt(eleFocus[0].style.height) / 2;
 	//	let degUD = parseInt(eleFocus[0].dataset.mirrorud);
 	//	let degLR = parseInt(eleFocus[0].dataset.mirrorlr);
-		let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
-		let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
-		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
-		//		x2 = tmp3[0];
-		//		y2 = tmp3[1];
+		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, evt.pageX, evt.pageY);
+		let tmp1 = rotateUD(this.y1, this.degUD, tmp3[0], tmp3[1]);
+		let tmp2 = rotateLR(this.x1, this.degLR, tmp3[0], tmp3[1]);
 		// ------------
 
 
@@ -238,6 +232,53 @@
 		let mirrorCodUD = (this.degUD) ? -1 : 0;
 		let mirrorCodLR = (this.degLR) ? -1 : 0;
 
+/*
+		let resultLeft	 = this.scaleStartLeft;
+		let resultTop	 = this.scaleStartTop;
+		let resultRight	 = this.scaleStartLeft + (this.scaleStartWidth + moveX);
+		let resultBottom = this.scaleStartTop + (this.scaleStartHeight + moveY);
+		let resultLT = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, resultLeft, resultTop);
+		let resultRB = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, resultRight, resultBottom);
+*/
+		/*
+		width, heightを増減させたときの transform-origin相当の設定を変化させる必要がある
+		座標指定は常に左上基準になっており、これを変更することができない
+		回転させたときに左上位置が見た目上の座標系と物理的座標系でずれてしまうことで
+		操作と表示にずれが発生している
+
+		Math.cos(degToRad(degree))
+cos		y座標の増分に対して
+1		  0度 : y +    0%	height + 100%	x +    0%	width +   0%	height
+0		 90度 : y +    0%	height +   0%	x +    0%	width + 100%	width
+-1		180度 : y + -100%	height +   0%	x +    0%	width +   0%	y
+0		270度 : y +    0%	height +   0%	x + -100%	width +   0%	x
+1		360度 : y +    0%	height + 100%	x +    0%	width +   0%	height
+				y1 = y増分 * cos(theta)		x1 = y増分 * sin(theta)
+												 ~~~~~＼
+													    yの変化量にsinを掛ける
+
+sin		x座標の増分に対して
+0		  0度 : x +    0%	width  + 100%
+1		 90度 : 
+0		180度 : x + -100%	width  +   0%
+-1		270度 : 
+0		360度 : 
+				y2 = x増分 * cos(theta)		x2 = x増分 * sin(theta)
+
+				((x1+x2),(y1+y2))
+
+		 x1 y1		x2,	  y2
+		( 0, 0)-(増分x,増分y) に対してrotateZ(degree) すればいい？
+		算出結果 x1',y1'-x2',y2'をleft,top,right,bottomに加算？
+		*/
+		let deg = parseFloat(eleFocus[0].dataset.degree) * -1;
+		let resultLT = rotateZ(0, 0, deg, 0, 0);
+
+		let resultRB = rotateZ(0, 0, deg, moveX, moveY);
+
+
+
+
 		switch (1) {
 			case 0:	// 領域サイズ変更のみ
 				window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
@@ -246,7 +287,8 @@
 				{
 					let orgheight = parseInt(eleFocus[1].dataset.orgheight);
 					let scaleY = (this.scaleStartHeight + moveY) / orgheight * 100;	// ★さらに初期倍率設定値を掛ける必要がある
-					window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
+//					window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleY));
+					window.renderLoop.requestRenderFunc(this.renderMouseMoveScale.bind(this, this.scaleStartLeft + resultLT[0], this.scaleStartTop + resultLT[1],  this.scaleStartWidth + resultRB[0], this.scaleStartHeight + resultRB[1], scaleY));
 				}
 				break;
 		}
@@ -270,6 +312,18 @@
 				break;
 		}
 	}
+	renderMouseMoveScaleLTRB(left, top, right, bottom, scalefont) {
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus.length < 2) return;
+		eleFocus[1].style.opacity = 0.4;
+
+		eleFocus[0].style.left = left + "px";
+		eleFocus[0].style.top = top + "px";
+		eleFocus[0].style.right = right + "px";
+		eleFocus[0].style.bottom = bottom + "px";
+		eleFocus[1].style.fontSize = scalefont + '%';
+	}
+
 	mouseUpScale(evt) {
 		this.debuglog('mouseUpScale');
 		// Mouse event callback設定をクリア
@@ -280,9 +334,9 @@
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
-		let tmp1 = rotateUD(this.y1, this.degUD, evt.pageX, evt.pageY);
-		let tmp2 = rotateLR(this.x1, this.degLR, evt.pageX, evt.pageY);
-		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, tmp2[0], tmp1[1]);
+		let tmp3 = rotateZ(this.x1, this.y1, eleFocus[0].dataset.degree, evt.pageX, evt.pageY);
+		let tmp1 = rotateUD(this.y1, this.degUD, tmp3[0], tmp3[1]);
+		let tmp2 = rotateLR(this.x1, this.degLR, tmp3[0], tmp3[1]);
 
 		// 画像の仮変形
 		this.endDragX = tmp2[0];
@@ -294,10 +348,17 @@
 		let mirrorCodUD = (this.degUD) ? -1 : 0;
 		let mirrorCodLR = (this.degLR) ? -1 : 0;
 
+
+		let deg = parseFloat(eleFocus[0].dataset.degree) * -1;
+		let resultLT = rotateZ(0, 0, deg, 0, 0);
+		let resultRB = rotateZ(0, 0, deg, moveX, moveY);
+
+
 		let rectFrom = new rectData();
 		let rectTo = new rectData();
 		rectFrom.setLTWH(this.scaleStartLeft, this.scaleStartTop, this.scaleStartWidth, this.scaleStartHeight);
-		rectTo.setLTWH(this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
+//		rectTo.setLTWH(this.scaleStartLeft + (mirrorCodLR * moveX), this.scaleStartTop + (mirrorCodUD * moveY), this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
+		rectTo.setLTWH(this.scaleStartLeft + resultLT[0], this.scaleStartTop + resultLT[1], this.scaleStartWidth + resultRB[0], this.scaleStartHeight + resultRB[1]);
 
 		let scaleY = 1.0;
 		switch (1) {
@@ -320,6 +381,8 @@
 
 	onMouseDownRoll(evt) {
 		this.debuglog('onMouseDownRoll');
+		let eleFocus = this.getFocusdElements();
+		if (eleFocus.length < 2) return;
 		evt.stopPropagation();				// event伝播を自分のところで止める(上位に行かなくなる)
 		evt.preventDefault();				// 要素既定のdefault動作を止める
 
@@ -373,8 +436,8 @@
 		let x2 = evt.pageX;
 		let y2 = evt.pageY;
 		// 画像を反転している場合、マウス入力座標も反転させる
-		let tmp1 = rotateUD(y1, eleFocus[0].this.degUD, evt.pageX, evt.pageY);
-		let tmp2 = rotateLR(x1, eleFocus[0].this.degLR, evt.pageX, evt.pageY);
+		let tmp1 = rotateUD(y1, this.degUD, evt.pageX, evt.pageY);
+		let tmp2 = rotateLR(x1, this.degLR, evt.pageX, evt.pageY);
 		x2 = tmp2[0];
 		y2 = tmp1[1];
 		// ------------

--- HtmlDrawApp/doc/ActionSample/波紋.txt	(revision 40)
+++ HtmlDrawApp/doc/ActionSample/波紋.txt	(nonexistent)
@@ -1,17 +0,0 @@
-dummy {
-	animation: ripple 0.6s linear infinite;
-}
-@keyframes ripple {
-	0% {
-		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 
-					0 0 0 20px rgba(255, 255, 255, 0.1), 
-					0 0 0 40px rgba(255, 255, 255, 0.1), 
-					0 0 0 60px rgba(255, 255, 255, 0.1);
-	}
-	100% {
-		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 
-					0 0 0 40px rgba(255, 255, 255, 0.1), 
-					0 0 0 60px rgba(255, 255, 255, 0.1), 
-					0 0 0 80px rgba(255, 255, 255, 0);
-	}
-}

--- HtmlDrawApp/doc/ActionSample/波紋_白.txt	(nonexistent)
+++ HtmlDrawApp/doc/ActionSample/波紋_白.txt	(revision 41)
@@ -0,0 +1,17 @@
+dummy {
+	animation: ripple 0.6s linear infinite;
+}
+@keyframes ripple {
+	0% {
+		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 
+					0 0 0 20px rgba(255, 255, 255, 0.1), 
+					0 0 0 40px rgba(255, 255, 255, 0.1), 
+					0 0 0 60px rgba(255, 255, 255, 0.1);
+	}
+	100% {
+		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1), 
+					0 0 0 40px rgba(255, 255, 255, 0.1), 
+					0 0 0 60px rgba(255, 255, 255, 0.1), 
+					0 0 0 80px rgba(255, 255, 255, 0);
+	}
+}

--- HtmlDrawApp/doc/ActionSample/波紋_赤.txt	(nonexistent)
+++ HtmlDrawApp/doc/ActionSample/波紋_赤.txt	(revision 41)
@@ -0,0 +1,17 @@
+dummy {
+	animation: ripple 0.6s linear infinite;
+}
+@keyframes ripple {
+	0% {
+		box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 
+					0 0 0 20px rgba(255, 0, 0, 0.1), 
+					0 0 0 40px rgba(255, 0, 0, 0.1), 
+					0 0 0 60px rgba(255, 0, 0, 0.1);
+	}
+	100% {
+		box-shadow: 0 0 0 20px rgba(255, 0, 0, 0.1), 
+					0 0 0 40px rgba(255, 0, 0, 0.1), 
+					0 0 0 60px rgba(255, 0, 0, 0.1), 
+					0 0 0 80px rgba(255, 0, 0, 0);
+	}
+}

--- HtmlDrawApp/doc/TextColorSample/円.txt	(nonexistent)
+++ HtmlDrawApp/doc/TextColorSample/円.txt	(revision 41)
@@ -0,0 +1 @@
+	border-radius: 50%
\ No newline at end of file