Core JavaScript
SVG - A Draggable Quadratic
The acronym SVG stands for Scalable Vector Graphics and refers to graphics that are generated by a geometric specification rather than by pixels, like an image (called rasterized graphics as opposed to the vectorized graphics described here).
The program below fetches the body element first. Then a div element is created and assigned the name qMainDiv. Inside qMainDiv, we add a svg element and put the line element inside it.
The code creates a quadratic bezier curve that interpolates the endpoints and has a center control point that can be dragged. Also, the cursor changes when it is close enough to a one of these points to signal that it may be dragged.
SvgDraggableQuad.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net's Javascript</title>
</head>
<body>
<script type="text/javascript" src="SvgDraggableQuad.js"></script>
</body>
</html>SvgDraggableQuad.js
var qBody = document.getElementsByTagName("body")[0];
// The containing div and all of the variables
var qMainDiv = document.createElement("div");
qMainDiv.style.backgroundColor = "#bbdd99";
qMainDiv.style.width = "600px";
qMainDiv.style.height = "600px";
qMainDiv.style.margin = "20px";
qMainDiv.mbDrag1 = false;
qMainDiv.mbDrag2 = false;
qMainDiv.mbDragC = false;
qMainDiv.mdX1 = 100.0;
qMainDiv.mdY1 = 200.0;
qMainDiv.mdXC = 200.0;
qMainDiv.mdYC = 100.0;
qMainDiv.mdX2 = 300.0;
qMainDiv.mdY2 = 200.0;
qMainDiv.mdDistSq1 = 200.0;
qMainDiv.mdDistSqC = 200.0;
qMainDiv.mdDistSq2 = 200.0;
qMainDiv.mqPoint1 = null;
qMainDiv.mqPointC = null;
qMainDiv.mqPoint2 = null;
qMainDiv.mqQuadSvg = null;
qMainDiv.mqQuadPath = null;
qMainDiv.mqLinePath = null;
qMainDiv.onmousemove = function(e) {
this.SetCursorCoordinates(e);
this.SetCursorDistancesSquared();
// Make a cease for draging each of the three points
if (this.mbDrag1) {
this.mdX1 = this.mdCursorX;
this.mdY1 = this.mdCursorY;
this.mqPoint1.setAttribute('cx', this.mdX1);
this.mqPoint1.setAttribute('cy', this.mdY1);
this.mqLinePath.setAttribute('d', 'M'+this.mdX1+','+this.mdY1+
' L'+this.mdXC+','+this.mdYC+' '+this.mdX2+','+this.mdY2);
this.mqQuadPath.setAttribute('d', 'M'+this.mdX1+','+this.mdY1+
' Q'+this.mdXC+','+this.mdYC+' '+this.mdX2+','+this.mdY2);
} else if (this.mbDrag2){
this.mdX2 = this.mdCursorX;
this.mdY2 = this.mdCursorY;
this.mqPoint2.setAttribute('cx', this.mdX2);
this.mqPoint2.setAttribute('cy', this.mdY2);
this.mqLinePath.setAttribute('d', 'M'+this.mdX1+','+this.mdY1+
' L'+this.mdXC+','+this.mdYC+' '+this.mdX2+','+this.mdY2);
this.mqQuadPath.setAttribute('d', 'M'+this.mdX1+','+this.mdY1+
' Q'+this.mdXC+','+this.mdYC+' '+this.mdX2+','+this.mdY2);
} else if (this.mbDragC){
this.mdXC = this.mdCursorX;
this.mdYC = this.mdCursorY;
this.mqPointC.setAttribute('cx', this.mdXC);
this.mqPointC.setAttribute('cy', this.mdYC);
this.mqLinePath.setAttribute('d', 'M'+this.mdX1+','+this.mdY1+
' L'+this.mdXC+','+this.mdYC+' '+this.mdX2+','+this.mdY2);
this.mqQuadPath.setAttribute('d', 'M'+this.mdX1+','+this.mdY1+
' Q'+this.mdXC+','+this.mdYC+' '+this.mdX2+','+this.mdY2);
} else {
// If the cursor is close to a drag point, change it.
if ((this.mdDistSq1 <= 25) || (this.mdDistSqC <= 25) || (this.mdDistSq2 <= 25)) {
this.style.cursor = "pointer";
} else {
this.style.cursor = "auto";
}
}
};
qMainDiv.onmousedown = function(e) {
this.SetCursorCoordinates(e);
this.SetCursorDistancesSquared();
// Check if either point is in range to be dragged
if (this.mdDistSq1 <= 25) {
this.mbDrag1 = true;
} else if (this.mdDistSqC <= 25) {
this.mbDragC = true;
} else if (this.mdDistSq2 <= 25) {
this.mbDrag2 = true;
}
};
qMainDiv.onmouseup = function(e) {
this.mbDrag1 = false;
this.mbDragC = false;
this.mbDrag2 = false;
};
// The function that is used to calculate the cursor coordinates
qMainDiv.SetCursorCoordinates = function(e) {
var dElementOffsetX = 0;
var dElementOffsetY = 0;
var qElement = this;
do{
dElementOffsetX += qElement.offsetLeft - qElement.scrollLeft;
dElementOffsetY += qElement.offsetTop - qElement.scrollTop;
qElement = qElement.offsetParent
} while(qElement != document.body)
this.mdCursorX = e.pageX - dElementOffsetX;
this.mdCursorY = e.pageY - dElementOffsetY;
}
qMainDiv.SetCursorDistancesSquared = function() {
var dX1 = this.mdX1;
var dY1 = this.mdY1;
var dXC = this.mdXC;
var dYC = this.mdYC;
var dX2 = this.mdX2;
var dY2 = this.mdY2;
// Calculate the distance squared from the cursor to each point
this.mdDistSq1 = (dX1 - this.mdCursorX)*(dX1 - this.mdCursorX)
+ (dY1 - this.mdCursorY)*(dY1 - this.mdCursorY);
this.mdDistSqC = (dXC - this.mdCursorX)*(dXC - this.mdCursorX)
+ (dYC - this.mdCursorY)*(dYC - this.mdCursorY);
this.mdDistSq2 = (dX2 - this.mdCursorX)*(dX2 - this.mdCursorX)
+ (dY2 - this.mdCursorY)*(dY2 - this.mdCursorY);
}
// The whole SVG region
var qQuadSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
qQuadSvg.style.width="600px";
qQuadSvg.style.height="600px";
qMainDiv.mqQuadSvg = qQuadSvg;
// The Quadratic interpolation path
var qQuadPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
qQuadPath.setAttribute('d', 'M'+qMainDiv.mdX1+','+qMainDiv.mdY1+
' Q'+qMainDiv.mdXC+','+qMainDiv.mdYC+
' '+qMainDiv.mdX2+','+qMainDiv.mdY2);
qQuadPath.setAttribute('stroke-width', '3');
qQuadPath.setAttribute('stroke', 'rgb(240, 255, 220)');
qQuadPath.setAttribute('fill', 'none');
qMainDiv.mqQuadPath = qQuadPath;
// The two-piece linear path bounding the quadratic
var qLinePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
qLinePath.setAttribute('d', 'M'+qMainDiv.mdX1+','+qMainDiv.mdY1+
' L'+qMainDiv.mdXC+','+qMainDiv.mdYC+' '+qMainDiv.mdX2+','+qMainDiv.mdY2);
qLinePath.setAttribute('stroke-width', '1');
qLinePath.setAttribute('stroke', 'rgb(240, 255, 220)');
qLinePath.setAttribute('fill', 'none');
qMainDiv.mqLinePath = qLinePath;
// The first endpoint
var qPoint1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
qPoint1.setAttribute('cx', qMainDiv.mdX1);
qPoint1.setAttribute('cy', qMainDiv.mdY1);
qPoint1.setAttribute('r', 4);
qPoint1.setAttribute('fill', 'rgb(240, 255, 220)');
qMainDiv.mqPoint1 = qPoint1;
// The middle control point
var qPointC = document.createElementNS("http://www.w3.org/2000/svg", "circle");
qPointC.setAttribute('cx', qMainDiv.mdXC);
qPointC.setAttribute('cy', qMainDiv.mdYC);
qPointC.setAttribute('r', 4);
qPointC.setAttribute('fill', 'rgb(240, 255, 220)');
qMainDiv.mqPointC = qPointC;
// The second endpoint
var qPoint2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
qPoint2.setAttribute('cx', qMainDiv.mdX2);
qPoint2.setAttribute('cy', qMainDiv.mdY2);
qPoint2.setAttribute('r', 4);
qPoint2.setAttribute('fill', 'rgb(240, 255, 220)');
qMainDiv.mqPoint2 = qPoint2;
// Put all of the elements together
qQuadSvg.appendChild(qQuadPath);
qQuadSvg.appendChild(qLinePath);
qQuadSvg.appendChild(qPoint1);
qQuadSvg.appendChild(qPointC);
qQuadSvg.appendChild(qPoint2);
qMainDiv.appendChild(qQuadSvg);
qBody.appendChild(qMainDiv);Output
© 2007–2025 XoaX.net LLC. All rights reserved.