This post creates Editable “Stars”.
It also has the addition of a grid to facilitate drawing.
Here is an example:
Here is the code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”
http://www.w3.org/1999/xhtml”>
<head profile=”
http://gmpg.org/xfn/11″>
<title>Stars</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#svg1, #fo1, #grd, .d1{position: absolute; width: 100%; height: 95%; top: 30px}
di{position: absolute; font:italic normal 800 24px Times New Roman; color: #550000; }
</style>
</head>
<body>
<input type=”text” id=”t1″ name=”t1″ value=”# Points (even value)” style = “position: absolute; top: 10px; left: 10px” onclick=’document.getElementById(“t1”).value = “”;’ />
<di class =”d1″>
<svg id = “grd” xmlns=”
http://www.w3.org/2000/svg”>
<defs>
<pattern id=”smallGrid” width=”8″ height=”8″ patternUnits=”userSpaceOnUse”>
<path d=”M 8 0 L 0 0 0 8″ fill=”none” stroke=”gray” stroke-width=”0.5″/>
</pattern>
<pattern id=”grid” width=”80″ height=”80″ patternUnits=”userSpaceOnUse”>
<rect width=”80″ height=”80″ fill=”url(#smallGrid)”/>
<path d=”M 80 0 L 0 0 0 80″ fill=”none” stroke=”gray” stroke-width=”1″/>
</pattern>
</defs>
<rect width=”100%” height=”100%” fill=”url(#grid)” />
</svg>
</di>
<svg xmlns=”
http://www.w3.org/2000/svg” version=”1.1″id=”svg1″ width=”” height=”” >
<foreignObject id = “fo1”> </foreign object>
</svg>
var posX;var posY; var cnt = 0; var t1; var t2; var num = 0; var w; var h; ;var n;
var IE = document.all?true:false;
document.getElementById(“svg1”).onclick = getMouse2;
function getMouse2(e) {
if (IE) {
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop – 30;
} else {
posX = e.pageX;
posY = e.pageY – 30;
}
if (posY > 0) cnt ++;
if (cnt % 2 == 1) {
t2 = posY;
t1 = posX;
}
if (cnt % 2 == 0) {
document.getElementById(“svg1″).innerHTML = ” + document.getElementById(“svg1”).innerHTML;
n = parseInt(document.getElementById(“t1″).value) / 2;
num ++;
w = posX – t1;
h = posY – t2;
makePoly(2,”y”);
document.getElementById(“fo1″).innerHTML += ”;
document.getElementById(“layer” + num).style.textAlign = “center”;
document.getElementById(“layer” + num).style.top = (h/6 + t2 + 2) + “px”;
document.getElementById(“layer” + num).style.left = (w/6 + t1 + 2) + “px”;
document.getElementById(“layer” + num).style.height = (.65*h) + “px”;
document.getElementById(“layer” + num).style.width = (.65*w) + “px”;
document.getElementById(“layer” + num).focus();
}
}
function makePoly(d, s) {
var anginc = Math.PI;
anginc = 2 * anginc / n;
var px; var py; var px2; var py2;
var pts2 = “”;
var ang = anginc / d;
for (var i = 0; i
</body></html>
The grid is:
<di class =”d1″>
<svg id = “grd” xmlns=”http://www.w3.org/2000/svg”>
<defs>
<pattern id=”smallGrid” width=”8″ height=”8″ patternUnits=”userSpaceOnUse”>
<path d=”M 8 0 L 0 0 0 8″ fill=”none” stroke=”gray” stroke-width=”0.5″/>
</pattern>
<pattern id=”grid” width=”80″ height=”80″ patternUnits=”userSpaceOnUse”>
<rect width=”80″ height=”80″ fill=”url(#smallGrid)”/>
<path d=”M 80 0 L 0 0 0 80″ fill=”none” stroke=”gray” stroke-width=”1″/>
</pattern>
</defs>
<rect width=”100%” height=”100%” fill=”url(#grid)” />
</svg>
</di>
The mouse setup and the odd click are as before, with the exception that the clicks must be inside the grid:
if (posY > 0) cnt ++;
The “Stars” are set in a second SVG container, with a foreign object to hold contenteditable divisions:
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″id=”svg1″ width=”” height=”” >
<foreignObject id = “fo1”> </foreign object>
</svg>
The even clicks initiate to polygons, set the number of points, use a variable num to give each contenteditable division a unique id, set the width and height of each “Star” and embedded division and call the function makePoly():
if (cnt % 2 == 0) {
document.getElementById(“svg1″).innerHTML = ‘<polygon id=”poly2″ points=”0 0″ style=”fill: #cccc55;” /><polygon id=”poly4″ points=”0 0″ style=”fill: #cccc55;” />’ + document.getElementById(“svg1”).innerHTML;
n = parseInt(document.getElementById(“t1″).value) / 2;
num ++;
w = posX – t1;
h = posY – t2;
makePoly(2,”y”);
After the “Stars” are drawn, The divisions are placed inside them:
document.getElementById(“fo1”).innerHTML += ‘<di id = “layer’ + num + ‘” xmlns=”http://www.w3.org/1999/xhtml” contenteditable = “true”></di>’;
document.getElementById(“layer” + num).style.textAlign = “center”;
document.getElementById(“layer” + num).style.top = (h/6 + t2 + 2) + “px”;
document.getElementById(“layer” + num).style.left = (w/6 + t1 + 2) + “px”;
document.getElementById(“layer” + num).style.height = (.65*h) + “px”;
document.getElementById(“layer” + num).style.width = (.65*w) + “px”;
document.getElementById(“layer” + num).focus();
The function makePoly() creates the “Stars” from 2 polygons:
function makePoly(d, s) {
an angle increase is set up according to the number of points:
var anginc = Math.PI;
anginc = 2 * anginc / n;
var px; var py; var px2; var py2;
var pts2 = “”;
The angle for each point is the angle increase divided by d, which in the example is 2:
var ang = anginc / d;
The points are set by looping through the value of n:
for (var i = 0; i <n; i ++) {
A series of points is calculated, put in the variable pts2 and used to set the “points” attribute of the first polygon:
px = .5 * Math.sin(ang + i * anginc) ;
py = .5 * Math.cos(ang + i * anginc) ;
px2 = ( posX – w/2) + w * px;
py2 = (posY – h/2) + h * py;
pts2 = pts2 + px2 + ” ” + py2 + “,”;
}
document.getElementById(“poly2″).setAttributeNS(null,”points”,pts2);
pts2 is reset, the initial angle is set to 0 and the procedure is repeated for the second polygon:
pts2 = “”;
if (s == “y”) {
ang = 0;
document.getElementById(“poly4″).setAttributeNS(null,”points”,pts2);
Tips & Tricks 