--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_content/skin/resources/js/jquery-canvasAreaDraw.js Fri Jan 20 15:40:59 2017 +0100
@@ -0,0 +1,273 @@
+(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, moveall, resize, reset, rightclick, record;
+ var dragpoint;
+ var startpoint = false;
+
+ settings = $.extend({
+ imageUrl: $(this).attr('data-image-url')
+ }, options);
+
+ var v = $(input).val().replace(/[^0-9\,]/ig, '');
+ if (v.length) {
+ points = v.split(',').map(function (point) {
+ return parseInt(point, 10);
+ });
+ } else {
+ points = [];
+ }
+
+ // $reset = $('<button type="button" class="btn"><i class="icon-trash"></i>Очистить</button>');
+ $reset = $('<i class="fa fa-fw fa-trash"></i>');
+ $canvas = $('<canvas>');
+ ctx = $canvas[0].getContext('2d');
+
+ image = new Image();
+ resize = function () {
+ $canvas.attr('height', image.height).attr('width', image.width);
+ draw();
+ };
+ $(image).load(resize);
+ image.src = settings.imageUrl;
+ if (image.loaded) {
+ resize();
+ }
+ $canvas.css({background: 'url(' + image.src + ')'});
+
+ if (input.type !== 'hidden') {
+ $(input).after('<br />');
+ }
+ $(input).after($canvas, '<br />', $reset);
+
+ reset = function () {
+ points = [];
+ draw();
+ };
+
+ 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();
+ };
+
+ moveall = function (e) {
+ if (!e.offsetX) {
+ e.offsetX = (e.pageX - $(e.target).offset().left);
+ e.offsetY = (e.pageY - $(e.target).offset().top);
+ }
+ if (!startpoint) {
+ startpoint = {x: Math.round(e.offsetX), y: Math.round(e.offsetY)};
+ }
+ var sdvpoint = {x: Math.round(e.offsetX), y: Math.round(e.offsetY)};
+ for (var i = 0; i < points.length; i++) {
+ points[i] = (sdvpoint.x - startpoint.x) + points[i];
+ points[++i] = (sdvpoint.y - startpoint.y) + points[i];
+ }
+ startpoint = sdvpoint;
+ 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) {
+ 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;
+
+ if (points.length >= 6) {
+ var c = getCenter();
+ ctx.fillRect(c.x - 4, c.y - 4, 8, 8);
+ dis = Math.sqrt(Math.pow(x - c.x, 2) + Math.pow(y - c.y, 2));
+ if (dis < 6) {
+ startpoint = false;
+ $(this).on('mousemove', moveall);
+ return false;
+ }
+ }
+
+ 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;
+ }
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.fillStyle = 'rgb(255,255,255)';
+ ctx.strokeStyle = 'rgb(255,20,20)';
+ ctx.lineWidth = 1;
+ if (points.length >= 6) {
+ var c = getCenter();
+ ctx.fillRect(c.x - 4, c.y - 4, 8, 8);
+ }
+ 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(','));
+ };
+
+ getCenter = function () {
+ var ptc = [];
+ for (i = 0; i < points.length; i++) {
+ ptc.push({x: points[i], y: points[++i]});
+ }
+ var first = ptc[0], last = ptc[ptc.length - 1];
+ if (first.x != last.x || first.y != last.y) ptc.push(first);
+ var twicearea = 0,
+ x = 0, y = 0,
+ nptc = ptc.length,
+ p1, p2, f;
+ for (var i = 0, j = nptc - 1; i < nptc; j = i++) {
+ p1 = ptc[i];
+ p2 = ptc[j];
+ f = p1.x * p2.y - p2.x * p1.y;
+ twicearea += f;
+ x += ( p1.x + p2.x ) * f;
+ y += ( p1.y + p2.y ) * f;
+ }
+ f = twicearea * 3;
+ return {x: x / f, y: y / f};
+ };
+
+ $(input).on('change', function () {
+ var v = $(input).val().replace(/[^0-9\,]/ig, '');
+ if (v.length) {
+ points = v.split(',').map(function (point) {
+ return parseInt(point, 10);
+ });
+ } else {
+ points = [];
+ }
+ draw();
+ });
+
+ $(document).find($reset).click(reset);
+ $(document).find($canvas).on('mousedown', mousedown);
+ $(document).find($canvas).on('contextmenu', rightclick);
+ $(document).find($canvas).on('mouseup', stopdrag);
+
+ };
+
+ $(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);