Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ShadowCanvas : Drawing illustration with css box-shadow
/**
* ShadowCanvas
*
* Drawing illustration with css box-shadow
*
* @version 0.9
* @author mach3ss
* @require jQuery
*/
var ShadowCanvas = function(selector, option){
// config
this.option = $.extend({}, this.option, option);
this.node = $.extend({}, this.node);
// nodes
this.node.container = $(selector);
this.node.canvas = $("<div>")
.css({position:"absolute"})
.appendTo(this.node.container);
// events
this.node.container
.on("mousemove", $.proxy(this._onMouseMove, this))
.on("mousedown", $.proxy(this.start, this))
.on("mouseleave mouseup", $.proxy(this.stop, this));
};
(function(fn){
fn.boxShadowText = "{x}px {y}px {blur}px {size}px {color}";
fn.drawing = false;
fn.node = {
container : null,
canvas : null
};
fn.option = {
color: "black",
blur : 5,
size : 5
};
/**
* Configure option or get the option value
*
* @param String key
* @param Mixed value (optional)
* @return Mixed
*/
fn.config = function(key, value){
if(this.option.hasOwnProperty(key)){
if(typeof(value) !== "undefined"){
this.option[key] = value;
return this;
} else {
return this.option[key];
}
}
};
/**
* Get css text for box-shadow
*
* @param Integer x
* @param Integer y
* @return String
*/
fn._getBoxShadowText = function(x, y){
var o, callback;
o = this.option;
o.x = x;
o.y = y;
callback = function(a, b){
return o[b];
};
return this.boxShadowText.replace((/\{(\w+)\}/g), callback);
};
/**
* Draw the point with box-shadow
*
* @param Integer x
* @param Integer y
* @return self
*/
fn.draw = function(x, y){
var shadow = this.node.canvas.css("boxShadow");
shadow = shadow === "none" ? "" : "," + shadow ;
shadow = this._getBoxShadowText(x, y) + shadow;
this.node.canvas.css("boxShadow", shadow);
return this;
};
/**
* Start drawing
*
* @return self
*/
fn.start = function(){
this.drawing = true;
return this;
};
/**
* Stop drawing
*
* @return self
*/
fn.stop = function(){
this.drawing = false;
return this;
};
fn._onMouseMove = function(e){
var offset, x, y;
if(! this.drawing){
return;
}
offset = this.node.container.offset();
x = e.clientX - offset.left + document.body.scrollLeft;
y = e.clientY - offset.top + document.body.scrollTop;
if(x < this.node.container.width() && y < this.node.container.height()){
this.draw(x, y);
}
};
/**
* Clear all on canvas
*
* @return self
*/
fn.clear = function(){
this.node.canvas.css("boxShadow", "none");
return this;
};
/**
* Get css text of the illustration on canvas now
*
* @return String
*/
fn.getCSS = function(){
return this.node.canvas.css("boxShadow");
};
}(ShadowCanvas.prototype));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.