|
<?xml
version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="220" height="200" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<title>Interaktive Berzierkurven</title>
<defs>
<script type="text/ecmascript"><![CDATA[
var pressed="";
function initCPPressed(evt) {
pressed= evt.getTarget().getAttribute("id");
}
function uninitCPPressed(evt) {
pressed= "";
}
function moveCP(evt) {
if (pressed!="") {
document.getElementById(pressed).setAttribute("cx",evt.getClientX());
document.getElementById(pressed).setAttribute("cy",evt.getClientY());
document.getElementById(pressed+"_line").setAttribute("x2",evt.getClientX());
document.getElementById(pressed+"_line").setAttribute("y2",evt.getClientY());
if (pressed=="CP1") {
document.getElementById("kurve").setAttribute("d","M
10 100 C "
+evt.getClientX()+" "
+evt.getClientY()+" "
+document.getElementById("CP2").getAttribute("cx")+"
"
+document.getElementById("CP2").getAttribute("cy")
+" 200 100");
} else {
document.getElementById("kurve").setAttribute("d","M
10 100 C "
+document.getElementById("CP1").getAttribute("cx")+"
"
+document.getElementById("CP1").getAttribute("cy")+"
"
+evt.getClientX()+" "
+evt.getClientY()+" 200 100");
}
}
}
]]></script>
</defs>
<rect width="100%" height="100%" fill="white"
onmouseup="uninitCPPressed(evt)" onmousemove="moveCP(evt)"/>
<path stroke="#FFBB00" stroke-width="3" fill="none"
d="M 10 100 C 10 50 200 50 200 100" id="kurve"/>
<g>
<circle cx="10" cy="50" r="4" fill="black"
id="CP1" onmousedown="initCPPressed(evt)" onmouseup="uninitCPPressed(evt)"
onmousemove="moveCP(evt)"/>
<line x1="10" y1="100" x2="10" y2="50"
stroke-width="1" stroke="black" id="CP1_line"/>
<circle cx="200" cy="50" r="4" fill="black"
id="CP2" onmousedown="initCPPressed(evt)" onmouseup="uninitCPPressed(evt)"/>
<line x1="200" y1="100" x2="200"
y2="50" stroke-width="1" stroke="black"
id="CP2_line"/>
</g>
</svg>
|
|
