Drag & resize a rect - newbie problem
Posted by alexd apropos on Tue Jul 24th, 2007 at 12:49:19 BST
I'm trying to build a geographic search engine with SVG, PHP, and JavaScript. It's all going well except the JS. I've worked some with SVG in the past, but I'm completely new to JavaScript - as my horrible code below will show. It's based on Jeff Schiller's drag example, but I'm trying to modify it to support resizing as well via a little resize-box on the bottom right of the rectangle selection, and it's proving to be much more difficult than I thought (although since it's me, that's not saying much). Any help would be appreciated...
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
onload="init()"
onmousemove="mouseMove(evt)"
viewBox="114 35 6 7" preserveAspectRatio="xMidYMid meet">
<script><![CDATA[
var bMouseDragging = false;
var mouseOffsetX = 0;
var mouseOffsetY = 0;
var rMouseOffsetX = 0;
var rMouseOffsetY = 0;
function mouseDown(evt) {
bMouseDragging = true;
var frame = document.getElementById("frame");
var resizer = document.getElementById("resizer");
var point = document.documentElement.createSVGPoint();
var pos = frame.getScreenCTM();
point.x = evt.clientX;
point.y = evt.clientY;
point = point.matrixTransform(pos.inverse());
if (evt.target == frame) {
mouseOffsetX = point.x - parseInt(frame.getAttribute("x"));
mouseOffsetY = point.y - parseInt(frame.getAttribute("y"));
}
if (evt.target == resizer) {
mouseOffsetX = point.x - parseInt(resizer.getAttribute("x"));
mouseOffsetY = point.y - parseInt(resizer.getAttribute("y"));
rMouseOffsetX = point.x - parseInt(frame.getAttribute("x")) - parseInt(frame.getAttribute("width"));
rMouseOffsetY = point.y - parseInt(frame.getAttribute("y")) - parseInt(frame.getAttribute("height"));
}
}
function mouseUp(evt) {
bMouseDragging = false;
}
function mouseMove(evt) {
var staticPoint = document.documentElement.createSVGPoint();
var point = document.documentElement.createSVGPoint();
point.x = evt.clientX;
point.y = evt.clientY;
if (bMouseDragging) {
var frame = document.getElementById("frame");
var resizer = document.getElementById("resizer");
var currentFrameW = parseFloat(frame.getAttribute("stickyWidth"));
var currentFrameH = parseFloat(frame.getAttribute("stickyHeight"));
var currentResizerW = parseFloat(resizer.getAttribute("width"));
var currentResizerH = parseFloat(resizer.getAttribute("height"));
if (evt.target == frame) {
var frame_pos = frame.getScreenCTM();
point = point.matrixTransform(frame_pos.inverse());
frame.setAttribute("x", point.x - mouseOffsetX);
frame.setAttribute("y", point.y - mouseOffsetY);
resizer.setAttribute("x", point.x + currentFrameW - currentResizerW - mouseOffsetX);
resizer.setAttribute("y", point.y + currentFrameH - currentResizerH - mouseOffsetY);
}
if (evt.target == resizer) {
var resizer_pos = resizer.getScreenCTM();
point = point.matrixTransform(resizer_pos.inverse());
resizer.setAttribute("x", point.x - mouseOffsetX);
resizer.setAttribute("y", point.y - mouseOffsetY);
frame.setAttribute("width", currentFrameW + rMouseOffsetX);
frame.setAttribute("height", currentFrameH + rMouseOffsetY);
frame.setAttribute("stickyWidth", frame.getAttribute("width"));
frame.setAttribute("stickyHeight", frame.getAttribute("height")); }
}
var x1 = parseFloat(frame.getAttribute("x"));
var y1 = parseFloat(frame.getAttribute("y"));
var x2 = x1 + parseFloat(frame.getAttribute("width"));
var y2 = y1 + parseFloat(frame.getAttribute("height"));
var numDigits = 4;
x1 = x1.toFixed(numDigits);
x2 = x2.toFixed(numDigits);
y1 = y1.toFixed(numDigits);
y2 = y2.toFixed(numDigits);
displayCoords(x1, y1, x2, y2);
}
function displayCoords(x1, y1, x2, y2) {
var x1Form = parent.document.getElementById("x1");
var y1Form = parent.document.getElementById("y1");
var x2Form = parent.document.getElementById("x2");
var y2Form = parent.document.getElementById("y2");
var x1Print = parent.document.getElementById("printX1");
var y1Print = parent.document.getElementById("printY1");
var x2Print = parent.document.getElementById("printX2");
var y2Print = parent.document.getElementById("printY2");
x1Form.value = x1;
y1Form.value = y1;
x2Form.value = x2;
y2Form.value = y2;
x1Print.innerHTML = x1;
y1Print.innerHTML = y1;
x2Print.innerHTML = x2;
y2Print.innerHTML = y2;
}
function init() {
var frame = document.getElementById("frame");
var resizer = document.getElementById("resizer");
if (frame) {
frame.addEventListener("mousedown", mouseDown, false);
frame.addEventListener("mouseup", mouseUp, false);
frame.addEventListener("mousemove", mouseMove, false);
}
if (resizer) {
resizer.addEventListener("mousedown", mouseDown, false);
resizer.addEventListener("mouseup", mouseUp, false);
resizer.addEventListener("mousemove", mouseMove, false);
}
}
]]></script>
<rect id="background" x="112" y="35" fill="#e0e0e0" width="12" height="8">
<rect id="frame" fill="blue" fill-opacity="0.2" x="115.55" y="37.5" width="3" height="2" stickyWidth="3" stickyHeight="2" stroke="#9090ff" stroke-width="0.025">
<rect id="resizer" fill="black" opacity="0.2" x="118.25" y="39.2" width="0.3" height="0.3">
</svg>
Drag & resize a rect - newbie problem | 3 comments (3 topical, 0 editorial, 0 hidden)
Drag & resize a rect - newbie problem | 3 comments (3 topical, 0 editorial, 0 hidden)
Useful Links
- Create an account
- About SVG.org
- Frequently Asked Questions
- SVG.org Content with RSS
- Get SVG Help on IRC
- SVG.Open Conferences
- SVG Phones (169 and counting)
- JSR 226 Phones (28 and counting)