From b1516b2580dbdffd5ee68c75d4eb769b52faa100 Mon Sep 17 00:00:00 2001 From: wout Date: Fri, 21 Dec 2012 11:11:00 +0100 Subject: [PATCH] text font() method can be used as a getter --- README.md | 20 +++++++++++++++++++- dist/svg.js | 50 ++++++++++++++++++++++++++++++------------------- dist/svg.min.js | 2 +- src/text.js | 50 ++++++++++++++++++++++++++++++------------------- 4 files changed, 82 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 57fa85f..60ca2aa 100644 --- a/README.md +++ b/README.md @@ -102,8 +102,15 @@ var text = draw.text({ y: 0 }); ``` -Styling text can be done using the 'font()' method: +Styling text can be done using the 'font()' method which is both a setter and a getter: ```javascript +// get a single font property +text.font('size'); + +// set a single font property +text.font('anchor', 'start'); + +// set multiple font properties at once text.font({ family: 'Helvetica', size: 36, @@ -115,6 +122,17 @@ Changing text afterwards is also possible with the 'text()' method: ```javascript text.text('Brilliant!'); ``` +To get the raw text content: +```javascript +text.content; +``` +Setting attributes like fill, opacity, x and y is the same as other elements: +```javascript +text.attr({ + fill: '#333', + x: 100 +}); +``` ### Image element diff --git a/dist/svg.js b/dist/svg.js index db34602..6560668 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -508,9 +508,11 @@ SVG.Text = function Text() { this.constructor.call(this, SVG.create('text')); - this.style = { 'font-size': 16 }; + this.style = { 'font-size': 16, 'font-family': 'Helvetica' }; this.leading = 1.2; this.anchor = 'start'; + this._s = ('size family weight stretch variant style').split(' '); + this._p = ('leading anchor').split(' '); }; // inherit from SVG.Element @@ -538,33 +540,43 @@ return this; }, - font: function(o) { - var i, a = ('size family weight stretch variant style').split(' '); - - for (i = a.length - 1; i >= 0; i--) - if (o[a[i]] != null) - this.style['font-' + a[i]] = o[a[i]]; - - a = ('leading anchor').split(' '); - - for (i = a.length - 1; i >= 0; i--) - if (o[a[i]] != null) - this[a[i]] = o[a[i]]; + font: function(a, v) { + if (typeof a == 'object') { + var i, s = this._s; + + for (i = s.length - 1; i >= 0; i--) + if (a[s[i]] != null) + this.style['font-' + s[i]] = a[s[i]]; + + s = this._p; + + for (i = s.length - 1; i >= 0; i--) + if (a[s[i]] != null) + this[s[i]] = a[s[i]]; + + } else if (v != null) { + var s = {}; + s[a] = v; + this.font(s); + + } else { + return this._p.indexOf(a) > -1 ? this[a] : this._s.indexOf(a) > -1 ? this.style['font-' + a] : void 0; + } return this.text(this.content); }, _style: function() { - var i, s = '', a = ('size family weight stretch variant style').split(' '); + var i, o = '', s = this._s; - for (i = a.length - 1; i >= 0; i--) - if (this.style['font-' + a[i]] != null) - s += 'font-' + a[i] + ':' + this.style['font-' + a[i]] + ';'; + for (i = s.length - 1; i >= 0; i--) + if (this.style['font-' + s[i]] != null) + o += 'font-' + s[i] + ':' + this.style['font-' + s[i]] + ';'; if (this.anchor != null) - s += 'text-anchor:' + this.anchor + ';'; + o += 'text-anchor:' + this.anchor + ';'; - return s; + return o; } }); diff --git a/dist/svg.min.js b/dist/svg.min.js index 6a0e45d..3ae8654 100644 --- a/dist/svg.min.js +++ b/dist/svg.min.js @@ -1,2 +1,2 @@ /* svg.js 0.1a - svg container element group arrange clip doc defs shape rect circle ellipse path image text sugar - svgjs.com/license */ -(function(){function t(){this.constructor.call(this,SVG.create("tspan"))}this.SVG={ns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",create:function(e){return document.createElementNS(this.ns,e)},extend:function(e,t){for(var n in t)e.prototype[n]=t[n]}},this.svg=function(e){return new SVG.Doc(e)},SVG.Container={add:function(e,t){return this.has(e)||(t=t==null?this.children().length:t,this.children().splice(t,0,e),this.node.insertBefore(e.node,this.node.childNodes[t]),e.parent=this),this},has:function(e){return this.children().indexOf(e)>=0},children:function(){return this._children||(this._children=[])},remove:function(e){return this.removeAt(this.children().indexOf(e))},removeAt:function(e){if(0<=e&&e1&&t.remove(this).add(this,e-1),this},front:function(){return this.mother().remove(this).add(this),this},back:function(){var e,t=this.mother();return t.levelDefs(),e=this.siblings().indexOf(this),e>1&&t.remove(this).add(this,0),this}});var e=0;SVG.Clip=function(){this.constructor.call(this,SVG.create("clipPath")),this.id="_"+e++,this.attr("id",this.id)},SVG.Clip.prototype=new SVG.Element,SVG.extend(SVG.Clip,SVG.Container),SVG.extend(SVG.Element,{clip:function(e){var t=this.mother().defs().clipPath();return e(t),this.clipTo(t)},clipTo:function(e){return this.attr("clip-path","url(#"+e.id+")")}}),SVG.Doc=function(t){this.constructor.call(this,SVG.create("svg")),this.attr("xmlns",SVG.ns),this.attr("version","1.1"),this.attr("xlink",SVG.xlink,SVG.ns),this.defs(),typeof t=="string"&&(t=document.getElementById(t)),t.appendChild(this.node)},SVG.Doc.prototype=new SVG.Element,SVG.extend(SVG.Doc,SVG.Container),SVG.Defs=function(){this.constructor.call(this,SVG.create("defs"))},SVG.Defs.prototype=new SVG.Element,SVG.extend(SVG.Defs,SVG.Container),SVG.extend(SVG.Defs,{clipPath:function(){var e=new SVG.Clip;return this.add(e),e}}),SVG.Shape=function(t){this.constructor.call(this,t)},SVG.Shape.prototype=new SVG.Element,SVG.Rect=function(){this.constructor.call(this,SVG.create("rect"))},SVG.Rect.prototype=new SVG.Shape,SVG.Circle=function(){this.constructor.call(this,SVG.create("circle"))},SVG.Circle.prototype=new SVG.Shape,SVG.extend(SVG.Circle,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center()},size:function(e){return this.attr("r",e/2).center()},center:function(e,t){var n=this.attrs.r||0;return this.attr({cx:e||(this.attrs.x||0)+n,cy:t||(this.attrs.y||0)+n})}}),SVG.Ellipse=function(){this.constructor.call(this,SVG.create("ellipse"))},SVG.Ellipse.prototype=new SVG.Shape,SVG.extend(SVG.Ellipse,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center()},size:function(e,t){return this.attr({rx:e/2,ry:t/2}).center()},center:function(e,t){return this.attr({cx:e||(this.attrs.x||0)+(this.attrs.rx||0),cy:t||(this.attrs.y||0)+(this.attrs.ry||0)})}}),SVG.Path=function(){this.constructor.call(this,SVG.create("path"))},SVG.Path.prototype=new SVG.Shape,SVG.extend(SVG.Path,{data:function(e){return this.attr("d",e)}}),SVG.Image=function(){this.constructor.call(this,SVG.create("image"))},SVG.Image.prototype=new SVG.Shape,SVG.extend(SVG.Image,{load:function(e){return this.attr("href",e,SVG.xlink)}}),SVG.Text=function(){this.constructor.call(this,SVG.create("text")),this.style={"font-size":16},this.leading=1.2,this.anchor="start"},SVG.Text.prototype=new SVG.Shape,SVG.extend(SVG.Text,{text:function(e){this.content=e=e||"text";var n,r=this.parentDoc(),i=e.split("\n");while(this.node.hasChildNodes())this.node.removeChild(this.node.lastChild);for(n=0,l=i.length;n=0;t--)e[n[t]]!=null&&(this.style["font-"+n[t]]=e[n[t]]);n="leading anchor".split(" ");for(t=n.length-1;t>=0;t--)e[n[t]]!=null&&(this[n[t]]=e[n[t]]);return this.text(this.content)},_style:function(){var e,t="",n="size family weight stretch variant style".split(" ");for(e=n.length-1;e>=0;e--)this.style["font-"+n[e]]!=null&&(t+="font-"+n[e]+":"+this.style["font-"+n[e]]+";");return this.anchor!=null&&(t+="text-anchor:"+this.anchor+";"),t}}),t.prototype=new SVG.Shape,SVG.extend(t,{text:function(e){return this.node.appendChild(document.createTextNode(e)),this}}),SVG.extend(SVG.Shape,{fill:function(e){return e.color!=null&&this.attr("fill",e.color),e.opacity!=null&&this.attr("fill-opacity",e.opacity),this},stroke:function(e){e.color&&this.attr("stroke",e.color);var t="width opacity linecap linejoin miterlimit dasharray dashoffset".split(" ");for(var n=t.length-1;n>=0;n--)e[t[n]]!=null&&this.attr("stroke-"+t[n],e[t[n]]);return this}}),SVG.extend(SVG.Element,{rotate:function(e){var t=this.bbox();return e.x==null&&(e.x=t.cx),e.y==null&&(e.y=t.cy),this.transform("rotate("+(e.deg||0)+" "+e.x+" "+e.y+")",e.relative)}}),SVG.extend(SVG.G,{move:function(e,t){return this.transform("translate("+e+" "+t+")")}})}).call(this); \ No newline at end of file +(function(){function t(){this.constructor.call(this,SVG.create("tspan"))}this.SVG={ns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",create:function(e){return document.createElementNS(this.ns,e)},extend:function(e,t){for(var n in t)e.prototype[n]=t[n]}},this.svg=function(e){return new SVG.Doc(e)},SVG.Container={add:function(e,t){return this.has(e)||(t=t==null?this.children().length:t,this.children().splice(t,0,e),this.node.insertBefore(e.node,this.node.childNodes[t]),e.parent=this),this},has:function(e){return this.children().indexOf(e)>=0},children:function(){return this._children||(this._children=[])},remove:function(e){return this.removeAt(this.children().indexOf(e))},removeAt:function(e){if(0<=e&&e1&&t.remove(this).add(this,e-1),this},front:function(){return this.mother().remove(this).add(this),this},back:function(){var e,t=this.mother();return t.levelDefs(),e=this.siblings().indexOf(this),e>1&&t.remove(this).add(this,0),this}});var e=0;SVG.Clip=function(){this.constructor.call(this,SVG.create("clipPath")),this.id="_"+e++,this.attr("id",this.id)},SVG.Clip.prototype=new SVG.Element,SVG.extend(SVG.Clip,SVG.Container),SVG.extend(SVG.Element,{clip:function(e){var t=this.mother().defs().clipPath();return e(t),this.clipTo(t)},clipTo:function(e){return this.attr("clip-path","url(#"+e.id+")")}}),SVG.Doc=function(t){this.constructor.call(this,SVG.create("svg")),this.attr("xmlns",SVG.ns),this.attr("version","1.1"),this.attr("xlink",SVG.xlink,SVG.ns),this.defs(),typeof t=="string"&&(t=document.getElementById(t)),t.appendChild(this.node)},SVG.Doc.prototype=new SVG.Element,SVG.extend(SVG.Doc,SVG.Container),SVG.Defs=function(){this.constructor.call(this,SVG.create("defs"))},SVG.Defs.prototype=new SVG.Element,SVG.extend(SVG.Defs,SVG.Container),SVG.extend(SVG.Defs,{clipPath:function(){var e=new SVG.Clip;return this.add(e),e}}),SVG.Shape=function(t){this.constructor.call(this,t)},SVG.Shape.prototype=new SVG.Element,SVG.Rect=function(){this.constructor.call(this,SVG.create("rect"))},SVG.Rect.prototype=new SVG.Shape,SVG.Circle=function(){this.constructor.call(this,SVG.create("circle"))},SVG.Circle.prototype=new SVG.Shape,SVG.extend(SVG.Circle,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center()},size:function(e){return this.attr("r",e/2).center()},center:function(e,t){var n=this.attrs.r||0;return this.attr({cx:e||(this.attrs.x||0)+n,cy:t||(this.attrs.y||0)+n})}}),SVG.Ellipse=function(){this.constructor.call(this,SVG.create("ellipse"))},SVG.Ellipse.prototype=new SVG.Shape,SVG.extend(SVG.Ellipse,{move:function(e,t){return this.attrs.x=e,this.attrs.y=t,this.center()},size:function(e,t){return this.attr({rx:e/2,ry:t/2}).center()},center:function(e,t){return this.attr({cx:e||(this.attrs.x||0)+(this.attrs.rx||0),cy:t||(this.attrs.y||0)+(this.attrs.ry||0)})}}),SVG.Path=function(){this.constructor.call(this,SVG.create("path"))},SVG.Path.prototype=new SVG.Shape,SVG.extend(SVG.Path,{data:function(e){return this.attr("d",e)}}),SVG.Image=function(){this.constructor.call(this,SVG.create("image"))},SVG.Image.prototype=new SVG.Shape,SVG.extend(SVG.Image,{load:function(e){return this.attr("href",e,SVG.xlink)}}),SVG.Text=function(){this.constructor.call(this,SVG.create("text")),this.style={"font-size":16,"font-family":"Helvetica"},this.leading=1.2,this.anchor="start",this._s="size family weight stretch variant style".split(" "),this._p="leading anchor".split(" ")},SVG.Text.prototype=new SVG.Shape,SVG.extend(SVG.Text,{text:function(e){this.content=e=e||"text";var n,r=this.parentDoc(),i=e.split("\n");while(this.node.hasChildNodes())this.node.removeChild(this.node.lastChild);for(n=0,l=i.length;n=0;n--)e[r[n]]!=null&&(this.style["font-"+r[n]]=e[r[n]]);r=this._p;for(n=r.length-1;n>=0;n--)e[r[n]]!=null&&(this[r[n]]=e[r[n]])}else{if(t==null)return this._p.indexOf(e)>-1?this[e]:this._s.indexOf(e)>-1?this.style["font-"+e]:void 0;var r={};r[e]=t,this.font(r)}return this.text(this.content)},_style:function(){var e,t="",n=this._s;for(e=n.length-1;e>=0;e--)this.style["font-"+n[e]]!=null&&(t+="font-"+n[e]+":"+this.style["font-"+n[e]]+";");return this.anchor!=null&&(t+="text-anchor:"+this.anchor+";"),t}}),t.prototype=new SVG.Shape,SVG.extend(t,{text:function(e){return this.node.appendChild(document.createTextNode(e)),this}}),SVG.extend(SVG.Shape,{fill:function(e){return e.color!=null&&this.attr("fill",e.color),e.opacity!=null&&this.attr("fill-opacity",e.opacity),this},stroke:function(e){e.color&&this.attr("stroke",e.color);var t="width opacity linecap linejoin miterlimit dasharray dashoffset".split(" ");for(var n=t.length-1;n>=0;n--)e[t[n]]!=null&&this.attr("stroke-"+t[n],e[t[n]]);return this}}),SVG.extend(SVG.Element,{rotate:function(e){var t=this.bbox();return e.x==null&&(e.x=t.cx),e.y==null&&(e.y=t.cy),this.transform("rotate("+(e.deg||0)+" "+e.x+" "+e.y+")",e.relative)}}),SVG.extend(SVG.G,{move:function(e,t){return this.transform("translate("+e+" "+t+")")}})}).call(this); \ No newline at end of file diff --git a/src/text.js b/src/text.js index 655815d..78675ed 100644 --- a/src/text.js +++ b/src/text.js @@ -2,9 +2,11 @@ SVG.Text = function Text() { this.constructor.call(this, SVG.create('text')); - this.style = { 'font-size': 16 }; + this.style = { 'font-size': 16, 'font-family': 'Helvetica' }; this.leading = 1.2; this.anchor = 'start'; + this._s = ('size family weight stretch variant style').split(' '); + this._p = ('leading anchor').split(' '); }; // inherit from SVG.Element @@ -32,33 +34,43 @@ SVG.extend(SVG.Text, { return this; }, - font: function(o) { - var i, a = ('size family weight stretch variant style').split(' '); - - for (i = a.length - 1; i >= 0; i--) - if (o[a[i]] != null) - this.style['font-' + a[i]] = o[a[i]]; - - a = ('leading anchor').split(' '); - - for (i = a.length - 1; i >= 0; i--) - if (o[a[i]] != null) - this[a[i]] = o[a[i]]; + font: function(a, v) { + if (typeof a == 'object') { + var i, s = this._s; + + for (i = s.length - 1; i >= 0; i--) + if (a[s[i]] != null) + this.style['font-' + s[i]] = a[s[i]]; + + s = this._p; + + for (i = s.length - 1; i >= 0; i--) + if (a[s[i]] != null) + this[s[i]] = a[s[i]]; + + } else if (v != null) { + var s = {}; + s[a] = v; + this.font(s); + + } else { + return this._p.indexOf(a) > -1 ? this[a] : this._s.indexOf(a) > -1 ? this.style['font-' + a] : void 0; + } return this.text(this.content); }, _style: function() { - var i, s = '', a = ('size family weight stretch variant style').split(' '); + var i, o = '', s = this._s; - for (i = a.length - 1; i >= 0; i--) - if (this.style['font-' + a[i]] != null) - s += 'font-' + a[i] + ':' + this.style['font-' + a[i]] + ';'; + for (i = s.length - 1; i >= 0; i--) + if (this.style['font-' + s[i]] != null) + o += 'font-' + s[i] + ':' + this.style['font-' + s[i]] + ';'; if (this.anchor != null) - s += 'text-anchor:' + this.anchor + ';'; + o += 'text-anchor:' + this.anchor + ';'; - return s; + return o; } }); -- 2.39.5