No, stuff like jQuery won’t help, but other things like extracting out some functions will help to get some structure in there.
First, by using a drawShape()
function, to help make it easier to understand what is happening:
function drawShape(container, pathroute, fillColor) {
var path = document.getElementById(container);
path.setAttribute("d", pathroute);
path.setAttribute("fill", fillColor);
}
And second, by using moveTo()
and lineTo()
functions:
function moveTo(x, y) {
return "M" + x + "," + y;
}
function lineTo(x, y) {
return "l" + x + "," + y;
}
var route = [
moveTo(a, b + c),
lineTo(a, 0),
lineTo(0, a + a)
];
And lastly, join them together for the pathroute:
var pathroute = route.join() + "z";
drawShape("shape1", pathroute, "green");
That way, the route can be easily modified and adjusted to fit different needs.
The resulting improved code looks like this:
function moveTo(x, y) {
return "M" + x + "," + y;
}
function lineTo(x, y) {
return "l" + x + "," + y;
}
function drawShape(container, pathroute, fillColor) {
var path = document.getElementById(container);
path.setAttribute("d", pathroute);
path.setAttribute("fill", fillColor);
}
var a = 100;
var b = 20;
var c = 30;
var route = [
moveTo(a, b + c),
lineTo(a, 0),
lineTo(0, a + a)
];
var pathroute = route.join() + "z";
drawShape("shape1", pathroute, "green");