Skip to content

Instantly share code, notes, and snippets.

@thuongvu

thuongvu/01_shapesLibrary.js

Last active August 29, 2015 14:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thuongvu/3117f658ec7fb2d72706 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thuongvu/3117f658ec7fb2d72706 to your computer and use it in GitHub Desktop.
Download ZIP
Utility functions/classes for svg
Raw
01_shapesLibrary.js
(function(shape) {
// utility
var getSet = function(propertyName, _property) {
if (_property) {
this['_' + propertyName] = _property;
return this;
} else {
return this['_' + propertyName];
};
};
var getSetMultiple = function() {
if (arguments[0].value) {
for (var i = 0; i < arguments.length; i++) {
var key = arguments[i].key;
var value = arguments[i].value;
this[key] = value;
};
return this;
} else {
var results = [];
for (var i = 0; i < arguments.length; i++) {
var key = arguments[i].key;
var value = arguments[i].value;
results.push(this[key]);
};
return results;
};
};
var setAttributes = function(obj) {
for (prop in this) {
if (this.hasOwnProperty(prop)) {
var attr = prop.slice(1);
var value = this[prop];
obj.setAttributeNS(null, attr, value);
};
};
};
var append = function(parent, child) {
if (parent) {
parent.appendChild(child);
} else {
document.querySelector('svg').appendChild(child);
};
};
// shapes
var Circle = shape.Circle = function() {};
shape.Circle.prototype = {
cx: function(_cx) {
return getSet.call(this, 'cx', _cx);
},
cy: function(_cy) {
return getSet.call(this, 'cy', _cy);
},
center: function(_cx, _cy) {
return getSetMultiple.call(this, {key: "_cx" , value: _cx}, {key: "_cy" , value: _cy});
},
r: function(_r) {
return getSet.call(this, 'r', _r);
},
stroke: function(_stroke) {
return getSet.call(this, 'stroke', _stroke);
},
strokeWidth: function(_strokeWidth) {
return getSet.call(this, 'strokeWidth', _strokeWidth);
},
fill: function(_fill) {
return getSet.call(this, 'fill', _fill);
},
transform: function(_transform) {
return getSet.call(this, 'transform', _transform);
},
class: function(_class) {
return getSet.call(this, 'class', _class);
},
draw: function(parent) {
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
setAttributes.call(this, circle);
append(parent, circle);
return this;
}
};
var Line = shape.Line = function() {};
shape.Line.prototype = {
x1: function(_x1) {
return getSet.call(this, 'x1', _x1);
},
y1: function(_y1) {
return getSet.call(this, 'y1', _y1);
},
x2: function(_x2) {
return getSet.call(this, 'x2', _x2);
},
y2: function(_y2) {
return getSet.call(this, 'y2', _y2);
},
stroke: function(_stroke) {
return getSet.call(this, 'stroke', _stroke);
},
strokeWidth: function(_strokeWidth) {
return getSet.call(this, 'stroke-width', _strokeWidth);
},
transform: function(_transform) {
return getSet.call(this, 'transform', _transform);
},
rotate: function(_rotate) {
return this.transform("rotate(" + _rotate + ")")
},
class: function(_class) {
return getSet.call(this, 'class', _class);
},
draw: function(parent) {
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this._d = "M " + this._x1 + ", " + this._y1 + ", " + this._x2 + ", " + this._y2;
delete this._x1;
delete this._x2;
delete this._y1;
delete this._y2;
setAttributes.call(this, path);
append(parent, path);
return this;
}
};
var Rectangle = shape.Rectangle = function() {};
shape.Rectangle.prototype = {
cx: function(_centerX) {
return getSet.call(this, 'centerX', _centerX);
},
cy: function(_centerY) {
return getSet.call(this, 'centerY', _centerY);
},
center: function(_centerX, _centerY) {
return getSetMultiple.call(this, {key: "_centerX" , value: _centerX}, {key: "_centerY" , value: _centerY});
},
width: function(_width) {
return getSet.call(this, 'width', _width);
},
height: function(_height) {
return getSet.call(this, 'height', _height);
},
stroke: function(_stroke) {
return getSet.call(this, 'stroke', _stroke);
},
strokeWidth: function(_strokeWidth) {
return getSet.call(this, 'stroke-width', _strokeWidth);
},
fill: function(_fill) {
return getSet.call(this, 'fill', _fill);
},
draw: function(parent) {
var rect = document.createElementNS ("http://www.w3.org/2000/svg", "rect");
this._x = this._centerX - this._width / 2;
this._y = this._centerY - this._height / 2;
delete this._centerX;
delete this._centerY;
setAttributes.call(this, rect);
append(parent, rect);
return this;
}
};
var Square = shape.Square = function() {};
shape.Square.prototype = new Rectangle();
Square.prototype.width = function(_width) {
return getSetMultiple.call(this, {key: "_width" , value: _width}, {key: "_height" , value: _width});
};
shape.Square.prototype.height = function(_height) {
return getSetMultiple.call(this, {key: "_height" , value: _height}, {key: "_width" , value: _height});
};
var Text = shape.Text = function() {};
shape.Text.prototype = {
x: function(_x) {
return getSet.call(this, 'x', _x);
},
y: function(_y) {
return getSet.call(this, 'y', _y);
},
text: function(_text) {
return getSet.call(this, 'text', _text);
},
fontFamily: function(_fontFamily) {
return getSet.call(this, 'font-family', _fontFamily);
},
fontSize: function(_fontSize) {
return getSet.call(this, 'font-size', _fontSize);
},
draw: function(parent) {
var text = document.createElementNS ("http://www.w3.org/2000/svg", "text");
text.innerHTML = this._text;
setAttributes.call(this, text);
append(parent, text);
return this;
}
};
})(shape = window.shape || {});
Raw
02_shapes.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shapes</title>
</head>
<body>
<svg id="container"></svg>
<script src="01_shapesLibrary.js"></script>
<script>
(function() {
var svg = document.getElementById('container');
var c = new shape.Circle()
.center(100, 100).r(50)
.fill("red")
.draw();
var l = new shape.Line()
.x1(200).y1(100).x2(200).y2(200)
.stroke("green").strokeWidth(10)
.rotate(30)
.class("lineeee")
.draw(svg);
var s = new shape.Square()
.center(200, 200).width(100)
.fill("blue")
.draw(svg);
var r = new shape.Rectangle()
.center(350, 250).width(100).height(150)
.fill("orange")
.draw(svg);
var t = new shape.Text()
.x(200).y(100)
.text("The " + c.fill() + " circle is at cx: " + c.cx() + ", cy: " + c.cy() + " with the radius of " + c.r() + " pixels.")
.fontFamily("Helvetica")
.fontSize(10)
.draw(svg);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment