|
|
|
|
@ -112,101 +112,102 @@ images (like Google Maps).
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function draw(plot, ctx) {
|
|
|
|
|
function drawSeries(plot, ctx, series) {
|
|
|
|
|
var plotOffset = plot.getPlotOffset();
|
|
|
|
|
|
|
|
|
|
$.each(plot.getData(), function (i, series) {
|
|
|
|
|
var points = series.datapoints.points,
|
|
|
|
|
ps = series.datapoints.pointsize;
|
|
|
|
|
if (!series.images || !series.images.show)
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
|
|
var points = series.datapoints.points,
|
|
|
|
|
ps = series.datapoints.pointsize;
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < points.length; i += ps) {
|
|
|
|
|
var img = points[i],
|
|
|
|
|
x1 = points[i + 1], y1 = points[i + 2],
|
|
|
|
|
x2 = points[i + 3], y2 = points[i + 4],
|
|
|
|
|
xaxis = series.xaxis, yaxis = series.yaxis,
|
|
|
|
|
tmp;
|
|
|
|
|
|
|
|
|
|
// actually we should check img.complete, but it
|
|
|
|
|
// appears to be a somewhat unreliable indicator in
|
|
|
|
|
// IE6 (false even after load event)
|
|
|
|
|
if (!img || img.width <= 0 || img.height <= 0)
|
|
|
|
|
continue;
|
|
|
|
|
|
|
|
|
|
if (x1 > x2) {
|
|
|
|
|
tmp = x2;
|
|
|
|
|
x2 = x1;
|
|
|
|
|
x1 = tmp;
|
|
|
|
|
}
|
|
|
|
|
if (y1 > y2) {
|
|
|
|
|
tmp = y2;
|
|
|
|
|
y2 = y1;
|
|
|
|
|
y1 = tmp;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < points.length; i += ps) {
|
|
|
|
|
var img = points[i],
|
|
|
|
|
x1 = points[i + 1], y1 = points[i + 2],
|
|
|
|
|
x2 = points[i + 3], y2 = points[i + 4],
|
|
|
|
|
xaxis = series.xaxis, yaxis = series.yaxis,
|
|
|
|
|
tmp;
|
|
|
|
|
|
|
|
|
|
// actually we should check img.complete, but it
|
|
|
|
|
// appears to be a somewhat unreliable indicator in
|
|
|
|
|
// IE6 (false even after load event)
|
|
|
|
|
if (!img || img.width <= 0 || img.height <= 0)
|
|
|
|
|
continue;
|
|
|
|
|
|
|
|
|
|
if (x1 > x2) {
|
|
|
|
|
tmp = x2;
|
|
|
|
|
x2 = x1;
|
|
|
|
|
x1 = tmp;
|
|
|
|
|
}
|
|
|
|
|
if (y1 > y2) {
|
|
|
|
|
tmp = y2;
|
|
|
|
|
y2 = y1;
|
|
|
|
|
y1 = tmp;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// if the anchor is at the center of the pixel, expand the
|
|
|
|
|
// image by 1/2 pixel in each direction
|
|
|
|
|
if (series.images.anchor == "center") {
|
|
|
|
|
tmp = 0.5 * (x2-x1) / (img.width - 1);
|
|
|
|
|
x1 -= tmp;
|
|
|
|
|
x2 += tmp;
|
|
|
|
|
tmp = 0.5 * (y2-y1) / (img.height - 1);
|
|
|
|
|
y1 -= tmp;
|
|
|
|
|
y2 += tmp;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// clip
|
|
|
|
|
if (x1 == x2 || y1 == y2 ||
|
|
|
|
|
x1 >= xaxis.max || x2 <= xaxis.min ||
|
|
|
|
|
y1 >= yaxis.max || y2 <= yaxis.min)
|
|
|
|
|
continue;
|
|
|
|
|
|
|
|
|
|
var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
|
|
|
|
|
if (x1 < xaxis.min) {
|
|
|
|
|
sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
|
|
|
|
|
x1 = xaxis.min;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (x2 > xaxis.max) {
|
|
|
|
|
sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
|
|
|
|
|
x2 = xaxis.max;
|
|
|
|
|
}
|
|
|
|
|
// if the anchor is at the center of the pixel, expand the
|
|
|
|
|
// image by 1/2 pixel in each direction
|
|
|
|
|
if (series.images.anchor == "center") {
|
|
|
|
|
tmp = 0.5 * (x2-x1) / (img.width - 1);
|
|
|
|
|
x1 -= tmp;
|
|
|
|
|
x2 += tmp;
|
|
|
|
|
tmp = 0.5 * (y2-y1) / (img.height - 1);
|
|
|
|
|
y1 -= tmp;
|
|
|
|
|
y2 += tmp;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// clip
|
|
|
|
|
if (x1 == x2 || y1 == y2 ||
|
|
|
|
|
x1 >= xaxis.max || x2 <= xaxis.min ||
|
|
|
|
|
y1 >= yaxis.max || y2 <= yaxis.min)
|
|
|
|
|
continue;
|
|
|
|
|
|
|
|
|
|
var sx1 = 0, sy1 = 0, sx2 = img.width, sy2 = img.height;
|
|
|
|
|
if (x1 < xaxis.min) {
|
|
|
|
|
sx1 += (sx2 - sx1) * (xaxis.min - x1) / (x2 - x1);
|
|
|
|
|
x1 = xaxis.min;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (y1 < yaxis.min) {
|
|
|
|
|
sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
|
|
|
|
|
y1 = yaxis.min;
|
|
|
|
|
}
|
|
|
|
|
if (x2 > xaxis.max) {
|
|
|
|
|
sx2 += (sx2 - sx1) * (xaxis.max - x2) / (x2 - x1);
|
|
|
|
|
x2 = xaxis.max;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (y2 > yaxis.max) {
|
|
|
|
|
sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
|
|
|
|
|
y2 = yaxis.max;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
x1 = xaxis.p2c(x1);
|
|
|
|
|
x2 = xaxis.p2c(x2);
|
|
|
|
|
y1 = yaxis.p2c(y1);
|
|
|
|
|
y2 = yaxis.p2c(y2);
|
|
|
|
|
|
|
|
|
|
// the transformation may have swapped us
|
|
|
|
|
if (x1 > x2) {
|
|
|
|
|
tmp = x2;
|
|
|
|
|
x2 = x1;
|
|
|
|
|
x1 = tmp;
|
|
|
|
|
}
|
|
|
|
|
if (y1 > y2) {
|
|
|
|
|
tmp = y2;
|
|
|
|
|
y2 = y1;
|
|
|
|
|
y1 = tmp;
|
|
|
|
|
}
|
|
|
|
|
if (y1 < yaxis.min) {
|
|
|
|
|
sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
|
|
|
|
|
y1 = yaxis.min;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tmp = ctx.globalAlpha;
|
|
|
|
|
ctx.globalAlpha *= series.images.alpha;
|
|
|
|
|
ctx.drawImage(img,
|
|
|
|
|
sx1, sy1, sx2 - sx1, sy2 - sy1,
|
|
|
|
|
x1 + plotOffset.left, y1 + plotOffset.top,
|
|
|
|
|
x2 - x1, y2 - y1);
|
|
|
|
|
ctx.globalAlpha = tmp;
|
|
|
|
|
if (y2 > yaxis.max) {
|
|
|
|
|
sy1 += (sy1 - sy2) * (yaxis.max - y2) / (y2 - y1);
|
|
|
|
|
y2 = yaxis.max;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
x1 = xaxis.p2c(x1);
|
|
|
|
|
x2 = xaxis.p2c(x2);
|
|
|
|
|
y1 = yaxis.p2c(y1);
|
|
|
|
|
y2 = yaxis.p2c(y2);
|
|
|
|
|
|
|
|
|
|
// the transformation may have swapped us
|
|
|
|
|
if (x1 > x2) {
|
|
|
|
|
tmp = x2;
|
|
|
|
|
x2 = x1;
|
|
|
|
|
x1 = tmp;
|
|
|
|
|
}
|
|
|
|
|
if (y1 > y2) {
|
|
|
|
|
tmp = y2;
|
|
|
|
|
y2 = y1;
|
|
|
|
|
y1 = tmp;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tmp = ctx.globalAlpha;
|
|
|
|
|
ctx.globalAlpha *= series.images.alpha;
|
|
|
|
|
ctx.drawImage(img,
|
|
|
|
|
sx1, sy1, sx2 - sx1, sy2 - sy1,
|
|
|
|
|
x1 + plotOffset.left, y1 + plotOffset.top,
|
|
|
|
|
x2 - x1, y2 - y1);
|
|
|
|
|
ctx.globalAlpha = tmp;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function processRawData(plot, series, data, datapoints) {
|
|
|
|
|
@ -225,7 +226,7 @@ images (like Google Maps).
|
|
|
|
|
|
|
|
|
|
function init(plot) {
|
|
|
|
|
plot.hooks.processRawData.push(processRawData);
|
|
|
|
|
plot.hooks.draw.push(draw);
|
|
|
|
|
plot.hooks.drawSeries.push(drawSeries);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$.plot.plugins.push({
|
|
|
|
|
|