From 55bd222946514783ca03d2ed1c8b00f63dc91f1a Mon Sep 17 00:00:00 2001 From: mrbubblesort Date: Wed, 11 Dec 2013 12:01:13 +0900 Subject: [PATCH 1/6] Added additional options for tag background These options are now available for styling tags: bgBox - (true|false) background box on/off bgBoxPadX - (int) x padding on tag bgBoxPadY - (int) y padding on tag bgBoxStroke - (string) outline color for bg box bgBoxColor - (string) color for bg box bgBoxRadius - (int) radius of bg box corners For example, this would make the tags look like a bootstrap label (http://getbootstrap.com/components/#labels): $('#tag-canvas').tagcanvas({ 'textColour' : '#FFFFFF', 'bgBox': true, 'bgBoxPadX' : 6, 'bgBoxPadY' : 10, 'bgBoxStroke' : "#5BC0DE", 'bgBoxColor' : "#5BC0DE", 'bgBoxRadius' : 5, }); --- jquery.tagcanvas.js | 66 ++++++++++++++++++++++++++++++++++++++------- 1 file changed, 57 insertions(+), 9 deletions(-) diff --git a/jquery.tagcanvas.js b/jquery.tagcanvas.js index dfb5883..b9c96fc 100644 --- a/jquery.tagcanvas.js +++ b/jquery.tagcanvas.js @@ -245,9 +245,40 @@ function FindGradientColour(t,p) { d = c.getImageData(~~((l-1)*p),0,1,1).data; return 'rgba(' + d[0] + ',' + d[1] + ',' + d[2] + ',' + (d[3]/255) + ')'; } -function TextSet(c,f,l,s,sc,sb,so,wm,wl) { - var xo = (sb || 0) + (so && so[0] < 0 ? abs(so[0]) : 0), - yo = (sb || 0) + (so && so[1] < 0 ? abs(so[1]) : 0), i, xc; +function RoundRect(ctx, x, y, width, height, radius, fill, stroke) { + if (typeof stroke == "undefined" ) { + stroke = true; + } + if (typeof fill == "undefined" ) { + fill = true; + } + if (typeof radius === "undefined") { + radius = 5; + } + ctx.beginPath(); + ctx.moveTo(x + radius, y); + ctx.lineTo(x + width - radius, y); + ctx.quadraticCurveTo(x + width, y, x + width, y + radius); + ctx.lineTo(x + width, y + height - radius); + ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); + ctx.lineTo(x + radius, y + height); + ctx.quadraticCurveTo(x, y + height, x, y + height - radius); + ctx.lineTo(x, y + radius); + ctx.quadraticCurveTo(x, y, x + radius, y); + ctx.closePath(); + + if (stroke) { + ctx.stroke(); + } + if (fill) { + ctx.fill(); + } +} + +function TextSet(c,f,l,s,sc,sb,so,wm,wl,bgpX,bgpY) { + var bgpX = (bgpX || 0), bgpY = (bgpY || 0); + var xo = (sb || 0) + (so && so[0] < 0 ? abs(so[0]) : 0) + bgpX, + yo = (sb || 0) + (so && so[1] < 0 ? abs(so[1]) : 0) + bgpY, i, xc; c.font = f; c.textBaseline = 'top'; c.fillStyle = l; @@ -260,13 +291,18 @@ function TextSet(c,f,l,s,sc,sb,so,wm,wl) { yo += parseInt(f); } } -function TextToCanvas(s,f,ht,w,h,l,sc,sb,so,padx,pady,wmax,wlist) { +function TextToCanvas(s,f,ht,w,h,l,sc,sb,so,padx,pady,wmax,wlist,bgb,bgbs,bgbc,bgbr,bgpX,bgpY) { var cw = w + abs(so[0]) + sb + sb, ch = h + abs(so[1]) + sb + sb, cv, c; - cv = NewCanvas(cw+padx,ch+pady); + cv = NewCanvas(cw+padx+(bgpX*2),ch+pady+(bgpY*2)); if(!cv) return null; c = cv.getContext('2d'); - TextSet(c,f,l,s,sc,sb,so,wmax,wlist); + c.strokeStyle = bgbs; + c.fillStyle = bgbc; + if(bgb) { + RoundRect(c, 0, 0, cv.width, cv.height, bgbr); + } + TextSet(c,f,l,s,sc,sb,so,wmax,wlist,bgpX,bgpY); return cv; } function AddShadowToImage(i,sc,sb,so) { @@ -285,7 +321,7 @@ function AddShadowToImage(i,sc,sb,so) { c.drawImage(i, xo, yo, i.width, i.height); return cv; } -function FindTextBoundingBox(s,f,ht) { +function FindTextBoundingBox(s,f,ht,bgpX,bgpY) { var w = parseInt(s.toString().length * ht), h = parseInt(ht * 2 * s.length), cv = NewCanvas(w,h), c, idata, w1, h1, x, y, i, ex; if(!cv) @@ -704,6 +740,12 @@ function Tag(tc,text,a,v,w,h,col,font,original) { this.weight = this.sc = this.alpha = 1; this.weighted = !tc.weight; this.outline = new Outline(tc); + this.bgBox = tc.bgBox; + this.bgBoxPadX = tc.bgBoxPadX; + this.bgBoxPadY = tc.bgBoxPadY; + this.bgBoxStroke = tc.bgBoxStroke; + this.bgBoxColor = tc.bgBoxColor; + this.bgBoxRadius = tc.bgBoxRadius; if(!this.image) { this.textHeight = tc.textHeight; this.extents = FindTextBoundingBox(this.text, this.textFont, this.textHeight); @@ -743,7 +785,7 @@ Tproto.Measure = function(c,t) { c.font = f; cw = this.MeasureText(c); this.image = TextToCanvas(this.text, f, th, cw, s * this.h, this.colour, - t.shadow, s * t.shadowBlur, soff, s, s, cw, this.line_widths); + t.shadow, s * t.shadowBlur, soff, s, s, cw, this.line_widths, this.bgBox, this.bgBoxStroke, this.bgBoxColor, this.bgBoxRadius, this.bgBoxPadX, this.bgBoxPadY); if(this.image) { this.w = this.image.width / s; this.h = this.image.height / s; @@ -1511,7 +1553,13 @@ centreFunc: Nop, splitWidth: 0, animTiming: 'Smooth', clickToFront: false, -fadeIn: 0 +fadeIn: 0, +bgBox: false, +bgBoxPadX: 0, +bgBoxPadY: 0, +bgBoxStroke: "#FFFFFF", +bgBoxColor: "#FFFFFF", +bgBoxRadius: 0, }; for(i in TagCanvas.options) TagCanvas[i] = TagCanvas.options[i]; window.TagCanvas = TagCanvas; From e52d4b702e1d54a0d103c10de2cb8292d54b99ab Mon Sep 17 00:00:00 2001 From: mrbubblesort Date: Wed, 11 Dec 2013 13:25:08 +0900 Subject: [PATCH 2/6] unneeded param --- jquery.tagcanvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.tagcanvas.js b/jquery.tagcanvas.js index b9c96fc..df08957 100644 --- a/jquery.tagcanvas.js +++ b/jquery.tagcanvas.js @@ -321,7 +321,7 @@ function AddShadowToImage(i,sc,sb,so) { c.drawImage(i, xo, yo, i.width, i.height); return cv; } -function FindTextBoundingBox(s,f,ht,bgpX,bgpY) { +function FindTextBoundingBox(s,f,ht) { var w = parseInt(s.toString().length * ht), h = parseInt(ht * 2 * s.length), cv = NewCanvas(w,h), c, idata, w1, h1, x, y, i, ex; if(!cv) From 778a46e839b55ecb311add3f3ab5ad8f0daaccc5 Mon Sep 17 00:00:00 2001 From: mrbubblesort Date: Fri, 20 Dec 2013 13:38:13 +0900 Subject: [PATCH 3/6] Changed bgBoxColor to bgBoxColour to match other params --- jquery.tagcanvas.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/jquery.tagcanvas.js b/jquery.tagcanvas.js index df08957..d5a2bcf 100644 --- a/jquery.tagcanvas.js +++ b/jquery.tagcanvas.js @@ -744,7 +744,7 @@ function Tag(tc,text,a,v,w,h,col,font,original) { this.bgBoxPadX = tc.bgBoxPadX; this.bgBoxPadY = tc.bgBoxPadY; this.bgBoxStroke = tc.bgBoxStroke; - this.bgBoxColor = tc.bgBoxColor; + this.bgBoxColour = tc.bgBoxColour; this.bgBoxRadius = tc.bgBoxRadius; if(!this.image) { this.textHeight = tc.textHeight; @@ -785,7 +785,7 @@ Tproto.Measure = function(c,t) { c.font = f; cw = this.MeasureText(c); this.image = TextToCanvas(this.text, f, th, cw, s * this.h, this.colour, - t.shadow, s * t.shadowBlur, soff, s, s, cw, this.line_widths, this.bgBox, this.bgBoxStroke, this.bgBoxColor, this.bgBoxRadius, this.bgBoxPadX, this.bgBoxPadY); + t.shadow, s * t.shadowBlur, soff, s, s, cw, this.line_widths, this.bgBox, this.bgBoxStroke, this.bgBoxColour, this.bgBoxRadius, this.bgBoxPadX, this.bgBoxPadY); if(this.image) { this.w = this.image.width / s; this.h = this.image.height / s; @@ -1558,7 +1558,7 @@ bgBox: false, bgBoxPadX: 0, bgBoxPadY: 0, bgBoxStroke: "#FFFFFF", -bgBoxColor: "#FFFFFF", +bgBoxColour: "#FFFFFF", bgBoxRadius: 0, }; for(i in TagCanvas.options) TagCanvas[i] = TagCanvas.options[i]; From f60dacdb1c750f9829a284530f4021669a44454c Mon Sep 17 00:00:00 2001 From: mrbubblesort Date: Fri, 20 Dec 2013 14:23:51 +0900 Subject: [PATCH 4/6] Multiply box padding and radius by txtScale --- jquery.tagcanvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.tagcanvas.js b/jquery.tagcanvas.js index d5a2bcf..ea0ca03 100644 --- a/jquery.tagcanvas.js +++ b/jquery.tagcanvas.js @@ -785,7 +785,7 @@ Tproto.Measure = function(c,t) { c.font = f; cw = this.MeasureText(c); this.image = TextToCanvas(this.text, f, th, cw, s * this.h, this.colour, - t.shadow, s * t.shadowBlur, soff, s, s, cw, this.line_widths, this.bgBox, this.bgBoxStroke, this.bgBoxColour, this.bgBoxRadius, this.bgBoxPadX, this.bgBoxPadY); + t.shadow, s * t.shadowBlur, soff, s, s, cw, this.line_widths, this.bgBox, this.bgBoxStroke, this.bgBoxColour, s * this.bgBoxRadius, s * this.bgBoxPadX, s * this.bgBoxPadY); if(this.image) { this.w = this.image.width / s; this.h = this.image.height / s; From 9859e0d67d16ea02d5ceb7f38cca5e20bf9d3648 Mon Sep 17 00:00:00 2001 From: mrbubblesort Date: Tue, 24 Dec 2013 09:45:17 +0900 Subject: [PATCH 5/6] made 'outlineMethod' option compatible with 'bgBox' When outlineMethod = 'colour' and bgBox = true, tag's background box changes to the colour set in outlineColour --- jquery.tagcanvas.js | 68 +++++++++++++++++++++++++++++++-------------- 1 file changed, 47 insertions(+), 21 deletions(-) diff --git a/jquery.tagcanvas.js b/jquery.tagcanvas.js index ea0ca03..ba67797 100644 --- a/jquery.tagcanvas.js +++ b/jquery.tagcanvas.js @@ -279,6 +279,7 @@ function TextSet(c,f,l,s,sc,sb,so,wm,wl,bgpX,bgpY) { var bgpX = (bgpX || 0), bgpY = (bgpY || 0); var xo = (sb || 0) + (so && so[0] < 0 ? abs(so[0]) : 0) + bgpX, yo = (sb || 0) + (so && so[1] < 0 ? abs(so[1]) : 0) + bgpY, i, xc; + c.font = f; c.textBaseline = 'top'; c.fillStyle = l; @@ -665,30 +666,45 @@ Oproto.DrawColourText = function(c,x,y,w,h,colour,tag,x1,y1) { Oproto.DrawColourImage = function(c,x,y,w,h,colour,tag,x1,y1) { var ccanvas = c.canvas, fx = ~~max(x,0), fy = ~~max(y,0), fw = min(ccanvas.width - fx, w) + .5|0, fh = min(ccanvas.height - fy,h) + .5|0, cc; - if(ocanvas) - ocanvas.width = fw, ocanvas.height = fh; - else - ocanvas = NewCanvas(fw, fh); + if(ocanvas) { + ocanvas.width = fw, ocanvas.height = fh; + } + else { + ocanvas = NewCanvas(fw, fh); + } if(!ocanvas) return this.SetMethod('outline'); // if using IE and images, give up! cc = ocanvas.getContext('2d'); - cc.drawImage(ccanvas,fx,fy,fw,fh,0,0,fw,fh); - c.clearRect(fx,fy,fw,fh); - tag.alpha = 1; - tag.Draw(c,x1,y1); - c.setTransform(1,0,0,1,0,0); - c.save(); - c.beginPath(); - c.rect(fx,fy,fw,fh); - c.clip(); - c.globalCompositeOperation = 'source-in'; - c.fillStyle = colour; - c.fillRect(fx,fy,fw,fh); - c.restore(); - c.globalCompositeOperation = 'destination-over'; - c.drawImage(ocanvas,0,0,fw,fh,fx,fy,fw,fh); - c.globalCompositeOperation = 'source-over'; + if(tag.bgBox) { + var scale = tag.txtScale; + var th = scale * tag.textHeight; + var cw = tag.MeasureText(tag.tc.ctxt); + tag.image = TextToCanvas(tag.text, th + 'px ' + tag.textFont, th, cw, th, tag.colour, tag.tc.shadow, scale * tag.tc.shadowBlur, + [scale * tag.tc.shadowOffset[0], scale * tag.tc.shadowOffset[1]], scale, scale, cw, tag.line_widths, true, colour, + colour, scale * tag.bgBoxRadius, scale * tag.bgBoxPadX, scale * tag.bgBoxPadY); + tag.alpha = 1; + tag.Draw(c,x1,y1); + } + else { + cc.drawImage(ccanvas,fx,fy,fw,fh,0,0,fw,fh); + c.clearRect(fx,fy,fw,fh); + tag.alpha = 1; + tag.Draw(c,x1,y1); + c.setTransform(1,0,0,1,0,0); + c.save(); + c.beginPath(); + c.rect(fx,fy,fw,fh); + c.clip(); + c.globalCompositeOperation = 'source-in'; + c.fillStyle = colour; + c.fillRect(fx,fy,fw,fh); + c.restore(); + c.globalCompositeOperation = 'destination-over'; + c.drawImage(ocanvas,0,0,fw,fh,fx,fy,fw,fh); + c.globalCompositeOperation = 'source-over'; + } + return 1; }; Oproto.DrawBlock = function(c,x,y,w,h,colour) { @@ -723,6 +739,7 @@ Oproto.PreDraw = Oproto.PostDraw = Oproto.LastDraw = Nop; * @constructor */ function Tag(tc,text,a,v,w,h,col,font,original) { +this.jrx = 0; var c = tc.ctxt; this.tc = tc; this.image = text.src ? text : null; @@ -746,11 +763,13 @@ function Tag(tc,text,a,v,w,h,col,font,original) { this.bgBoxStroke = tc.bgBoxStroke; this.bgBoxColour = tc.bgBoxColour; this.bgBoxRadius = tc.bgBoxRadius; + this.txtScale = tc.txtScale; if(!this.image) { this.textHeight = tc.textHeight; this.extents = FindTextBoundingBox(this.text, this.textFont, this.textHeight); this.Measure(c,tc); } + this.oimage = this.image; this.SetShadowColour = tc.shadowAlpha ? this.SetShadowColourAlpha : this.SetShadowColourFixed; this.SetDraw(tc); } @@ -880,7 +899,14 @@ Tproto.CheckActive = function(c,xoff,yoff) { w = this.w, h = this.h, x = this.x - w/2, y = this.y - h/2; o.Update(x, y, w, h, this.sc, this.z, xoff, yoff); - return o.Active(c, t.mx, t.my) ? o : null; + + var result = o.Active(c, t.mx, t.my); + if(this.bgBox && !result && this.image != this.oimage) { + this.image = this.oimage; + this.Draw(c,xoff,yoff); + } + + return result ? o : null; }; Tproto.Clicked = function(e) { var a = this.a, t = a.target, h = a.href, evt; From 1588045ea0de1c14bee840c1f6b79ab6ea923576 Mon Sep 17 00:00:00 2001 From: mrbubblesort Date: Tue, 24 Dec 2013 09:50:53 +0900 Subject: [PATCH 6/6] fixed tag txt onHover for bgBox --- jquery.tagcanvas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.tagcanvas.js b/jquery.tagcanvas.js index ba67797..4345837 100644 --- a/jquery.tagcanvas.js +++ b/jquery.tagcanvas.js @@ -680,7 +680,7 @@ Oproto.DrawColourImage = function(c,x,y,w,h,colour,tag,x1,y1) { var scale = tag.txtScale; var th = scale * tag.textHeight; var cw = tag.MeasureText(tag.tc.ctxt); - tag.image = TextToCanvas(tag.text, th + 'px ' + tag.textFont, th, cw, th, tag.colour, tag.tc.shadow, scale * tag.tc.shadowBlur, + tag.image = TextToCanvas(tag.text, th + 'px ' + tag.textFont, th, cw, th-tag.bgBoxPadY, tag.colour, tag.tc.shadow, scale * tag.tc.shadowBlur, [scale * tag.tc.shadowOffset[0], scale * tag.tc.shadowOffset[1]], scale, scale, cw, tag.line_widths, true, colour, colour, scale * tag.bgBoxRadius, scale * tag.bgBoxPadX, scale * tag.bgBoxPadY); tag.alpha = 1;