diff -r 24dc4fe0c9a4 -r 24e4aba394bf src_js/iconolab-bundle/src/components/cutout/svgboard.js --- a/src_js/iconolab-bundle/src/components/cutout/svgboard.js Tue Sep 20 15:57:42 2016 +0200 +++ b/src_js/iconolab-bundle/src/components/cutout/svgboard.js Wed Sep 21 11:58:24 2016 +0200 @@ -293,8 +293,9 @@ paper.mousedown(function (e) { if (drawingMode === FREE_MODE || pathIsClosed) { return; } - startPosition.x = e.offsetX; - startPosition.y = e.offsetY; + var offset = computeOffset(e) + startPosition.x = offset.x; + startPosition.y = offset.y; canDraw = true; }); @@ -302,8 +303,9 @@ if (drawingMode === FREE_MODE) { return; } if (!canDraw) { return; } var x, y; - currentPosition.x = e.offsetX; - currentPosition.y = e.offsetY; + var offset = computeOffset(e) + currentPosition.x = offset.x; + currentPosition.y = offset.y; if (rectZone) { rectZone.remove(); @@ -375,9 +377,9 @@ var computeOffset = function (e) { var target = e.target || e.srcElement; var rect = target.getBoundingClientRect(); - var offsetX = e.clientX - rect.left; - var offsetY = e.clientY - rect.top; - return {x: offsetX, y: offsetX}; + var offsetX = (e.clientX - rect.left) / Math.min(zoomFactor.x, zoomFactor.y); + var offsetY = (e.clientY - rect.top) / Math.min(zoomFactor.x, zoomFactor.y); + return {x: offsetX, y: offsetY}; } var clickHandler = function (offsetX, offsetY) { @@ -395,8 +397,11 @@ paper.click(function (e) { if (clickTimeout) { return; } - var offsetX = e.offsetX; - var offsetY = e.offsetY; + if (!jQuery(e.target).is(mainImage)) { return; } + var offset = computeOffset(e) + var offsetX = offset.x; + var offsetY = offset.y; + console.log(zoomFactor) clickTimeout = setTimeout(clickHandler.bind(this, offsetX, offsetY), 190); }); @@ -559,7 +564,7 @@ path += type; - + console.log(path) return path; } }; @@ -586,8 +591,6 @@ cutCanvas.append(mainImage); } - - cutCanvas.css({ marginLeft: 'auto', marginRight: 'auto',