SVG-Polygon/svg-polygon-transform-point.htm at master · fhemsher/SVG-Polygon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Convex Polygons - Transformed Points</title>
  <script type="text/javascript" src="highlight.pack.js"></script>
  <script type="text/javascript" src="highlightCode.js"></script>
  <link href='highlight.css' rel='stylesheet' />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='font-family:arial;background:#f0f8ff'>
<center>
<h4>Convex Polygons - Transformed Points</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:8px;'>
Transform the polygon and recompute the polygon's new points, then remove transform.  Uses <b>matrixTransform</b>
</div>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg xmlns="http://www.w3.org/2000/svg"  id="mySVG" width="400" height="400">
<polygon id="myPolygon" fill="yellow" stroke="black" stroke-width="1" points="380,80 200,10 40,80 100,320 300,350" />
</svg>
</div>
<center>
    Scale:<input type="text" style='width:30px' id=scaleValue value=1.05 /> Rotate:<input type="text" style='width:30px' id=rotateValue value=10 /> <button onClick=transformPolygon() >Transform Polygon</button>
</center>
 <br />SVG Source:
<div id=svgSourceDiv style=overflow:auto;width:100%;height:1px;text-align:left; /></div>
Javascript:
<div id=jsCodeDiv style=overflow:auto;width:100%;text-align:left; /></div>
</center>
<script id=myScript>
 //---button---
 function transformPolygon()
 {
    //---scale from center of polygon--
    var bb=myPolygon.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height
    var cx=bbx+.5*bbw
    var cy=bby+.5*bbh

    var scale=scaleValue.value
    var rotate=rotateValue.value
    myPolygon.setAttribute("transform","translate("+cx+" "+cy+")scale("+scale+")translate("+(-cx)+" "+(-cy)+")rotate("+rotate+","+cx+","+cy+")")

    ctmPolygon(myPolygon)
    showSourceSVG()
 }
function ctmPolygon(myPoly)
{
	var ctm = myPoly.getCTM()
	var svgRoot = myPoly.ownerSVGElement

	var pointsList = myPoly.points;
	var n = pointsList.numberOfItems;


	for(var m=0; m < n; m++)
	{
		var mySVGPoint = svgRoot.createSVGPoint();
		mySVGPoint.x = pointsList.getItem(m).x
		mySVGPoint.y = pointsList.getItem(m).y
		mySVGPointTrans = mySVGPoint.matrixTransform(ctm)
		pointsList.getItem(m).x=mySVGPointTrans.x
		pointsList.getItem(m).y=mySVGPointTrans.y
	};
	//---force removal of transform--
	myPoly.setAttribute("transform","")
	myPoly.removeAttribute("transform")
}

</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
showSourceSVG()
showSourceJS()
}
</script>


</body>
</html>