123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 |
- (function ($) {
- var options = {
- series: {
- images: {
- show: false,
- alpha: 1,
- anchor: "corner"
- }
- }
- };
- $.plot.image = {};
- $.plot.image.loadDataImages = function (series, options, callback) {
- var urls = [], points = [];
- var defaultShow = options.series.images.show;
-
- $.each(series, function (i, s) {
- if (!(defaultShow || s.images.show))
- return;
-
- if (s.data)
- s = s.data;
- $.each(s, function (i, p) {
- if (typeof p[0] == "string") {
- urls.push(p[0]);
- points.push(p);
- }
- });
- });
- $.plot.image.load(urls, function (loadedImages) {
- $.each(points, function (i, p) {
- var url = p[0];
- if (loadedImages[url])
- p[0] = loadedImages[url];
- });
- callback();
- });
- }
-
- $.plot.image.load = function (urls, callback) {
- var missing = urls.length, loaded = {};
- if (missing == 0)
- callback({});
- $.each(urls, function (i, url) {
- var handler = function () {
- --missing;
-
- loaded[url] = this;
-
- if (missing == 0)
- callback(loaded);
- };
- $('<img />').load(handler).error(handler).attr('src', url);
- });
- };
-
- function drawSeries(plot, ctx, series) {
- var plotOffset = plot.getPlotOffset();
-
- 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;
-
-
-
- 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 (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;
- }
-
-
- 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 (y1 < yaxis.min) {
- sy2 += (sy1 - sy2) * (yaxis.min - y1) / (y2 - y1);
- y1 = yaxis.min;
- }
- 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);
-
-
- 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) {
- if (!series.images.show)
- return;
-
- datapoints.format = [
- { required: true },
- { x: true, number: true, required: true },
- { y: true, number: true, required: true },
- { x: true, number: true, required: true },
- { y: true, number: true, required: true }
- ];
- }
-
- function init(plot) {
- plot.hooks.processRawData.push(processRawData);
- plot.hooks.drawSeries.push(drawSeries);
- }
-
- $.plot.plugins.push({
- init: init,
- options: options,
- name: 'image',
- version: '1.1'
- });
- })(jQuery);
|