260 lines
7.3 KiB
JavaScript
260 lines
7.3 KiB
JavaScript
|
(function( $ ){
|
||
|
|
|
||
|
|
$.fn.canvasAreaDraw = function(options) {
|
||
|
|
this.each(function(index, element) {
|
||
|
|
init.apply(element, [index, element, options]);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
var init = function(index, input, options) {
|
||
|
|
|
||
|
|
var points, activePoint, settings;
|
||
|
|
var $reset, $canvas, ctx, image;
|
||
|
|
var draw, mousedown, stopdrag, move, resize, reset, rightclick, record;
|
||
|
|
|
||
|
|
settings = $.extend({
|
||
|
|
imageUrl: $(this).attr('data-image-url'),
|
||
|
|
imageHeight: $(this).attr('image-height'),
|
||
|
|
|
||
|
|
imageWidth: $(this).attr('image-width'),
|
||
|
|
imageCoords: $(this).attr('image-coords'),
|
||
|
|
clearButton: $(this).attr('clear_button'),
|
||
|
|
canvasID: $(this).attr('data-canvas-id'),//data-canvas-id
|
||
|
|
spr_id: $(this).attr('data-spr-id'),
|
||
|
|
}, options);
|
||
|
|
|
||
|
|
if ( $(this).val().length ) {
|
||
|
|
points = $(this).val().split(',').map(function(point) {
|
||
|
|
return parseInt(point, 10);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
points = [];
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
//$reset = $('<button type="button" class="btn"><i class="icon-trash"></i>Clear</button>');
|
||
|
|
$reset = $('<button type="button" class="btn"><i class="icon-trash"></i>'+settings.clearButton+'</button>');
|
||
|
|
$canvas = $('<canvas>');
|
||
|
|
ctx = $canvas[0].getContext('2d');
|
||
|
|
|
||
|
|
image = new Image();
|
||
|
|
/* resize = function() {
|
||
|
|
$canvas.attr('height', image.height).attr('width', image.width);
|
||
|
|
draw();
|
||
|
|
}; */
|
||
|
|
resize = function() {
|
||
|
|
if(settings.imageHeight != 0 || settings.imageWidth != 0){
|
||
|
|
//$canvas.attr('height', settings.imageHeight).attr('width', settings.imageWidth);
|
||
|
|
$canvas.attr('height', settings.imageHeight);
|
||
|
|
$canvas.attr('width', settings.imageWidth);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$canvas.attr('height', image.height).attr('width', image.width);
|
||
|
|
}
|
||
|
|
|
||
|
|
draw();
|
||
|
|
};
|
||
|
|
$(image).load(resize);
|
||
|
|
image.src = settings.imageUrl;
|
||
|
|
if(settings.imageHeight != 0 || settings.imageWidth != 0){
|
||
|
|
image.height = settings.imageHeight;
|
||
|
|
image.width = settings.imageWidth;
|
||
|
|
//console.log(image.height);
|
||
|
|
//console.log(image.width);
|
||
|
|
}
|
||
|
|
if (image.loaded) resize();
|
||
|
|
//$canvas.css({background: 'url('+image.src+')'});
|
||
|
|
//$canvas.css('background-repeat', 'no-repeat');
|
||
|
|
$canvas.attr('class', 'hotspot_canvas');
|
||
|
|
|
||
|
|
if(settings.imageHeight != 0 || settings.imageWidth != 0){
|
||
|
|
$canvas.css('background-size', settings.imageWidth+'px '+settings.imageHeight+'px');
|
||
|
|
}
|
||
|
|
// background-size: 80px 60px;
|
||
|
|
//background-repeat: no-repeat;
|
||
|
|
|
||
|
|
|
||
|
|
$(document).ready( function() {
|
||
|
|
$(input).after('<br>', $canvas, '<br>', $reset);
|
||
|
|
$reset.click(reset);
|
||
|
|
if(settings.imageCoords != ""){
|
||
|
|
show();
|
||
|
|
}
|
||
|
|
$canvas.on('mousedown', mousedown);
|
||
|
|
$canvas.on('contextmenu', rightclick);
|
||
|
|
$canvas.on('mouseup', stopdrag);
|
||
|
|
});
|
||
|
|
|
||
|
|
reset = function() {
|
||
|
|
//pokazi skrij hotspot_tips
|
||
|
|
$('#hotspot_tips_'+settings.spr_id).css('display', 'none');
|
||
|
|
points = [];
|
||
|
|
draw();
|
||
|
|
};
|
||
|
|
|
||
|
|
show = function() {
|
||
|
|
//points = [settings.imageCoords];
|
||
|
|
//points = [];
|
||
|
|
points = settings.imageCoords;
|
||
|
|
points = points.split(",");
|
||
|
|
//draw();
|
||
|
|
//console.log("Show points");
|
||
|
|
//console.log("Points: "+points);
|
||
|
|
//var coords = settings.imageCoords;
|
||
|
|
//console.log("Points: "+coords[2]);
|
||
|
|
};
|
||
|
|
|
||
|
|
move = function(e) {
|
||
|
|
if(!e.offsetX) {
|
||
|
|
e.offsetX = (e.pageX - $(e.target).offset().left);
|
||
|
|
e.offsetY = (e.pageY - $(e.target).offset().top);
|
||
|
|
}
|
||
|
|
points[activePoint] = Math.round(e.offsetX);
|
||
|
|
points[activePoint+1] = Math.round(e.offsetY);
|
||
|
|
draw();
|
||
|
|
};
|
||
|
|
|
||
|
|
stopdrag = function() {
|
||
|
|
$(this).off('mousemove');
|
||
|
|
record();
|
||
|
|
activePoint = null;
|
||
|
|
};
|
||
|
|
|
||
|
|
rightclick = function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
if(!e.offsetX) {
|
||
|
|
e.offsetX = (e.pageX - $(e.target).offset().left);
|
||
|
|
e.offsetY = (e.pageY - $(e.target).offset().top);
|
||
|
|
}
|
||
|
|
var x = e.offsetX, y = e.offsetY;
|
||
|
|
for (var i = 0; i < points.length; i+=2) {
|
||
|
|
dis = Math.sqrt(Math.pow(x - points[i], 2) + Math.pow(y - points[i+1], 2));
|
||
|
|
if ( dis < 6 ) {
|
||
|
|
points.splice(i, 2);
|
||
|
|
draw();
|
||
|
|
record();
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
|
||
|
|
mousedown = function(e) {
|
||
|
|
//pokazi skriti hotspot_tips
|
||
|
|
$('#hotspot_tips_'+settings.spr_id).css('display', '');
|
||
|
|
|
||
|
|
var x, y, dis, lineDis, insertAt = points.length;
|
||
|
|
if (e.which === 3) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
if(!e.offsetX) {
|
||
|
|
e.offsetX = (e.pageX - $(e.target).offset().left);
|
||
|
|
e.offsetY = (e.pageY - $(e.target).offset().top);
|
||
|
|
}
|
||
|
|
x = e.offsetX; y = e.offsetY;
|
||
|
|
|
||
|
|
for (var i = 0; i < points.length; i+=2) {
|
||
|
|
dis = Math.sqrt(Math.pow(x - points[i], 2) + Math.pow(y - points[i+1], 2));
|
||
|
|
if ( dis < 6 ) {
|
||
|
|
activePoint = i;
|
||
|
|
$(this).on('mousemove', move);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0; i < points.length; i+=2) {
|
||
|
|
if (i > 1) {
|
||
|
|
lineDis = dotLineLength(
|
||
|
|
x, y,
|
||
|
|
points[i], points[i+1],
|
||
|
|
points[i-2], points[i-1],
|
||
|
|
true
|
||
|
|
);
|
||
|
|
if (lineDis < 6) {
|
||
|
|
insertAt = i;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
points.splice(insertAt, 0, Math.round(x), Math.round(y));
|
||
|
|
activePoint = insertAt;
|
||
|
|
$(this).on('mousemove', move);
|
||
|
|
|
||
|
|
draw();
|
||
|
|
record();
|
||
|
|
|
||
|
|
return false;
|
||
|
|
};
|
||
|
|
|
||
|
|
draw = function() {
|
||
|
|
ctx.canvas.width = ctx.canvas.width;
|
||
|
|
|
||
|
|
record();
|
||
|
|
if (points.length < 2) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
ctx.globalCompositeOperation = 'destination-over';
|
||
|
|
ctx.fillStyle = 'rgb(255,255,255)'
|
||
|
|
ctx.strokeStyle = 'rgb(255,20,20)';
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(points[0], points[1]);
|
||
|
|
for (var i = 0; i < points.length; i+=2) {
|
||
|
|
ctx.fillRect(points[i]-2, points[i+1]-2, 4, 4);
|
||
|
|
ctx.strokeRect(points[i]-2, points[i+1]-2, 4, 4);
|
||
|
|
if (points.length > 2 && i > 1) {
|
||
|
|
ctx.lineTo(points[i], points[i+1]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.fillStyle = 'rgba(255,0,0,0.3)';
|
||
|
|
ctx.fill();
|
||
|
|
ctx.stroke();
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
record = function() {
|
||
|
|
$(input).val(points.join(','));
|
||
|
|
};
|
||
|
|
|
||
|
|
$(input).on('change', function() {
|
||
|
|
if ( $(this).val().length ) {
|
||
|
|
points = $(this).val().split(',').map(function(point) {
|
||
|
|
return parseInt(point, 10);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
points = [];
|
||
|
|
}
|
||
|
|
draw();
|
||
|
|
});
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
$('.canvas-area[data-image-url]').canvasAreaDraw();
|
||
|
|
});
|
||
|
|
|
||
|
|
var dotLineLength = function(x, y, x0, y0, x1, y1, o) {
|
||
|
|
function lineLength(x, y, x0, y0){
|
||
|
|
return Math.sqrt((x -= x0) * x + (y -= y0) * y);
|
||
|
|
}
|
||
|
|
if(o && !(o = function(x, y, x0, y0, x1, y1){
|
||
|
|
if(!(x1 - x0)) return {x: x0, y: y};
|
||
|
|
else if(!(y1 - y0)) return {x: x, y: y0};
|
||
|
|
var left, tg = -1 / ((y1 - y0) / (x1 - x0));
|
||
|
|
return {x: left = (x1 * (x * tg - y + y0) + x0 * (x * - tg + y - y1)) / (tg * (x1 - x0) + y0 - y1), y: tg * left - tg * x + y};
|
||
|
|
}(x, y, x0, y0, x1, y1), o.x >= Math.min(x0, x1) && o.x <= Math.max(x0, x1) && o.y >= Math.min(y0, y1) && o.y <= Math.max(y0, y1))){
|
||
|
|
var l1 = lineLength(x, y, x0, y0), l2 = lineLength(x, y, x1, y1);
|
||
|
|
return l1 > l2 ? l2 : l1;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var a = y0 - y1, b = x1 - x0, c = x0 * y1 - y0 * x1;
|
||
|
|
return Math.abs(a * x + b * y + c) / Math.sqrt(a * a + b * b);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
})( jQuery );
|