From 9f622f7b160fb977a4354eb0f775d4b53a2f7443 Mon Sep 17 00:00:00 2001 From: wout Date: Mon, 31 Dec 2012 12:21:45 +0100 Subject: Added mask.js --- src/clip.js | 5 +---- src/event.js | 13 ++++++++++++- src/gradient.js | 5 +---- src/mask.js | 42 ++++++++++++++++++++++++++++++++++++++++++ src/svg.js | 7 +++++-- 5 files changed, 61 insertions(+), 11 deletions(-) create mode 100644 src/mask.js (limited to 'src') diff --git a/src/clip.js b/src/clip.js index 6d820df..ab7bebf 100644 --- a/src/clip.js +++ b/src/clip.js @@ -1,12 +1,9 @@ -// initialize id sequence -var clipID = 0; - SVG.Clip = function Clip() { this.constructor.call(this, SVG.create('clipPath')); // set unique id - this.id = 'svgjs_clip_' + (clipID++); + this.id = 'svgjs_' + (SVG.did++); this.attr('id', this.id); }; diff --git a/src/event.js b/src/event.js index 4f587d2..32c2be2 100644 --- a/src/event.js +++ b/src/event.js @@ -1,5 +1,16 @@ -var eventTypes = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove'].forEach(function(e) { +[ 'click', + 'dblclick', + 'mousedown', + 'mouseup', + 'mouseover', + 'mouseout', + 'mousemove', + 'touchstart', + 'touchend', + 'touchmove', + 'touchcancel' ].forEach(function(e) { + // add event to SVG.Elment SVG.Element.prototype[e] = function(f) { var s = this; diff --git a/src/gradient.js b/src/gradient.js index b9007ef..b9533cb 100644 --- a/src/gradient.js +++ b/src/gradient.js @@ -1,12 +1,9 @@ -// initialize id sequence -var gradID = 0; - SVG.Gradient = function Gradient(t) { this.constructor.call(this, SVG.create(t + 'Gradient')); // set unique id - this.id = 'svgjs_grad_' + (gradID++); + this.id = 'svgjs_' + (SVG.did++); this.attr('id', this.id); // store type diff --git a/src/mask.js b/src/mask.js new file mode 100644 index 0000000..a9b457e --- /dev/null +++ b/src/mask.js @@ -0,0 +1,42 @@ + +SVG.Mask = function Mask() { + this.constructor.call(this, SVG.create('mask')); + + // set unique id + this.id = 'svgjs_' + (SVG.did++); + this.attr('id', this.id); +}; + +// inherit from SVG.Element +SVG.Mask.prototype = new SVG.Element(); + +// include the container object +SVG.extend(SVG.Mask, SVG.Container); + +// add clipping functionality to element +SVG.extend(SVG.Element, { + + // mask element using another element + mask: function(b) { + var m = this.parent.defs().mask(); + b(m); + + return this.maskTo(m); + }, + + // distribute mask to svg element + maskTo: function(m) { + return this.attr('mask', 'url(#' + m.id + ')'); + } + +}); + +// add def-specific functions +SVG.extend(SVG.Defs, { + + // create clippath + mask: function() { + return this.put(new SVG.Mask()); + } + +}); \ No newline at end of file diff --git a/src/svg.js b/src/svg.js index fd5f967..1a4095f 100644 --- a/src/svg.js +++ b/src/svg.js @@ -1,8 +1,11 @@ this.SVG = { // define default namespaces - ns: 'http://www.w3.org/2000/svg', - xlink: 'http://www.w3.org/1999/xlink', + ns: 'http://www.w3.org/2000/svg', + xlink: 'http://www.w3.org/1999/xlink', + + // initialize defs id sequence + did: 0, // method for element creation create: function(e) { -- cgit v1.2.3