tag-canvas
Version:
基于 tagcanvas.js 可通过 npm 引入
1,541 lines (1,515 loc) • 77.1 kB
JavaScript
"use strict";
var i, j, abs = Math.abs, sin = Math.sin, cos = Math.cos, max = Math.max,
min = Math.min, ceil = Math.ceil, sqrt = Math.sqrt, pow = Math.pow,
hexlookup3 = {}, hexlookup2 = {}, hexlookup1 = {
0: "0,", 1: "17,", 2: "34,", 3: "51,", 4: "68,", 5: "85,",
6: "102,", 7: "119,", 8: "136,", 9: "153,", a: "170,", A: "170,",
b: "187,", B: "187,", c: "204,", C: "204,", d: "221,", D: "221,",
e: "238,", E: "238,", f: "255,", F: "255,"
}, Oproto, Tproto, TCproto, Mproto, Vproto, TSproto, TCVproto,
doc = document, ocanvas, audio, audioClick, handlers = {};
for (i = 0; i < 256; ++i) {
j = i.toString(16);
if (i < 16)
j = '0' + j;
hexlookup2[j] = hexlookup2[j.toUpperCase()] = i.toString() + ',';
}
function Defined(d) {
return typeof d != 'undefined';
}
function IsObject(o) {
return typeof o == 'object' && o != null;
}
function Clamp(v, mn, mx) {
return isNaN(v) ? mx : min(mx, max(mn, v));
}
function Nop() {
return false;
}
function TimeNow() {
return new Date().valueOf();
}
function SortList(l, f) {
var nl = [], tl = l.length, i;
for (i = 0; i < tl; ++i)
nl.push(l[i]);
nl.sort(f);
return nl;
}
function Shuffle(a) {
var i = a.length - 1, t, p;
while (i) {
p = ~~(Math.random() * i);
t = a[i];
a[i] = a[p];
a[p] = t;
--i;
}
}
function SetupAudio() {
var ac = window.AudioContext || window.webkitAudioContext;
audio = new ac();
if (!audio) {
audio = 'off';
return;
}
return audio;
}
function AudioIcon(mute, c, size, offsetx, offsety, stroke, colour) {
var x = offsetx, y = offsety, s = size * 0.01, w = 80 * s, h = 100 * s, d = 40 * s, e = 30 * s;
var f = e / 2;
var x2 = x + w, x1 = x2 - d;
var y3 = y + h, y2 = y3 - e, y1 = y + e, y4 = y + h / 2;
c.setTransform(1, 0, 0, 1, 0, 0);
c.globalAlpha = 1;
c.strokeStyle = colour;
c.lineWidth = stroke;
c.lineJoin = 'round';
c.beginPath();
c.moveTo(x1, y1);
c.lineTo(x1, y2);
c.moveTo(x2, y3);
c.lineTo(x1, y2);
c.lineTo(x, y2);
c.lineTo(x, y1);
c.lineTo(x1, y1);
c.lineTo(x2, y);
if (mute) {
c.lineTo(x2, y1);
c.moveTo(x2, y2);
c.lineTo(x2, y3);
c.moveTo(x2 - f, y4 - f);
c.lineTo(x2 + f, y4 + f);
c.moveTo(x2 + f, y4 - f);
c.lineTo(x2 - f, y4 + f);
c.stroke();
return;
}
c.closePath();
c.stroke();
}
function Vector(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
Vproto = Vector.prototype;
Vproto.length = function () {
return sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
};
Vproto.dot = function (v) {
return this.x * v.x + this.y * v.y + this.z * v.z;
};
Vproto.cross = function (v) {
var x = this.y * v.z - this.z * v.y,
y = this.z * v.x - this.x * v.z,
z = this.x * v.y - this.y * v.x;
return new Vector(x, y, z);
};
Vproto.angle = function (v) {
var dot = this.dot(v), ac;
if (dot == 0)
return Math.PI / 2.0;
ac = dot / (this.length() * v.length());
if (ac >= 1)
return 0;
if (ac <= -1)
return Math.PI;
return Math.acos(ac);
};
Vproto.unit = function () {
var l = this.length();
return new Vector(this.x / l, this.y / l, this.z / l);
};
function MakeVector(lg, lt) {
lt = lt * Math.PI / 180;
lg = lg * Math.PI / 180;
var x = sin(lg) * cos(lt), y = -sin(lt), z = -cos(lg) * cos(lt);
return new Vector(x, y, z);
}
function Matrix(a) {
this[1] = { 1: a[0], 2: a[1], 3: a[2] };
this[2] = { 1: a[3], 2: a[4], 3: a[5] };
this[3] = { 1: a[6], 2: a[7], 3: a[8] };
}
Mproto = Matrix.prototype;
Matrix.Identity = function () {
return new Matrix([1, 0, 0, 0, 1, 0, 0, 0, 1]);
};
Matrix.Rotation = function (angle, u) {
var sina = sin(angle), cosa = cos(angle), mcos = 1 - cosa;
return new Matrix([
cosa + pow(u.x, 2) * mcos, u.x * u.y * mcos - u.z * sina, u.x * u.z * mcos + u.y * sina,
u.y * u.x * mcos + u.z * sina, cosa + pow(u.y, 2) * mcos, u.y * u.z * mcos - u.x * sina,
u.z * u.x * mcos - u.y * sina, u.z * u.y * mcos + u.x * sina, cosa + pow(u.z, 2) * mcos
]);
}
Mproto.mul = function (m) {
var a = [], i, j, mmatrix = (m.xform ? 1 : 0);
for (i = 1; i <= 3; ++i)
for (j = 1; j <= 3; ++j) {
if (mmatrix)
a.push(this[i][1] * m[1][j] +
this[i][2] * m[2][j] +
this[i][3] * m[3][j]);
else
a.push(this[i][j] * m);
}
return new Matrix(a);
};
Mproto.xform = function (p) {
var a = {}, x = p.x, y = p.y, z = p.z;
a.x = x * this[1][1] + y * this[2][1] + z * this[3][1];
a.y = x * this[1][2] + y * this[2][2] + z * this[3][2];
a.z = x * this[1][3] + y * this[2][3] + z * this[3][3];
return a;
};
function PointsOnSphere(n, xr, yr, zr, magic) {
var i, y, r, phi, pts = [], off = 2 / n, inc;
inc = Math.PI * (3 - sqrt(5) + (parseFloat(magic) ? parseFloat(magic) : 0));
for (i = 0; i < n; ++i) {
y = i * off - 1 + (off / 2);
r = sqrt(1 - y * y);
phi = i * inc;
pts.push([cos(phi) * r * xr, y * yr, sin(phi) * r * zr]);
}
return pts;
}
function Cylinder(n, o, xr, yr, zr, magic) {
var phi, pts = [], off = 2 / n, inc, i, j, k, l;
inc = Math.PI * (3 - sqrt(5) + (parseFloat(magic) ? parseFloat(magic) : 0));
for (i = 0; i < n; ++i) {
j = i * off - 1 + (off / 2);
phi = i * inc;
k = cos(phi);
l = sin(phi);
pts.push(o ? [j * xr, k * yr, l * zr] : [k * xr, j * yr, l * zr]);
}
return pts;
}
function Ring(o, n, xr, yr, zr, j) {
var phi, pts = [], inc = Math.PI * 2 / n, i, k, l;
for (i = 0; i < n; ++i) {
phi = i * inc;
k = cos(phi);
l = sin(phi);
pts.push(o ? [j * xr, k * yr, l * zr] : [k * xr, j * yr, l * zr]);
}
return pts;
}
function PointsOnCylinderV(n, xr, yr, zr, m) { return Cylinder(n, 0, xr, yr, zr, m) }
function PointsOnCylinderH(n, xr, yr, zr, m) { return Cylinder(n, 1, xr, yr, zr, m) }
function PointsOnRingV(n, xr, yr, zr, offset) {
offset = isNaN(offset) ? 0 : offset * 1;
return Ring(0, n, xr, yr, zr, offset);
}
function PointsOnRingH(n, xr, yr, zr, offset) {
offset = isNaN(offset) ? 0 : offset * 1;
return Ring(1, n, xr, yr, zr, offset);
}
function CentreImage(t) {
var i = new Image;
i.onload = function () {
var dx = i.width / 2, dy = i.height / 2;
t.centreFunc = function (c, w, h, cx, cy) {
c.setTransform(1, 0, 0, 1, 0, 0);
c.globalAlpha = 1;
c.drawImage(i, cx - dx, cy - dy);
};
};
i.src = t.centreImage;
}
function SetAlpha(c, a) {
var d = c, p1, p2, ae = (a * 1).toPrecision(3) + ')';
if (c[0] === '#') {
if (!hexlookup3[c])
if (c.length === 4)
hexlookup3[c] = 'rgba(' + hexlookup1[c[1]] + hexlookup1[c[2]] + hexlookup1[c[3]];
else
hexlookup3[c] = 'rgba(' + hexlookup2[c.substr(1, 2)] + hexlookup2[c.substr(3, 2)] + hexlookup2[c.substr(5, 2)];
d = hexlookup3[c] + ae;
} else if (c.substr(0, 4) === 'rgb(' || c.substr(0, 4) === 'hsl(') {
d = (c.replace('(', 'a(').replace(')', ',' + ae));
} else if (c.substr(0, 5) === 'rgba(' || c.substr(0, 5) === 'hsla(') {
p1 = c.lastIndexOf(',') + 1, p2 = c.indexOf(')');
a *= parseFloat(c.substring(p1, p2));
d = c.substr(0, p1) + a.toPrecision(3) + ')';
}
return d;
}
function NewCanvas(w, h) {
// if using excanvas, give up now
if (window.G_vmlCanvasManager)
return null;
var c = doc.createElement('canvas');
c.width = w;
c.height = h;
return c;
}
// I think all browsers pass this test now...
function ShadowAlphaBroken() {
var cv = NewCanvas(3, 3), c, i;
if (!cv)
return false;
c = cv.getContext('2d');
c.strokeStyle = '#000';
c.shadowColor = '#fff';
c.shadowBlur = 3;
c.globalAlpha = 0;
c.strokeRect(2, 2, 2, 2);
c.globalAlpha = 1;
i = c.getImageData(2, 2, 1, 1);
cv = null;
return (i.data[0] > 0);
}
function SetGradient(c, l, o, g) {
var gd = c.createLinearGradient(0, 0, l, 0), i;
for (i in g)
gd.addColorStop(1 - i, g[i]);
c.fillStyle = gd;
c.fillRect(0, o, l, 1);
}
function FindGradientColour(tc, p, r) {
var l = 1024, h = 1, gl = tc.weightGradient, cv, c, i, d;
if (tc.gCanvas) {
c = tc.gCanvas.getContext('2d');
h = tc.gCanvas.height;
} else {
if (IsObject(gl[0]))
h = gl.length;
else
gl = [gl];
tc.gCanvas = cv = NewCanvas(l, h);
if (!cv)
return null;
c = cv.getContext('2d');
for (i = 0; i < h; ++i)
SetGradient(c, l, i, gl[i]);
}
r = max(min(r || 0, h - 1), 0);
d = c.getImageData(~~((l - 1) * p), r, 1, 1).data;
return 'rgba(' + d[0] + ',' + d[1] + ',' + d[2] + ',' + (d[3] / 255) + ')';
}
function TextSet(ctxt, font, colour, strings, padx, pady, shadowColour,
shadowBlur, shadowOffsets, maxWidth, widths, align) {
var xo = padx + (shadowBlur || 0) +
(shadowOffsets.length && shadowOffsets[0] < 0 ? abs(shadowOffsets[0]) : 0),
yo = pady + (shadowBlur || 0) +
(shadowOffsets.length && shadowOffsets[1] < 0 ? abs(shadowOffsets[1]) : 0), i, xc;
ctxt.font = font;
ctxt.textBaseline = 'top';
ctxt.fillStyle = colour;
shadowColour && (ctxt.shadowColor = shadowColour);
shadowBlur && (ctxt.shadowBlur = shadowBlur);
shadowOffsets.length && (ctxt.shadowOffsetX = shadowOffsets[0],
ctxt.shadowOffsetY = shadowOffsets[1]);
for (i = 0; i < strings.length; ++i) {
xc = 0;
if (widths) {
if ('right' == align) {
xc = maxWidth - widths[i];
} else if ('centre' == align) {
xc = (maxWidth - widths[i]) / 2;
}
}
ctxt.fillText(strings[i], xo + xc, yo);
yo += parseInt(font);
}
}
function RRect(c, x, y, w, h, r, s) {
if (r) {
c.beginPath();
c.moveTo(x, y + h - r);
c.arcTo(x, y, x + r, y, r);
c.arcTo(x + w, y, x + w, y + r, r);
c.arcTo(x + w, y + h, x + w - r, y + h, r);
c.arcTo(x, y + h, x, y + h - r, r);
c.closePath();
c[s ? 'stroke' : 'fill']();
} else {
c[s ? 'strokeRect' : 'fillRect'](x, y, w, h);
}
}
function TextCanvas(strings, font, w, h, maxWidth, stringWidths, align, valign,
scale) {
this.strings = strings;
this.font = font;
this.width = w;
this.height = h;
this.maxWidth = maxWidth;
this.stringWidths = stringWidths;
this.align = align;
this.valign = valign;
this.scale = scale;
}
TCVproto = TextCanvas.prototype;
TCVproto.SetImage = function (image, w, h, position, padding, align, valign,
scale) {
this.image = image;
this.iwidth = w * this.scale;
this.iheight = h * this.scale;
this.ipos = position;
this.ipad = padding * this.scale;
this.iscale = scale;
this.ialign = align;
this.ivalign = valign;
};
TCVproto.Align = function (size, space, a) {
var pos = 0;
if (a == 'right' || a == 'bottom')
pos = space - size;
else if (a != 'left' && a != 'top')
pos = (space - size) / 2;
return pos;
};
TCVproto.Create = function (colour, bgColour, bgOutline, bgOutlineThickness,
shadowColour, shadowBlur, shadowOffsets, padding, radius) {
var cv, cw, ch, c, x1, x2, y1, y2, offx, offy, ix, iy, iw, ih, rr,
sox = abs(shadowOffsets[0]), soy = abs(shadowOffsets[1]), shadowcv, shadowc;
padding = max(padding, sox + shadowBlur, soy + shadowBlur);
x1 = 2 * (padding + bgOutlineThickness);
y1 = 2 * (padding + bgOutlineThickness);
cw = this.width + x1;
ch = this.height + y1;
offx = offy = padding + bgOutlineThickness;
if (this.image) {
ix = iy = padding + bgOutlineThickness;
iw = this.iwidth;
ih = this.iheight;
if (this.ipos == 'top' || this.ipos == 'bottom') {
if (iw < this.width)
ix += this.Align(iw, this.width, this.ialign);
else
offx += this.Align(this.width, iw, this.align);
if (this.ipos == 'top')
offy += ih + this.ipad;
else
iy += this.height + this.ipad;
cw = max(cw, iw + x1);
ch += ih + this.ipad;
} else {
if (ih < this.height)
iy += this.Align(ih, this.height, this.ivalign);
else
offy += this.Align(this.height, ih, this.valign);
if (this.ipos == 'right')
ix += this.width + this.ipad;
else
offx += iw + this.ipad;
cw += iw + this.ipad;
ch = max(ch, ih + y1);
}
}
cv = NewCanvas(cw, ch);
if (!cv)
return null;
x1 = y1 = bgOutlineThickness / 2;
x2 = cw - bgOutlineThickness;
y2 = ch - bgOutlineThickness;
rr = min(radius, x2 / 2, y2 / 2);
c = cv.getContext('2d');
if (bgColour) {
c.fillStyle = bgColour;
RRect(c, x1, y1, x2, y2, rr);
}
if (bgOutlineThickness) {
c.strokeStyle = bgOutline;
c.lineWidth = bgOutlineThickness;
RRect(c, x1, y1, x2, y2, rr, true);
}
if (shadowBlur || sox || soy) {
// use a transparent canvas to draw on
shadowcv = NewCanvas(cw, ch);
if (shadowcv) {
shadowc = c;
c = shadowcv.getContext('2d');
}
}
// don't use TextSet shadow support because it adds space for shadow
TextSet(c, this.font, colour, this.strings, offx, offy, 0, 0, [],
this.maxWidth, this.stringWidths, this.align);
if (this.image)
c.drawImage(this.image, ix, iy, iw, ih);
if (shadowc) {
// draw the text and image with the added shadow
c = shadowc;
shadowColour && (c.shadowColor = shadowColour);
shadowBlur && (c.shadowBlur = shadowBlur);
c.shadowOffsetX = shadowOffsets[0];
c.shadowOffsetY = shadowOffsets[1];
c.drawImage(shadowcv, 0, 0);
}
return cv;
};
function ExpandImage(i, w, h) {
var cv = NewCanvas(w, h), c;
if (!cv)
return null;
c = cv.getContext('2d');
c.drawImage(i, (w - i.width) / 2, (h - i.height) / 2);
return cv;
}
function ScaleImage(i, w, h) {
var cv = NewCanvas(w, h), c;
if (!cv)
return null;
c = cv.getContext('2d');
c.drawImage(i, 0, 0, w, h);
return cv;
}
function AddBackgroundToImage(i, w, h, scale, colour, othickness, ocolour,
padding, radius, ofill) {
var cw = w + ((2 * padding) + othickness) * scale,
ch = h + ((2 * padding) + othickness) * scale,
cv = NewCanvas(cw, ch), c, x1, y1, x2, y2, ocanvas, cc, rr;
if (!cv)
return null;
othickness *= scale;
radius *= scale;
x1 = y1 = othickness / 2;
x2 = cw - othickness;
y2 = ch - othickness;
padding = (padding * scale) + x1; // add space for outline
c = cv.getContext('2d');
rr = min(radius, x2 / 2, y2 / 2);
if (colour) {
c.fillStyle = colour;
RRect(c, x1, y1, x2, y2, rr);
}
if (othickness) {
c.strokeStyle = ocolour;
c.lineWidth = othickness;
RRect(c, x1, y1, x2, y2, rr, true);
}
if (ofill) {
// use compositing to colour in the image and border
ocanvas = NewCanvas(cw, ch);
cc = ocanvas.getContext('2d');
cc.drawImage(i, padding, padding, w, h);
cc.globalCompositeOperation = 'source-in';
cc.fillStyle = ocolour;
cc.fillRect(0, 0, cw, ch);
cc.globalCompositeOperation = 'destination-over';
cc.drawImage(cv, 0, 0);
cc.globalCompositeOperation = 'source-over';
c.drawImage(ocanvas, 0, 0);
} else {
c.drawImage(i, padding, padding, i.width, i.height);
}
return { image: cv, width: cw / scale, height: ch / scale };
}
/**
* Rounds off the corners of an image
*/
function RoundImage(i, r, iw, ih, s) {
var cv, c, r1 = parseFloat(r), l = max(iw, ih);
cv = NewCanvas(iw, ih);
if (!cv)
return null;
if (r.indexOf('%') > 0)
r1 = l * r1 / 100;
else
r1 = r1 * s;
c = cv.getContext('2d');
c.globalCompositeOperation = 'source-over';
c.fillStyle = '#fff';
if (r1 >= l / 2) {
r1 = min(iw, ih) / 2;
c.beginPath();
c.moveTo(iw / 2, ih / 2);
c.arc(iw / 2, ih / 2, r1, 0, 2 * Math.PI, false);
c.fill();
c.closePath();
} else {
r1 = min(iw / 2, ih / 2, r1);
RRect(c, 0, 0, iw, ih, r1, true);
c.fill();
}
c.globalCompositeOperation = 'source-in';
c.drawImage(i, 0, 0, iw, ih);
return cv;
}
/**
* Creates a new canvas containing the image and its shadow
* Returns an object containing the image and its dimensions at z=0
*/
function AddShadowToImage(i, w, h, scale, sc, sb, so) {
var sw = abs(so[0]), sh = abs(so[1]),
cw = w + (sw > sb ? sw + sb : sb * 2) * scale,
ch = h + (sh > sb ? sh + sb : sb * 2) * scale,
xo = scale * ((sb || 0) + (so[0] < 0 ? sw : 0)),
yo = scale * ((sb || 0) + (so[1] < 0 ? sh : 0)), cv, c;
cv = NewCanvas(cw, ch);
if (!cv)
return null;
c = cv.getContext('2d');
sc && (c.shadowColor = sc);
sb && (c.shadowBlur = sb * scale);
so && (c.shadowOffsetX = so[0] * scale, c.shadowOffsetY = so[1] * scale);
c.drawImage(i, xo, yo, w, h);
return { image: cv, width: cw / scale, height: ch / scale };
}
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)
return null;
c = cv.getContext('2d');
c.fillStyle = '#000';
c.fillRect(0, 0, w, h);
TextSet(c, ht + 'px ' + f, '#fff', s, 0, 0, 0, 0, [], 'centre')
idata = c.getImageData(0, 0, w, h);
w1 = idata.width; h1 = idata.height;
ex = {
min: { x: w1, y: h1 },
max: { x: -1, y: -1 }
};
for (y = 0; y < h1; ++y) {
for (x = 0; x < w1; ++x) {
i = (y * w1 + x) * 4;
if (idata.data[i + 1] > 0) {
if (x < ex.min.x) ex.min.x = x;
if (x > ex.max.x) ex.max.x = x;
if (y < ex.min.y) ex.min.y = y;
if (y > ex.max.y) ex.max.y = y;
}
}
}
// device pixels might not be css pixels
if (w1 != w) {
ex.min.x *= (w / w1);
ex.max.x *= (w / w1);
}
if (h1 != h) {
ex.min.y *= (w / h1);
ex.max.y *= (w / h1);
}
cv = null;
return ex;
}
function FixFont(f) {
return "'" + f.replace(/(\'|\")/g, '').replace(/\s*,\s*/g, "', '") + "'";
}
function AddHandler(h, f, e) {
e = e || doc;
if (e.addEventListener)
e.addEventListener(h, f, false);
else
e.attachEvent('on' + h, f);
}
function RemoveHandler(h, f, e) {
e = e || doc;
if (e.removeEventListener)
e.removeEventListener(h, f);
else
e.detachEvent('on' + h, f);
}
function AddImage(i, o, t, tc) {
var s = tc.imageScale, mscale, ic, bc, oc, iw, ih;
// image not loaded, wait for image onload
if (!o.complete)
return AddHandler('load', function () { AddImage(i, o, t, tc); }, o);
if (!i.complete)
return AddHandler('load', function () { AddImage(i, o, t, tc); }, i);
// Yes, this does look like nonsense, but it makes sure that both the
// width and height are actually set and not just calculated. This is
// required to keep proportional sizes when the images are hidden, so
// the images can be used again for another cloud.
o.width = o.width;
o.height = o.height;
if (s) {
i.width = o.width * s;
i.height = o.height * s;
}
// the standard width of the image, with imageScale applied
t.iw = i.width;
t.ih = i.height;
if (tc.txtOpt) {
ic = i;
mscale = tc.zoomMax * tc.txtScale;
iw = t.iw * mscale;
ih = t.ih * mscale;
if (iw < o.naturalWidth || ih < o.naturalHeight) {
ic = ScaleImage(i, iw, ih);
if (ic)
t.fimage = ic;
} else {
iw = t.iw;
ih = t.ih;
mscale = 1;
}
if (parseFloat(tc.imageRadius))
t.image = t.fimage = i = RoundImage(t.image, tc.imageRadius, iw, ih, mscale);
if (!t.HasText()) {
if (tc.shadow) {
ic = AddShadowToImage(t.image, iw, ih, mscale, tc.shadow, tc.shadowBlur,
tc.shadowOffset);
if (ic) {
t.fimage = ic.image;
t.w = ic.width;
t.h = ic.height;
}
}
if (tc.bgColour || tc.bgOutlineThickness) {
bc = tc.bgColour == 'tag' ? GetProperty(t.a, 'background-color') :
tc.bgColour;
oc = tc.bgOutline == 'tag' ? GetProperty(t.a, 'color') :
(tc.bgOutline || tc.textColour);
iw = t.fimage.width;
ih = t.fimage.height;
if (tc.outlineMethod == 'colour') {
// create the outline version first, using the current image state
ic = AddBackgroundToImage(t.fimage, iw, ih, mscale, bc,
tc.bgOutlineThickness, t.outline.colour, tc.padding, tc.bgRadius, 1);
if (ic)
t.oimage = ic.image;
}
ic = AddBackgroundToImage(t.fimage, iw, ih, mscale, bc,
tc.bgOutlineThickness, oc, tc.padding, tc.bgRadius);
if (ic) {
t.fimage = ic.image;
t.w = ic.width;
t.h = ic.height;
}
}
if (tc.outlineMethod == 'size') {
if (tc.outlineIncrease > 0) {
t.iw += 2 * tc.outlineIncrease;
t.ih += 2 * tc.outlineIncrease;
iw = mscale * t.iw;
ih = mscale * t.ih;
ic = ScaleImage(t.fimage, iw, ih);
t.oimage = ic;
t.fimage = ExpandImage(t.fimage, t.oimage.width, t.oimage.height);
} else {
iw = mscale * (t.iw + (2 * tc.outlineIncrease));
ih = mscale * (t.ih + (2 * tc.outlineIncrease));
ic = ScaleImage(t.fimage, iw, ih);
t.oimage = ExpandImage(ic, t.fimage.width, t.fimage.height);
}
}
}
}
t.Init();
}
function GetProperty(e, p) {
var dv = doc.defaultView, pc = p.replace(/\-([a-z])/g, function (a) { return a.charAt(1).toUpperCase() });
return (dv && dv.getComputedStyle && dv.getComputedStyle(e, null).getPropertyValue(p)) ||
(e.currentStyle && e.currentStyle[pc]);
}
function FindWeight(a, wFrom, tHeight) {
var w = 1, p;
if (wFrom) {
w = 1 * (a.getAttribute(wFrom) || tHeight);
} else if (p = GetProperty(a, 'font-size')) {
w = (p.indexOf('px') > -1 && p.replace('px', '') * 1) ||
(p.indexOf('pt') > -1 && p.replace('pt', '') * 1.25) ||
p * 3.3;
}
return w;
}
function EventToCanvasId(e) {
return e.target && Defined(e.target.id) ? e.target.id :
e.srcElement.parentNode.id;
}
function EventXY(e, c) {
var xy, p, xmul = parseInt(GetProperty(c, 'width')) / c.width,
ymul = parseInt(GetProperty(c, 'height')) / c.height;
if (Defined(e.offsetX)) {
xy = { x: e.offsetX, y: e.offsetY };
} else {
p = AbsPos(c.id);
if (Defined(e.changedTouches))
e = e.changedTouches[0];
if (e.pageX)
xy = { x: e.pageX - p.x, y: e.pageY - p.y };
}
if (xy && xmul && ymul) {
xy.x /= xmul;
xy.y /= ymul;
}
return xy;
}
function MouseOut(e) {
var cv = e.target || e.fromElement.parentNode, tc = TagCanvas.tc[cv.id];
if (tc) {
tc.mx = tc.my = -1;
tc.UnFreeze();
tc.EndDrag();
}
}
function MouseMove(e) {
var i, t = TagCanvas, tc, p, tg = EventToCanvasId(e);
for (i in t.tc) {
tc = t.tc[i];
if (tc.tttimer) {
clearTimeout(tc.tttimer);
tc.tttimer = null;
}
}
if (tg && t.tc[tg]) {
tc = t.tc[tg];
if (p = EventXY(e, tc.canvas)) {
tc.mx = p.x;
tc.my = p.y;
tc.Drag(e, p);
}
tc.drawn = 0;
}
}
function MouseDown(e) {
var t = TagCanvas, cb = doc.addEventListener ? 0 : 1,
tg = EventToCanvasId(e);
if (tg && e.button == cb && t.tc[tg]) {
t.tc[tg].BeginDrag(e);
}
}
function MouseUp(e) {
var t = TagCanvas, cb = doc.addEventListener ? 0 : 1,
tg = EventToCanvasId(e), tc;
if (tg && e.button == cb && t.tc[tg]) {
tc = t.tc[tg];
MouseMove(e);
if (!tc.EndDrag() && !tc.touchState)
tc.Clicked(e);
}
}
function TouchDown(e) {
var tg = EventToCanvasId(e), tc = (tg && TagCanvas.tc[tg]), p;
if (tc && e.changedTouches) {
if (e.touches.length == 1 && tc.touchState == 0) {
tc.touchState = 1;
tc.BeginDrag(e);
if (p = EventXY(e, tc.canvas)) {
tc.mx = p.x;
tc.my = p.y;
tc.drawn = 0;
}
} else if (e.targetTouches.length == 2 && tc.pinchZoom) {
tc.touchState = 3;
tc.EndDrag();
tc.BeginPinch(e);
} else {
tc.EndDrag();
tc.EndPinch();
tc.touchState = 0;
}
}
}
function TouchUp(e) {
var tg = EventToCanvasId(e), tc = (tg && TagCanvas.tc[tg]);
if (tc && e.changedTouches) {
switch (tc.touchState) {
case 1:
tc.Draw();
tc.Clicked();
break;
case 2:
tc.EndDrag();
break;
case 3:
tc.EndPinch();
}
tc.touchState = 0;
}
}
function TouchMove(e) {
var i, t = TagCanvas, tc, p, tg = EventToCanvasId(e);
for (i in t.tc) {
tc = t.tc[i];
if (tc.tttimer) {
clearTimeout(tc.tttimer);
tc.tttimer = null;
}
}
tc = (tg && t.tc[tg]);
if (tc && e.changedTouches && tc.touchState) {
switch (tc.touchState) {
case 1:
case 2:
if (p = EventXY(e, tc.canvas)) {
tc.mx = p.x;
tc.my = p.y;
if (tc.Drag(e, p))
tc.touchState = 2;
}
break;
case 3:
tc.Pinch(e);
}
tc.drawn = 0;
}
}
function MouseWheel(e) {
var t = TagCanvas, tg = EventToCanvasId(e);
if (tg && t.tc[tg]) {
e.cancelBubble = true;
e.returnValue = false;
e.preventDefault && e.preventDefault();
t.tc[tg].Wheel((e.wheelDelta || e.detail) > 0);
}
}
function Scroll(e) {
var i, t = TagCanvas;
clearTimeout(t.scrollTimer);
for (i in t.tc) {
t.tc[i].Pause();
}
t.scrollTimer = setTimeout(function () {
var i, t = TagCanvas;
for (i in t.tc) {
t.tc[i].Resume();
}
}, t.scrollPause);
}
function DrawCanvas() {
DrawCanvasRAF(TimeNow());
}
function DrawCanvasRAF(t) {
var tc = TagCanvas.tc, i;
TagCanvas.NextFrame(TagCanvas.interval);
t = t || TimeNow();
for (i in tc)
tc[i].Draw(t);
}
function AbsPos(id) {
var e = doc.getElementById(id), r = e.getBoundingClientRect(),
dd = doc.documentElement, b = doc.body, w = window,
xs = w.pageXOffset || dd.scrollLeft,
ys = w.pageYOffset || dd.scrollTop,
xo = dd.clientLeft || b.clientLeft,
yo = dd.clientTop || b.clientTop;
return { x: r.left + xs - xo, y: r.top + ys - yo };
}
function Project(tc, p1, sx, sy) {
var m = tc.radius * tc.z1 / (tc.z1 + tc.z2 + p1.z);
return {
x: p1.x * m * sx,
y: p1.y * m * sy,
z: p1.z,
w: (tc.z1 - p1.z) / tc.z2
};
}
/**
* @constructor
* for recursively splitting tag contents on <br> tags
*/
function TextSplitter(e) {
this.e = e;
this.br = 0;
this.line = [];
this.text = [];
this.original = e.innerText || e.textContent;
}
TSproto = TextSplitter.prototype;
TSproto.Empty = function () {
for (var i = 0; i < this.text.length; ++i)
if (this.text[i].length)
return false;
return true;
};
TSproto.Lines = function (e) {
var r = e ? 1 : 0, cn, cl, i;
e = e || this.e;
cn = e.childNodes;
cl = cn.length;
for (i = 0; i < cl; ++i) {
if (cn[i].nodeName == 'BR') {
this.text.push(this.line.join(' '));
this.br = 1;
} else if (cn[i].nodeType == 3) {
if (this.br) {
this.line = [cn[i].nodeValue];
this.br = 0;
} else {
this.line.push(cn[i].nodeValue);
}
} else {
this.Lines(cn[i]);
}
}
r || this.br || this.text.push(this.line.join(' '));
return this.text;
};
TSproto.SplitWidth = function (w, c, f, h) {
var i, j, words, text = [];
c.font = h + 'px ' + f;
for (i = 0; i < this.text.length; ++i) {
words = this.text[i].split(/\s+/);
this.line = [words[0]];
for (j = 1; j < words.length; ++j) {
if (c.measureText(this.line.join(' ') + ' ' + words[j]).width > w) {
text.push(this.line.join(' '));
this.line = [words[j]];
} else {
this.line.push(words[j]);
}
}
text.push(this.line.join(' '));
}
return this.text = text;
};
/**
* @constructor
*/
function Outline(tc, t) {
this.ts = null;
this.tc = tc;
this.tag = t;
this.x = this.y = this.w = this.h = this.sc = 1;
this.z = 0;
this.pulse = 1;
this.pulsate = tc.pulsateTo < 1;
this.colour = tc.outlineColour;
this.adash = ~~tc.outlineDash;
this.agap = ~~tc.outlineDashSpace || this.adash;
this.aspeed = tc.outlineDashSpeed * 1;
if (this.colour == 'tag')
this.colour = GetProperty(t.a, 'color');
else if (this.colour == 'tagbg')
this.colour = GetProperty(t.a, 'background-color');
this.Draw = this.pulsate ? this.DrawPulsate : this.DrawSimple;
this.radius = tc.outlineRadius | 0;
this.SetMethod(tc.outlineMethod);
}
Oproto = Outline.prototype;
Oproto.SetMethod = function (om) {
var methods = {
block: ['PreDraw', 'DrawBlock'],
colour: ['PreDraw', 'DrawColour'],
outline: ['PostDraw', 'DrawOutline'],
classic: ['LastDraw', 'DrawOutline'],
size: ['PreDraw', 'DrawSize'],
none: ['LastDraw']
}, funcs = methods[om] || methods.outline;
if (om == 'none') {
this.Draw = function () { return 1; }
} else {
this.drawFunc = this[funcs[1]];
}
this[funcs[0]] = this.Draw;
};
Oproto.Update = function (x, y, w, h, sc, z, xo, yo) {
var o = this.tc.outlineOffset, o2 = 2 * o;
this.x = sc * x + xo - o;
this.y = sc * y + yo - o;
this.w = sc * w + o2;
this.h = sc * h + o2;
this.sc = sc; // used to determine frontmost
this.z = z;
};
Oproto.Ants = function (c) {
if (!this.adash)
return;
var l = this.adash, g = this.agap, s = this.aspeed, length = l + g,
l1 = 0, l2 = l, g1 = g, g2 = 0, seq = 0, ants;
if (s) {
seq = abs(s) * (TimeNow() - this.ts) / 50;
if (s < 0)
seq = 8.64e6 - seq;
s = ~~seq % length;
}
if (s) {
if (l >= s) {
l1 = l - s;
l2 = s;
} else {
g1 = length - s;
g2 = g - g1;
}
ants = [l1, g1, l2, g2];
} else {
ants = [l, g];
}
c.setLineDash(ants);
}
Oproto.DrawOutline = function (c, x, y, w, h, colour) {
var r = min(this.radius, h / 2, w / 2);
c.strokeStyle = colour;
this.Ants(c);
RRect(c, x, y, w, h, r, true);
};
Oproto.DrawSize = function (c, x, y, w, h, colour, tag, x1, y1) {
var tw = tag.w, th = tag.h, m, i, sc;
if (this.pulsate) {
if (tag.image)
sc = (tag.image.height + this.tc.outlineIncrease) / tag.image.height;
else
sc = tag.oscale;
i = tag.fimage || tag.image;
m = 1 + ((sc - 1) * (1 - this.pulse));
tag.h *= m;
tag.w *= m;
} else {
i = tag.oimage;
}
tag.alpha = 1;
tag.Draw(c, x1, y1, i);
tag.h = th;
tag.w = tw;
return 1;
};
Oproto.DrawColour = function (c, x, y, w, h, colour, tag, x1, y1) {
if (tag.oimage) {
if (this.pulse < 1) {
tag.alpha = 1 - pow(this.pulse, 2);
tag.Draw(c, x1, y1, tag.fimage);
tag.alpha = this.pulse;
} else {
tag.alpha = 1;
}
tag.Draw(c, x1, y1, tag.oimage);
return 1;
}
return this[tag.image ? 'DrawColourImage' : 'DrawColourText'](c, x, y, w, h, colour, tag, x1, y1);
};
Oproto.DrawColourText = function (c, x, y, w, h, colour, tag, x1, y1) {
var normal = tag.colour;
tag.colour = colour;
tag.alpha = 1;
tag.Draw(c, x1, y1);
tag.colour = normal;
return 1;
};
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)
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);
if (this.pulsate) {
tag.alpha = 1 - pow(this.pulse, 2);
} else {
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.globalAlpha = 1;
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) {
var r = min(this.radius, h / 2, w / 2);
c.fillStyle = colour;
RRect(c, x, y, w, h, r);
};
Oproto.DrawSimple = function (c, tag, x1, y1, ga, useGa) {
var t = this.tc;
c.setTransform(1, 0, 0, 1, 0, 0);
c.strokeStyle = this.colour;
c.lineWidth = t.outlineThickness;
c.shadowBlur = c.shadowOffsetX = c.shadowOffsetY = 0;
c.globalAlpha = useGa ? ga : 1;
return this.drawFunc(c, this.x, this.y, this.w, this.h, this.colour, tag, x1, y1);
};
Oproto.DrawPulsate = function (c, tag, x1, y1) {
var diff = TimeNow() - this.ts, t = this.tc,
ga = t.pulsateTo + ((1 - t.pulsateTo) *
(0.5 + (cos(2 * Math.PI * diff / (1000 * t.pulsateTime)) / 2)));
this.pulse = ga = TagCanvas.Smooth(1, ga);
return this.DrawSimple(c, tag, x1, y1, ga, 1);
};
Oproto.Active = function (c, x, y) {
var a = (x >= this.x && y >= this.y &&
x <= this.x + this.w && y <= this.y + this.h);
if (a) {
this.ts = this.ts || TimeNow();
} else {
this.ts = null;
}
return a;
};
Oproto.PreDraw = Oproto.PostDraw = Oproto.LastDraw = Nop;
/**
* @constructor
*/
function Tag(tc, text, a, v, w, h, col, bcol, bradius, boutline, bothickness,
font, padding, original) {
this.tc = tc;
this.image = null;
this.text = text;
this.text_original = original;
this.line_widths = [];
this.title = a.title || null;
this.a = a;
this.position = new Vector(v[0], v[1], v[2]);
this.x = this.y = this.z = 0;
this.w = w;
this.h = h;
this.colour = col || tc.textColour;
this.bgColour = bcol || tc.bgColour;
this.bgRadius = bradius | 0;
this.bgOutline = boutline || this.colour;
this.bgOutlineThickness = bothickness | 0;
this.textFont = font || tc.textFont;
this.padding = padding | 0;
this.sc = this.alpha = 1;
this.weighted = !tc.weight;
this.outline = new Outline(tc, this);
this.audio = null;
}
Tproto = Tag.prototype;
Tproto.Init = function (e) {
var tc = this.tc;
this.textHeight = tc.textHeight;
if (this.HasText()) {
this.Measure(tc.ctxt, tc);
} else {
this.w = this.iw;
this.h = this.ih;
}
this.SetShadowColour = tc.shadowAlpha ? this.SetShadowColourAlpha : this.SetShadowColourFixed;
this.SetDraw(tc);
};
Tproto.Draw = Nop;
Tproto.HasText = function () {
return this.text && this.text[0].length > 0;
};
Tproto.EqualTo = function (e) {
var i = e.getElementsByTagName('img');
if (this.a.href != e.href)
return 0;
if (i.length)
return this.image.src == i[0].src;
return (e.innerText || e.textContent) == this.text_original;
};
Tproto.SetImage = function (i) {
this.image = this.fimage = i;
};
Tproto.SetAudio = function (a) {
this.audio = a;
this.audio.load();
};
Tproto.SetDraw = function (t) {
this.Draw = this.fimage ? (t.ie > 7 ? this.DrawImageIE : this.DrawImage) : this.DrawText;
t.noSelect && (this.CheckActive = Nop);
};
Tproto.MeasureText = function (c) {
var i, l = this.text.length, w = 0, wl;
for (i = 0; i < l; ++i) {
this.line_widths[i] = wl = c.measureText(this.text[i]).width;
w = max(w, wl);
}
return w;
};
Tproto.Measure = function (c, t) {
var extents = FindTextBoundingBox(this.text, this.textFont, this.textHeight),
s, th, f, soff, cw, twidth, theight, img, tcv;
// add the gap at the top to the height to make equal gap at bottom
theight = extents ? extents.max.y + extents.min.y : this.textHeight;
c.font = this.font = this.textHeight + 'px ' + this.textFont;
twidth = this.MeasureText(c);
if (t.txtOpt) {
s = t.txtScale;
th = s * this.textHeight;
f = th + 'px ' + this.textFont;
soff = [s * t.shadowOffset[0], s * t.shadowOffset[1]];
c.font = f;
cw = this.MeasureText(c);
tcv = new TextCanvas(this.text, f, cw + s, (s * theight) + s, cw,
this.line_widths, t.textAlign, t.textVAlign, s);
if (this.image)
tcv.SetImage(this.image, this.iw, this.ih, t.imagePosition, t.imagePadding,
t.imageAlign, t.imageVAlign, t.imageScale);
img = tcv.Create(this.colour, this.bgColour, this.bgOutline,
s * this.bgOutlineThickness, t.shadow, s * t.shadowBlur, soff,
s * this.padding, s * this.bgRadius);
// add outline image using highlight colour
if (t.outlineMethod == 'colour') {
this.oimage = tcv.Create(this.outline.colour, this.bgColour, this.outline.colour,
s * this.bgOutlineThickness, t.shadow, s * t.shadowBlur, soff,
s * this.padding, s * this.bgRadius);
} else if (t.outlineMethod == 'size') {
extents = FindTextBoundingBox(this.text, this.textFont,
this.textHeight + t.outlineIncrease);
th = extents.max.y + extents.min.y;
f = (s * (this.textHeight + t.outlineIncrease)) + 'px ' + this.textFont;
c.font = f;
cw = this.MeasureText(c);
tcv = new TextCanvas(this.text, f, cw + s, (s * th) + s, cw,
this.line_widths, t.textAlign, t.textVAlign, s);
if (this.image)
tcv.SetImage(this.image, this.iw + t.outlineIncrease,
this.ih + t.outlineIncrease, t.imagePosition, t.imagePadding,
t.imageAlign, t.imageVAlign, t.imageScale);
this.oimage = tcv.Create(this.colour, this.bgColour, this.bgOutline,
s * this.bgOutlineThickness, t.shadow, s * t.shadowBlur, soff,
s * this.padding, s * this.bgRadius);
this.oscale = this.oimage.width / img.width;
if (t.outlineIncrease > 0)
img = ExpandImage(img, this.oimage.width, this.oimage.height);
else
this.oimage = ExpandImage(this.oimage, img.width, img.height);
}
if (img) {
this.fimage = img;
twidth = this.fimage.width / s;
theight = this.fimage.height / s;
}
this.SetDraw(t);
t.txtOpt = !!this.fimage;
}
this.h = theight;
this.w = twidth;
};
Tproto.SetFont = function (f, c, bc, boc) {
this.textFont = f;
this.colour = c;
this.bgColour = bc;
this.bgOutline = boc;
this.Measure(this.tc.ctxt, this.tc);
};
Tproto.SetWeight = function (w) {
var tc = this.tc, modes = tc.weightMode.split(/[, ]/), m, s, wl = w.length;
if (!this.HasText())
return;
this.weighted = true;
for (s = 0; s < wl; ++s) {
m = modes[s] || 'size';
if ('both' == m) {
this.Weight(w[s], tc.ctxt, tc, 'size', tc.min_weight[s],
tc.max_weight[s], s);
this.Weight(w[s], tc.ctxt, tc, 'colour', tc.min_weight[s],
tc.max_weight[s], s);
} else {
this.Weight(w[s], tc.ctxt, tc, m, tc.min_weight[s], tc.max_weight[s], s);
}
}
this.Measure(tc.ctxt, tc);
};
Tproto.Weight = function (w, c, t, m, wmin, wmax, wnum) {
w = isNaN(w) ? 1 : w;
var nweight = (w - wmin) / (wmax - wmin);
if ('colour' == m)
this.colour = FindGradientColour(t, nweight, wnum);
else if ('bgcolour' == m)
this.bgColour = FindGradientColour(t, nweight, wnum);
else if ('bgoutline' == m)
this.bgOutline = FindGradientColour(t, nweight, wnum);
else if ('outline' == m)
this.outline.colour = FindGradientColour(t, nweight, wnum);
else if ('size' == m) {
if (t.weightSizeMin > 0 && t.weightSizeMax > t.weightSizeMin) {
this.textHeight = t.weightSize *
(t.weightSizeMin + (t.weightSizeMax - t.weightSizeMin) * nweight);
} else {
// min textHeight of 1
this.textHeight = max(1, w * t.weightSize);
}
}
};
Tproto.SetShadowColourFixed = function (c, s, a) {
c.shadowColor = s;
};
Tproto.SetShadowColourAlpha = function (c, s, a) {
c.shadowColor = SetAlpha(s, a);
};
Tproto.DrawText = function (c, xoff, yoff) {
var t = this.tc, x = this.x, y = this.y, s = this.sc, i, xl;
c.globalAlpha = this.alpha;
c.fillStyle = this.colour;
t.shadow && this.SetShadowColour(c, t.shadow, this.alpha);
c.font = this.font;
x += xoff / s;
y += (yoff / s) - (this.h / 2);
for (i = 0; i < this.text.length; ++i) {
xl = x;
if ('right' == t.textAlign) {
xl += this.w / 2 - this.line_widths[i];
} else if ('centre' == t.textAlign) {
xl -= this.line_widths[i] / 2;
} else {
xl -= this.w / 2;
}
c.setTransform(s, 0, 0, s, s * xl, s * y);
c.fillText(this.text[i], 0, 0);
y += this.textHeight;
}
};
Tproto.DrawImage = function (c, xoff, yoff, im) {
var x = this.x, y = this.y, s = this.sc,
i = im || this.fimage, w = this.w, h = this.h, a = this.alpha,
shadow = this.shadow;
c.globalAlpha = a;
shadow && this.SetShadowColour(c, shadow, a);
x += (xoff / s) - (w / 2);
y += (yoff / s) - (h / 2);
c.setTransform(s, 0, 0, s, s * x, s * y);
c.drawImage(i, 0, 0, w, h);
};
Tproto.DrawImageIE = function (c, xoff, yoff) {
var i = this.fimage, s = this.sc,
w = i.width = this.w * s, h = i.height = this.h * s,
x = (this.x * s) + xoff - (w / 2), y = (this.y * s) + yoff - (h / 2);
c.setTransform(1, 0, 0, 1, 0, 0);
c.globalAlpha = this.alpha;
c.drawImage(i, x, y);
};
Tproto.Calc = function (m, a) {
var pp, t = this.tc, mnb = t.minBrightness,
mxb = t.maxBrightness, r = t.max_radius;
pp = m.xform(this.position);
this.xformed = pp;
pp = Project(t, pp, t.stretchX, t.stretchY);
this.x = pp.x;
this.y = pp.y;
this.z = pp.z;
this.sc = pp.w;
this.alpha = a * Clamp(mnb + (mxb - mnb) * (r - this.z) / (2 * r), 0, 1);
return this.xformed;
};
Tproto.UpdateActive = function (c, xoff, yoff) {
var o = this.outline, 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;
};
Tproto.CheckActive = function (c, xoff, yoff) {
var t = this.tc, o = this.UpdateActive(c, xoff, yoff);
return o.Active(c, t.mx, t.my) ? o : null;
};
Tproto.Clicked = function (e) {
var a = this.a, t = a.target, h = a.href, evt;
if (t != '' && t != '_self') {
if (self.frames[t]) {
self.frames[t].document.location = h;
} else {
try {
if (top.frames[t]) {
top.frames[t].document.location = h;
return;
}
} catch (err) {
// different domain/port/protocol?
}
window.open(h, t);
}
return;
}
if (doc.createEvent) {
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', 1, 1, window, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, null);
if (!a.dispatchEvent(evt))
return;
} else if (a.fireEvent) {
if (!a.fireEvent('onclick'))
return;
}
doc.location = h;
};
Tproto.StopAudio = function () {
this.audio && this.playing && this.audio.pause();
this.stopped = 1;
this.playing = 0;
};
Tproto.PlayAudio = function () {
if (audio === 'off' || this.tc.audioOff)
return;
if (!audio && !SetupAudio())
return;
var a = this.tc.audio, g = this.tc.gain, sus = 'suspended', p;
if (this.audio) {
if (!this.track) {
this.track = audio.createMediaElementSource(this.audio);
this.gain = audio.createGain();
this.track.connect(this.gain);
this.gain.connect(audio.destination);
}
a = this.audio;
g = this.gain;
if (!a.paused)
return 1;
}
if (a) {
if (audio.state == sus)
audio.resume();
if (audio.state == sus)
return;
g.gain.value = min(2, max(0, this.tc.audioVolume * 1));
a.currentTime = 0;
this.stopped = 0;
p = a.play();
if (p !== undefined) {
p.then(r => {
this.stopped ? this.audio.pause() : this.playing = 1;
});
}
return 1;
}
};
/**
* @constructor
*/
function TagCanvas(cid, lctr, opt) {
var i, p, c = doc.getElementById(cid), cp = ['id', 'class', 'innerHTML'], raf;
if (!c) throw 0;
if (Defined(window.G_vmlCanvasManager)) {
c = window.G_vmlCanvasManager.initElement(c);
this.ie = parseFloat(navigator.appVersion.split('MSIE')[1]);
}
if (c && (!c.getContext || !c.getContext('2d').fillText)) {
p = doc.createElement('DIV');
for (i = 0; i < cp.length; ++i)
p[cp[i]] = c[cp[i]];
c.parentNode.insertBefore(p, c);
c.parentNode.removeChild(c);
throw 0;
}
for (i in TagCanvas.options)
this[i] = opt && Defined(opt[i]) ? opt[i] :
(Defined(TagCanvas[i]) ? TagCanvas[i] : TagCanvas.options[i]);
this.canvas = c;
this.ctxt = c.getContext('2d');
this.z1 = 250 / max(this.depth, 0.001);
this.z2 = this.z1 / this.zoom;
this.radius = min(c.height, c.width) * 0.0075; // fits radius of 100 in canvas
this.max_radius = 100;
this.max_weight = [];
this.min_weight = [];
this.textFont = this.textFont && FixFont(this.textFont);
this.textHeight *= 1;
this.imageRadius = this.imageRadius.toString();
this.pulsateTo = Clamp(this.pulsateTo, 0, 1);
this.minBrightness = Clamp(this.minBrightness, 0, 1);
this.maxBrightness = Clamp(this.maxBrightness, this.minBrightness, 1);
this.ctxt.textBaseline = 'top';
this.lx = (this.lock + '').indexOf('x') + 1;
this.ly = (this.lock + '').indexOf('y') + 1;
this.frozen = this.dx = this.dy = this.fixedAnim = this.touchState = 0;
this.fixedAlpha = 1;
this.source = lctr || cid;
this.repeatTags = min(64, ~~this.repeatTags);
this.minTags = min(200, ~~this.minTags);
if (~~this.scrollPause > 0)
TagCanvas.scrollPause = ~~this.scrollPause;
else
this.scrollPause = 0;
if (this.minTags > 0 && this.repeatTags < 1 && (i = this.GetTags().length))
this.repeatTags = ceil(this.minTags / i) - 1;
this.transform = Matrix.Identity();
this.startTime = this.time = TimeNow();
this.mx = this.my = -1;
this.centreImage && CentreImage(this);
this.Animate = this.dragControl ? this.AnimateDrag : this.AnimatePosition;
this.animTiming = (typeof TagCanvas[this.animTiming] == 'function' ?
TagCanvas[this.animTiming] : TagCanvas.Smooth);
if (this.shadowBlur || this.shadowOffset[0] || this.shadowOffset[1]) {
// let the browser translate "red" into "#ff0000"
this.ctxt.shadowColor = this.shadow;
this.shadow = this.ctxt.shadowCo