META-INF.resources.bower_components.jquery-image-heatmap.jquery.maphilight.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of jwebmp-image-map-heatmap Show documentation
Show all versions of jwebmp-image-map-heatmap Show documentation
The JWebSwing implementation for Image Map HeatMap
(function ($) {
var has_VML, has_canvas, create_canvas_for, add_shape_to, clear_canvas, shape_from_area,
canvas_style, hex_to_decimal, css3color, is_image_loaded, options_from_area;
has_VML = document.namespaces;
has_canvas = !!document.createElement('canvas').getContext;
if (!(has_canvas || has_VML)) {
$.fn.maphilight = function () {
return this;
};
return;
}
if (has_canvas) {
hex_to_decimal = function (hex) {
return Math.max(0, Math.min(parseInt(hex, 16), 255));
};
css3color = function (color, opacity) {
return 'rgba(' + hex_to_decimal(color.substr(0, 2)) + ',' + hex_to_decimal(color.substr(2, 2)) + ',' + hex_to_decimal(color.substr(4, 2)) + ',' + opacity + ')';
};
create_canvas_for = function (img) {
var c = $('').get(0);
c.getContext("2d").clearRect(0, 0, c.width, c.height);
return c;
};
var draw_shape = function (context, shape, coords, x_shift, y_shift) {
x_shift = x_shift || 0;
y_shift = y_shift || 0;
context.beginPath();
if (shape == 'rect') {
// x, y, width, height
context.rect(coords[0] + x_shift, coords[1] + y_shift, coords[2] - coords[0], coords[3] - coords[1]);
} else if (shape == 'poly') {
context.moveTo(coords[0] + x_shift, coords[1] + y_shift);
for (i = 2; i < coords.length; i += 2) {
context.lineTo(coords[i] + x_shift, coords[i + 1] + y_shift);
}
} else if (shape == 'circ') {
// x, y, radius, startAngle, endAngle, anticlockwise
context.arc(coords[0] + x_shift, coords[1] + y_shift, coords[2], 0, Math.PI * 2, false);
}
context.closePath();
}
add_shape_to = function (canvas, shape, coords, options, name) {
var i, context = canvas.getContext('2d');
// Because I don't want to worry about setting things back to a base state
// Shadow has to happen first, since it's on the bottom, and it does some clip /
// fill operations which would interfere with what comes next.
if (options.shadow) {
context.save();
if (options.shadowPosition == "inside") {
// Cause the following stroke to only apply to the inside of the path
draw_shape(context, shape, coords);
context.clip();
}
// Redraw the shape shifted off the canvas massively so we can cast a shadow
// onto the canvas without having to worry about the stroke or fill (which
// cannot have 0 opacity or width, since they're what cast the shadow).
var x_shift = canvas.width * 100;
var y_shift = canvas.height * 100;
draw_shape(context, shape, coords, x_shift, y_shift);
context.shadowOffsetX = options.shadowX - x_shift;
context.shadowOffsetY = options.shadowY - y_shift;
context.shadowBlur = options.shadowRadius;
context.shadowColor = css3color(options.shadowColor, options.shadowOpacity);
// Now, work out where to cast the shadow from! It looks better if it's cast
// from a fill when it's an outside shadow or a stroke when it's an interior
// shadow. Allow the user to override this if they need to.
var shadowFrom = options.shadowFrom;
if (!shadowFrom) {
if (options.shadowPosition == 'outside') {
shadowFrom = 'fill';
} else {
shadowFrom = 'stroke';
}
}
if (shadowFrom == 'stroke') {
context.strokeStyle = "rgba(0,0,0,1)";
context.stroke();
} else if (shadowFrom == 'fill') {
context.fillStyle = "rgba(0,0,0,1)";
context.fill();
}
context.restore();
// and now we clean up
if (options.shadowPosition == "outside") {
context.save();
// Clear out the center
draw_shape(context, shape, coords);
context.globalCompositeOperation = "destination-out";
context.fillStyle = "rgba(0,0,0,1);";
context.fill();
context.restore();
}
}
context.save();
draw_shape(context, shape, coords);
// fill has to come after shadow, otherwise the shadow will be drawn over the fill,
// which mostly looks weird when the shadow has a high opacity
if (options.fill) {
context.fillStyle = css3color(options.fillColor, options.fillOpacity);
context.fill();
}
// Likewise, stroke has to come at the very end, or it'll wind up under bits of the
// shadow or the shadow-background if it's present.
if (options.stroke) {
context.strokeStyle = css3color(options.strokeColor, options.strokeOpacity);
context.lineWidth = options.strokeWidth;
context.stroke();
}
context.restore();
if (options.fade) {
$(canvas).css('opacity', 0).animate({opacity: 1}, 100);
}
};
clear_canvas = function (canvas) {
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
};
} else { // ie executes this code
create_canvas_for = function (img) {
return $('').get(0);
};
add_shape_to = function (canvas, shape, coords, options, name) {
var fill, stroke, opacity, e;
fill = '© 2015 - 2025 Weber Informatics LLC | Privacy Policy