Skip to content

Additional options for tags #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mrbubblesort wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Additional options for tags #1

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
55bd222
Added additional options for tag background
mrbubblesort Dec 11, 2013
e52d4b7
unneeded param
mrbubblesort Dec 11, 2013
778a46e
Changed bgBoxColor to bgBoxColour to match other params
mrbubblesort Dec 20, 2013
f60dacd
Multiply box padding and radius by txtScale
mrbubblesort Dec 20, 2013
9859e0d
made 'outlineMethod' option compatible with 'bgBox'
mrbubblesort Dec 24, 2013
1588045
fixed tag txt onHover for bgBox
mrbubblesort Dec 24, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 103 additions & 29 deletions jquery.tagcanvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,9 +245,41 @@ 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;
Expand All @@ -260,13 +292,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) {
Expand Down Expand Up @@ -629,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.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;
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) {
Expand Down Expand Up @@ -687,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;
Expand All @@ -704,11 +757,19 @@ 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.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);
}
Expand Down Expand Up @@ -743,7 +804,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.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;
Expand Down Expand Up @@ -838,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;
Expand Down Expand Up @@ -1511,7 +1579,13 @@ centreFunc: Nop,
splitWidth: 0,
animTiming: 'Smooth',
clickToFront: false,
fadeIn: 0
fadeIn: 0,
bgBox: false,
bgBoxPadX: 0,
bgBoxPadY: 0,
bgBoxStroke: "#FFFFFF",
bgBoxColour: "#FFFFFF",
bgBoxRadius: 0,
};
for(i in TagCanvas.options) TagCanvas[i] = TagCanvas.options[i];
window.TagCanvas = TagCanvas;
Expand Down