Upload index.html
Browse files- index.html +25 -24
index.html
CHANGED
|
@@ -2,6 +2,7 @@
|
|
| 2 |
<html style="width:100%; height:100%;">
|
| 3 |
<head>
|
| 4 |
<title>Openpose 사진 생성기</title>
|
|
|
|
| 5 |
<style>
|
| 6 |
*
|
| 7 |
{
|
|
@@ -11,7 +12,7 @@
|
|
| 11 |
color:white;
|
| 12 |
font-size:16px;
|
| 13 |
-webkit-user-select: none;
|
| 14 |
-
-ms-user-select: none;
|
| 15 |
user-select: none;
|
| 16 |
}
|
| 17 |
.vertex
|
|
@@ -110,7 +111,7 @@ let charDragging = 0;
|
|
| 110 |
let boneImageX = 0;
|
| 111 |
let boneImageY = 0;
|
| 112 |
|
| 113 |
-
|
| 114 |
let v1_head;
|
| 115 |
let v1_lefteye;
|
| 116 |
let v1_leftear;
|
|
@@ -129,7 +130,7 @@ let v1_leftknee;
|
|
| 129 |
let v1_rightknee;
|
| 130 |
let v1_leftfeet;
|
| 131 |
let v1_rightfeet;
|
| 132 |
-
|
| 133 |
let e1_lefteye;
|
| 134 |
let e1_leftear;
|
| 135 |
let e1_righteye;
|
|
@@ -166,7 +167,7 @@ let v2_leftknee;
|
|
| 166 |
let v2_rightknee;
|
| 167 |
let v2_leftfeet;
|
| 168 |
let v2_rightfeet;
|
| 169 |
-
|
| 170 |
let e2_lefteye;
|
| 171 |
let e2_leftear;
|
| 172 |
let e2_righteye;
|
|
@@ -203,7 +204,7 @@ let v3_leftknee;
|
|
| 203 |
let v3_rightknee;
|
| 204 |
let v3_leftfeet;
|
| 205 |
let v3_rightfeet;
|
| 206 |
-
|
| 207 |
let e3_lefteye;
|
| 208 |
let e3_leftear;
|
| 209 |
let e3_righteye;
|
|
@@ -239,7 +240,7 @@ function onLoad()
|
|
| 239 |
{
|
| 240 |
document.body.addEventListener('paste', OnPaste);
|
| 241 |
|
| 242 |
-
|
| 243 |
v1_head = document.getElementById("v1_head");
|
| 244 |
v1_lefteye = document.getElementById("v1_lefteye");
|
| 245 |
v1_leftear = document.getElementById("v1_leftear");
|
|
@@ -473,7 +474,7 @@ function imageDrop(e)
|
|
| 473 |
function dragOverHandler(e)
|
| 474 |
{
|
| 475 |
e.preventDefault();
|
| 476 |
-
|
| 477 |
}
|
| 478 |
|
| 479 |
function fitChange()
|
|
@@ -600,7 +601,7 @@ function AdjustEdges1()
|
|
| 600 |
e1_righteye.style.left = (v1_head_x + v1_righteye1_x) / 2 + "px";
|
| 601 |
e1_righteye.style.width = Math.sqrt(((v1_righteye1_y - v1_head_y) ** 2 + (v1_righteye1_x - v1_head_x) ** 2)) + "px"
|
| 602 |
e1_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_righteye1_y - v1_head_y, v1_righteye1_x - v1_head_x) + "rad)";
|
| 603 |
-
|
| 604 |
e1_leftear.style.top = (v1_leftear_y + v1_lefteye1_y) / 2 + "px";
|
| 605 |
e1_leftear.style.left = (v1_leftear_x + v1_lefteye1_x) / 2 + "px";
|
| 606 |
e1_leftear.style.width = Math.sqrt(((v1_lefteye1_y - v1_leftear_y) ** 2 + (v1_lefteye1_x - v1_leftear_x) ** 2)) + "px"
|
|
@@ -610,12 +611,12 @@ function AdjustEdges1()
|
|
| 610 |
e1_rightear.style.left = (v1_rightear_x + v1_righteye1_x) / 2 + "px";
|
| 611 |
e1_rightear.style.width = Math.sqrt(((v1_righteye1_y - v1_rightear_y) ** 2 + (v1_righteye1_x - v1_rightear_x) ** 2)) + "px"
|
| 612 |
e1_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_righteye1_y - v1_rightear_y, v1_righteye1_x - v1_rightear_x) + "rad)";
|
| 613 |
-
|
| 614 |
e1_neck.style.top = (v1_head_y + v1_chest_y) / 2 + "px";
|
| 615 |
e1_neck.style.left = (v1_head_x + v1_chest_x) / 2 + "px";
|
| 616 |
e1_neck.style.width = Math.sqrt(((v1_chest_y - v1_head_y) ** 2 + (v1_chest_x - v1_head_x) ** 2)) + "px"
|
| 617 |
e1_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_chest_y - v1_head_y, v1_chest_x - v1_head_x) + "rad)";
|
| 618 |
-
|
| 619 |
e1_leftshoulder.style.top = (v1_leftshoulder_y + v1_chest_y) / 2 + "px";
|
| 620 |
e1_leftshoulder.style.left = (v1_leftshoulder_x + v1_chest_x) / 2 + "px";
|
| 621 |
e1_leftshoulder.style.width = Math.sqrt(((v1_chest_y - v1_leftshoulder_y) ** 2 + (v1_chest_x - v1_leftshoulder_x) ** 2)) + "px"
|
|
@@ -729,7 +730,7 @@ function AdjustEdges2()
|
|
| 729 |
e2_righteye.style.left = (v2_head_x + v2_righteye2_x) / 2 + "px";
|
| 730 |
e2_righteye.style.width = Math.sqrt(((v2_righteye2_y - v2_head_y) ** 2 + (v2_righteye2_x - v2_head_x) ** 2)) + "px"
|
| 731 |
e2_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_righteye2_y - v2_head_y, v2_righteye2_x - v2_head_x) + "rad)";
|
| 732 |
-
|
| 733 |
e2_leftear.style.top = (v2_leftear_y + v2_lefteye2_y) / 2 + "px";
|
| 734 |
e2_leftear.style.left = (v2_leftear_x + v2_lefteye2_x) / 2 + "px";
|
| 735 |
e2_leftear.style.width = Math.sqrt(((v2_lefteye2_y - v2_leftear_y) ** 2 + (v2_lefteye2_x - v2_leftear_x) ** 2)) + "px"
|
|
@@ -739,12 +740,12 @@ function AdjustEdges2()
|
|
| 739 |
e2_rightear.style.left = (v2_rightear_x + v2_righteye2_x) / 2 + "px";
|
| 740 |
e2_rightear.style.width = Math.sqrt(((v2_righteye2_y - v2_rightear_y) ** 2 + (v2_righteye2_x - v2_rightear_x) ** 2)) + "px"
|
| 741 |
e2_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_righteye2_y - v2_rightear_y, v2_righteye2_x - v2_rightear_x) + "rad)";
|
| 742 |
-
|
| 743 |
e2_neck.style.top = (v2_head_y + v2_chest_y) / 2 + "px";
|
| 744 |
e2_neck.style.left = (v2_head_x + v2_chest_x) / 2 + "px";
|
| 745 |
e2_neck.style.width = Math.sqrt(((v2_chest_y - v2_head_y) ** 2 + (v2_chest_x - v2_head_x) ** 2)) + "px"
|
| 746 |
e2_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_chest_y - v2_head_y, v2_chest_x - v2_head_x) + "rad)";
|
| 747 |
-
|
| 748 |
e2_leftshoulder.style.top = (v2_leftshoulder_y + v2_chest_y) / 2 + "px";
|
| 749 |
e2_leftshoulder.style.left = (v2_leftshoulder_x + v2_chest_x) / 2 + "px";
|
| 750 |
e2_leftshoulder.style.width = Math.sqrt(((v2_chest_y - v2_leftshoulder_y) ** 2 + (v2_chest_x - v2_leftshoulder_x) ** 2)) + "px"
|
|
@@ -857,7 +858,7 @@ function AdjustEdges3()
|
|
| 857 |
e3_righteye.style.left = (v3_head_x + v3_righteye3_x) / 2 + "px";
|
| 858 |
e3_righteye.style.width = Math.sqrt(((v3_righteye3_y - v3_head_y) ** 2 + (v3_righteye3_x - v3_head_x) ** 2)) + "px"
|
| 859 |
e3_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_righteye3_y - v3_head_y, v3_righteye3_x - v3_head_x) + "rad)";
|
| 860 |
-
|
| 861 |
e3_leftear.style.top = (v3_leftear_y + v3_lefteye3_y) / 2 + "px";
|
| 862 |
e3_leftear.style.left = (v3_leftear_x + v3_lefteye3_x) / 2 + "px";
|
| 863 |
e3_leftear.style.width = Math.sqrt(((v3_lefteye3_y - v3_leftear_y) ** 2 + (v3_lefteye3_x - v3_leftear_x) ** 2)) + "px"
|
|
@@ -867,12 +868,12 @@ function AdjustEdges3()
|
|
| 867 |
e3_rightear.style.left = (v3_rightear_x + v3_righteye3_x) / 2 + "px";
|
| 868 |
e3_rightear.style.width = Math.sqrt(((v3_righteye3_y - v3_rightear_y) ** 2 + (v3_righteye3_x - v3_rightear_x) ** 2)) + "px"
|
| 869 |
e3_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_righteye3_y - v3_rightear_y, v3_righteye3_x - v3_rightear_x) + "rad)";
|
| 870 |
-
|
| 871 |
e3_neck.style.top = (v3_head_y + v3_chest_y) / 2 + "px";
|
| 872 |
e3_neck.style.left = (v3_head_x + v3_chest_x) / 2 + "px";
|
| 873 |
e3_neck.style.width = Math.sqrt(((v3_chest_y - v3_head_y) ** 2 + (v3_chest_x - v3_head_x) ** 2)) + "px"
|
| 874 |
e3_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_chest_y - v3_head_y, v3_chest_x - v3_head_x) + "rad)";
|
| 875 |
-
|
| 876 |
e3_leftshoulder.style.top = (v3_leftshoulder_y + v3_chest_y) / 2 + "px";
|
| 877 |
e3_leftshoulder.style.left = (v3_leftshoulder_x + v3_chest_x) / 2 + "px";
|
| 878 |
e3_leftshoulder.style.width = Math.sqrt(((v3_chest_y - v3_leftshoulder_y) ** 2 + (v3_chest_x - v3_leftshoulder_x) ** 2)) + "px"
|
|
@@ -1216,7 +1217,7 @@ function ImageSave()
|
|
| 1216 |
|
| 1217 |
function ImagetoFile(canvas)
|
| 1218 |
{
|
| 1219 |
-
|
| 1220 |
var link = document.getElementById("download");
|
| 1221 |
link.href = canvas.toDataURL("image/png");
|
| 1222 |
link.download = "capture.png";
|
|
@@ -1396,7 +1397,7 @@ function ImagetoFile(canvas)
|
|
| 1396 |
<input id="check2_rightfeet" type="checkbox" style="left: 0.5em; top:0.4em;" checked onchange="checkstateChanged()">
|
| 1397 |
<label for="check2_rightfeet" style="width:9.5em; height:1em; left: 2.5em;">오른쪽 발</label>
|
| 1398 |
</div>
|
| 1399 |
-
|
| 1400 |
<div style="width:12em; height:1.5em; position: relative; padding:0.25em; background-color: #888; background-clip: content-box; flex-shrink: 0;" onclick="ShowCheckboxes3()">
|
| 1401 |
<div style="width:3em; height:1.5em; left:1em">사람 3</div>
|
| 1402 |
<div id="button_show3" class="buttonhide" onclick="ShowChar3(event)"></div>
|
|
@@ -1495,7 +1496,7 @@ function ImagetoFile(canvas)
|
|
| 1495 |
<div id="e1_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
|
| 1496 |
<div id="e1_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
|
| 1497 |
<div id="e1_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
|
| 1498 |
-
|
| 1499 |
<div id="e1_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
|
| 1500 |
<div id="e1_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
|
| 1501 |
<div id="e1_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
|
|
@@ -1515,7 +1516,7 @@ function ImagetoFile(canvas)
|
|
| 1515 |
<div id="e2_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
|
| 1516 |
<div id="e2_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
|
| 1517 |
<div id="e2_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
|
| 1518 |
-
|
| 1519 |
<div id="e2_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
|
| 1520 |
<div id="e2_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
|
| 1521 |
<div id="e2_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
|
|
@@ -1535,7 +1536,7 @@ function ImagetoFile(canvas)
|
|
| 1535 |
<div id="e3_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
|
| 1536 |
<div id="e3_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
|
| 1537 |
<div id="e3_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
|
| 1538 |
-
|
| 1539 |
<div id="e3_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
|
| 1540 |
<div id="e3_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
|
| 1541 |
<div id="e3_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
|
|
@@ -1565,7 +1566,7 @@ function ImagetoFile(canvas)
|
|
| 1565 |
<div id="v1_leftfeet" class="vertex" style="top:90px; left:42px; background-color: rgb(0, 170, 255, 0.5);" onmousedown="Vertex1MouseDown(event)"></div>
|
| 1566 |
<div id="v1_rightfeet" class="vertex" style="top:90px; left:58px; background-color: rgb(85, 0, 255, 0.5);" onmousedown="Vertex1MouseDown(event)"></div>
|
| 1567 |
|
| 1568 |
-
|
| 1569 |
<div id="v2_head" class="vertex" style="top:16px; left:20px; background-color: rgb(255, 0, 0, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
| 1570 |
<div id="v2_lefteye" class="vertex" style="top:14px; left:16px; background-color: rgb(170, 0, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
| 1571 |
<div id="v2_leftear" class="vertex" style="top:16px; left:12px; background-color: rgb(255, 0, 170, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
|
@@ -1587,7 +1588,7 @@ function ImagetoFile(canvas)
|
|
| 1587 |
<div id="v2_leftfeet" class="vertex" style="top:90px; left:12px; background-color: rgb(0, 170, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
| 1588 |
<div id="v2_rightfeet" class="vertex" style="top:90px; left:28px; background-color: rgb(85, 0, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
| 1589 |
|
| 1590 |
-
|
| 1591 |
<div id="v3_head" class="vertex" style="top:16px; left:80px; background-color: rgb(255, 0, 0, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
|
| 1592 |
<div id="v3_lefteye" class="vertex" style="top:14px; left:76px; background-color: rgb(170, 0, 255, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
|
| 1593 |
<div id="v3_leftear" class="vertex" style="top:16px; left:72px; background-color: rgb(255, 0, 170, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
|
|
@@ -1627,4 +1628,4 @@ function ImagetoFile(canvas)
|
|
| 1627 |
<div id="splitx" style="left:25%; width:4px; height:100%; background-color: silver; cursor:col-resize"
|
| 1628 |
onmousedown="hResizeStart()"></div>
|
| 1629 |
</body>
|
| 1630 |
-
</html>
|
|
|
|
| 2 |
<html style="width:100%; height:100%;">
|
| 3 |
<head>
|
| 4 |
<title>Openpose 사진 생성기</title>
|
| 5 |
+
<meta charset="utf-8">
|
| 6 |
<style>
|
| 7 |
*
|
| 8 |
{
|
|
|
|
| 12 |
color:white;
|
| 13 |
font-size:16px;
|
| 14 |
-webkit-user-select: none;
|
| 15 |
+
-ms-user-select: none;
|
| 16 |
user-select: none;
|
| 17 |
}
|
| 18 |
.vertex
|
|
|
|
| 111 |
let boneImageX = 0;
|
| 112 |
let boneImageY = 0;
|
| 113 |
|
| 114 |
+
|
| 115 |
let v1_head;
|
| 116 |
let v1_lefteye;
|
| 117 |
let v1_leftear;
|
|
|
|
| 130 |
let v1_rightknee;
|
| 131 |
let v1_leftfeet;
|
| 132 |
let v1_rightfeet;
|
| 133 |
+
|
| 134 |
let e1_lefteye;
|
| 135 |
let e1_leftear;
|
| 136 |
let e1_righteye;
|
|
|
|
| 167 |
let v2_rightknee;
|
| 168 |
let v2_leftfeet;
|
| 169 |
let v2_rightfeet;
|
| 170 |
+
|
| 171 |
let e2_lefteye;
|
| 172 |
let e2_leftear;
|
| 173 |
let e2_righteye;
|
|
|
|
| 204 |
let v3_rightknee;
|
| 205 |
let v3_leftfeet;
|
| 206 |
let v3_rightfeet;
|
| 207 |
+
|
| 208 |
let e3_lefteye;
|
| 209 |
let e3_leftear;
|
| 210 |
let e3_righteye;
|
|
|
|
| 240 |
{
|
| 241 |
document.body.addEventListener('paste', OnPaste);
|
| 242 |
|
| 243 |
+
|
| 244 |
v1_head = document.getElementById("v1_head");
|
| 245 |
v1_lefteye = document.getElementById("v1_lefteye");
|
| 246 |
v1_leftear = document.getElementById("v1_leftear");
|
|
|
|
| 474 |
function dragOverHandler(e)
|
| 475 |
{
|
| 476 |
e.preventDefault();
|
| 477 |
+
|
| 478 |
}
|
| 479 |
|
| 480 |
function fitChange()
|
|
|
|
| 601 |
e1_righteye.style.left = (v1_head_x + v1_righteye1_x) / 2 + "px";
|
| 602 |
e1_righteye.style.width = Math.sqrt(((v1_righteye1_y - v1_head_y) ** 2 + (v1_righteye1_x - v1_head_x) ** 2)) + "px"
|
| 603 |
e1_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_righteye1_y - v1_head_y, v1_righteye1_x - v1_head_x) + "rad)";
|
| 604 |
+
|
| 605 |
e1_leftear.style.top = (v1_leftear_y + v1_lefteye1_y) / 2 + "px";
|
| 606 |
e1_leftear.style.left = (v1_leftear_x + v1_lefteye1_x) / 2 + "px";
|
| 607 |
e1_leftear.style.width = Math.sqrt(((v1_lefteye1_y - v1_leftear_y) ** 2 + (v1_lefteye1_x - v1_leftear_x) ** 2)) + "px"
|
|
|
|
| 611 |
e1_rightear.style.left = (v1_rightear_x + v1_righteye1_x) / 2 + "px";
|
| 612 |
e1_rightear.style.width = Math.sqrt(((v1_righteye1_y - v1_rightear_y) ** 2 + (v1_righteye1_x - v1_rightear_x) ** 2)) + "px"
|
| 613 |
e1_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_righteye1_y - v1_rightear_y, v1_righteye1_x - v1_rightear_x) + "rad)";
|
| 614 |
+
|
| 615 |
e1_neck.style.top = (v1_head_y + v1_chest_y) / 2 + "px";
|
| 616 |
e1_neck.style.left = (v1_head_x + v1_chest_x) / 2 + "px";
|
| 617 |
e1_neck.style.width = Math.sqrt(((v1_chest_y - v1_head_y) ** 2 + (v1_chest_x - v1_head_x) ** 2)) + "px"
|
| 618 |
e1_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_chest_y - v1_head_y, v1_chest_x - v1_head_x) + "rad)";
|
| 619 |
+
|
| 620 |
e1_leftshoulder.style.top = (v1_leftshoulder_y + v1_chest_y) / 2 + "px";
|
| 621 |
e1_leftshoulder.style.left = (v1_leftshoulder_x + v1_chest_x) / 2 + "px";
|
| 622 |
e1_leftshoulder.style.width = Math.sqrt(((v1_chest_y - v1_leftshoulder_y) ** 2 + (v1_chest_x - v1_leftshoulder_x) ** 2)) + "px"
|
|
|
|
| 730 |
e2_righteye.style.left = (v2_head_x + v2_righteye2_x) / 2 + "px";
|
| 731 |
e2_righteye.style.width = Math.sqrt(((v2_righteye2_y - v2_head_y) ** 2 + (v2_righteye2_x - v2_head_x) ** 2)) + "px"
|
| 732 |
e2_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_righteye2_y - v2_head_y, v2_righteye2_x - v2_head_x) + "rad)";
|
| 733 |
+
|
| 734 |
e2_leftear.style.top = (v2_leftear_y + v2_lefteye2_y) / 2 + "px";
|
| 735 |
e2_leftear.style.left = (v2_leftear_x + v2_lefteye2_x) / 2 + "px";
|
| 736 |
e2_leftear.style.width = Math.sqrt(((v2_lefteye2_y - v2_leftear_y) ** 2 + (v2_lefteye2_x - v2_leftear_x) ** 2)) + "px"
|
|
|
|
| 740 |
e2_rightear.style.left = (v2_rightear_x + v2_righteye2_x) / 2 + "px";
|
| 741 |
e2_rightear.style.width = Math.sqrt(((v2_righteye2_y - v2_rightear_y) ** 2 + (v2_righteye2_x - v2_rightear_x) ** 2)) + "px"
|
| 742 |
e2_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_righteye2_y - v2_rightear_y, v2_righteye2_x - v2_rightear_x) + "rad)";
|
| 743 |
+
|
| 744 |
e2_neck.style.top = (v2_head_y + v2_chest_y) / 2 + "px";
|
| 745 |
e2_neck.style.left = (v2_head_x + v2_chest_x) / 2 + "px";
|
| 746 |
e2_neck.style.width = Math.sqrt(((v2_chest_y - v2_head_y) ** 2 + (v2_chest_x - v2_head_x) ** 2)) + "px"
|
| 747 |
e2_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_chest_y - v2_head_y, v2_chest_x - v2_head_x) + "rad)";
|
| 748 |
+
|
| 749 |
e2_leftshoulder.style.top = (v2_leftshoulder_y + v2_chest_y) / 2 + "px";
|
| 750 |
e2_leftshoulder.style.left = (v2_leftshoulder_x + v2_chest_x) / 2 + "px";
|
| 751 |
e2_leftshoulder.style.width = Math.sqrt(((v2_chest_y - v2_leftshoulder_y) ** 2 + (v2_chest_x - v2_leftshoulder_x) ** 2)) + "px"
|
|
|
|
| 858 |
e3_righteye.style.left = (v3_head_x + v3_righteye3_x) / 2 + "px";
|
| 859 |
e3_righteye.style.width = Math.sqrt(((v3_righteye3_y - v3_head_y) ** 2 + (v3_righteye3_x - v3_head_x) ** 2)) + "px"
|
| 860 |
e3_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_righteye3_y - v3_head_y, v3_righteye3_x - v3_head_x) + "rad)";
|
| 861 |
+
|
| 862 |
e3_leftear.style.top = (v3_leftear_y + v3_lefteye3_y) / 2 + "px";
|
| 863 |
e3_leftear.style.left = (v3_leftear_x + v3_lefteye3_x) / 2 + "px";
|
| 864 |
e3_leftear.style.width = Math.sqrt(((v3_lefteye3_y - v3_leftear_y) ** 2 + (v3_lefteye3_x - v3_leftear_x) ** 2)) + "px"
|
|
|
|
| 868 |
e3_rightear.style.left = (v3_rightear_x + v3_righteye3_x) / 2 + "px";
|
| 869 |
e3_rightear.style.width = Math.sqrt(((v3_righteye3_y - v3_rightear_y) ** 2 + (v3_righteye3_x - v3_rightear_x) ** 2)) + "px"
|
| 870 |
e3_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_righteye3_y - v3_rightear_y, v3_righteye3_x - v3_rightear_x) + "rad)";
|
| 871 |
+
|
| 872 |
e3_neck.style.top = (v3_head_y + v3_chest_y) / 2 + "px";
|
| 873 |
e3_neck.style.left = (v3_head_x + v3_chest_x) / 2 + "px";
|
| 874 |
e3_neck.style.width = Math.sqrt(((v3_chest_y - v3_head_y) ** 2 + (v3_chest_x - v3_head_x) ** 2)) + "px"
|
| 875 |
e3_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_chest_y - v3_head_y, v3_chest_x - v3_head_x) + "rad)";
|
| 876 |
+
|
| 877 |
e3_leftshoulder.style.top = (v3_leftshoulder_y + v3_chest_y) / 2 + "px";
|
| 878 |
e3_leftshoulder.style.left = (v3_leftshoulder_x + v3_chest_x) / 2 + "px";
|
| 879 |
e3_leftshoulder.style.width = Math.sqrt(((v3_chest_y - v3_leftshoulder_y) ** 2 + (v3_chest_x - v3_leftshoulder_x) ** 2)) + "px"
|
|
|
|
| 1217 |
|
| 1218 |
function ImagetoFile(canvas)
|
| 1219 |
{
|
| 1220 |
+
|
| 1221 |
var link = document.getElementById("download");
|
| 1222 |
link.href = canvas.toDataURL("image/png");
|
| 1223 |
link.download = "capture.png";
|
|
|
|
| 1397 |
<input id="check2_rightfeet" type="checkbox" style="left: 0.5em; top:0.4em;" checked onchange="checkstateChanged()">
|
| 1398 |
<label for="check2_rightfeet" style="width:9.5em; height:1em; left: 2.5em;">오른쪽 발</label>
|
| 1399 |
</div>
|
| 1400 |
+
|
| 1401 |
<div style="width:12em; height:1.5em; position: relative; padding:0.25em; background-color: #888; background-clip: content-box; flex-shrink: 0;" onclick="ShowCheckboxes3()">
|
| 1402 |
<div style="width:3em; height:1.5em; left:1em">사람 3</div>
|
| 1403 |
<div id="button_show3" class="buttonhide" onclick="ShowChar3(event)"></div>
|
|
|
|
| 1496 |
<div id="e1_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
|
| 1497 |
<div id="e1_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
|
| 1498 |
<div id="e1_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
|
| 1499 |
+
|
| 1500 |
<div id="e1_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
|
| 1501 |
<div id="e1_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
|
| 1502 |
<div id="e1_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
|
|
|
|
| 1516 |
<div id="e2_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
|
| 1517 |
<div id="e2_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
|
| 1518 |
<div id="e2_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
|
| 1519 |
+
|
| 1520 |
<div id="e2_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
|
| 1521 |
<div id="e2_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
|
| 1522 |
<div id="e2_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
|
|
|
|
| 1536 |
<div id="e3_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
|
| 1537 |
<div id="e3_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
|
| 1538 |
<div id="e3_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
|
| 1539 |
+
|
| 1540 |
<div id="e3_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
|
| 1541 |
<div id="e3_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
|
| 1542 |
<div id="e3_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
|
|
|
|
| 1566 |
<div id="v1_leftfeet" class="vertex" style="top:90px; left:42px; background-color: rgb(0, 170, 255, 0.5);" onmousedown="Vertex1MouseDown(event)"></div>
|
| 1567 |
<div id="v1_rightfeet" class="vertex" style="top:90px; left:58px; background-color: rgb(85, 0, 255, 0.5);" onmousedown="Vertex1MouseDown(event)"></div>
|
| 1568 |
|
| 1569 |
+
|
| 1570 |
<div id="v2_head" class="vertex" style="top:16px; left:20px; background-color: rgb(255, 0, 0, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
| 1571 |
<div id="v2_lefteye" class="vertex" style="top:14px; left:16px; background-color: rgb(170, 0, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
| 1572 |
<div id="v2_leftear" class="vertex" style="top:16px; left:12px; background-color: rgb(255, 0, 170, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
|
|
|
| 1588 |
<div id="v2_leftfeet" class="vertex" style="top:90px; left:12px; background-color: rgb(0, 170, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
| 1589 |
<div id="v2_rightfeet" class="vertex" style="top:90px; left:28px; background-color: rgb(85, 0, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
|
| 1590 |
|
| 1591 |
+
|
| 1592 |
<div id="v3_head" class="vertex" style="top:16px; left:80px; background-color: rgb(255, 0, 0, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
|
| 1593 |
<div id="v3_lefteye" class="vertex" style="top:14px; left:76px; background-color: rgb(170, 0, 255, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
|
| 1594 |
<div id="v3_leftear" class="vertex" style="top:16px; left:72px; background-color: rgb(255, 0, 170, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
|
|
|
|
| 1628 |
<div id="splitx" style="left:25%; width:4px; height:100%; background-color: silver; cursor:col-resize"
|
| 1629 |
onmousedown="hResizeStart()"></div>
|
| 1630 |
</body>
|
| 1631 |
+
</html>
|