diff --git a/test/demo/aligning_guidelines.js b/test/demo/aligning_guidelines.js new file mode 100644 index 00000000..27a9c471 --- /dev/null +++ b/test/demo/aligning_guidelines.js @@ -0,0 +1,103 @@ +function initAligningGuidelines(canvas) { + + var ctx = canvas.getContext(), + canvasHeight = canvas.getHeight(), + aligningLineOffset = 5, + aligningLineMargin = 4, + aligningLineWidth = 1, + aligningLineColor = 'rgb(0,255,0)'; + + function drawVerticalLine(coords) { + drawLine( + coords.x + 0.5, + coords.y1 > coords.y2 ? coords.y2 : coords.y1, + coords.x + 0.5, + coords.y2 > coords.y1 ? coords.y2 : coords.y1); + } + + function drawHorizontalLine(coords) { + drawLine( + coords.x1 > coords.x2 ? coords.x2 : coords.x1, + coords.y + 0.5, + coords.x2 > coords.x1 ? coords.x2 : coords.x1, + coords.y + 0.5); + } + + function drawLine(x1, y1, x2, y2) { + ctx.save(); + ctx.lineWidth = aligningLineWidth; + ctx.strokeStyle = aligningLineColor; + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.stroke(); + ctx.restore(); + } + + function isInRange(value1, value2) { + for (var i = value1 - aligningLineMargin, len = value1 + aligningLineMargin; i <= len; i++) { + if (i === value2) { + return true; + } + } + return false; + } + + canvas.onObjectMove = function(activeObject) { + + var canvasObjects = canvas.getObjects(), + activeObjectLeft = activeObject.get('left'), + activeObjectTop = activeObject.get('top'), + activeObjectHeight = activeObject.get('height'), + activeObjectWidth = activeObject.get('width'), + verticalLines = [ ], + horizontalLines = [ ]; + + for (var i = canvasObjects.length; i--; ) { + + if (canvasObjects[i] === activeObject) continue; + + var objectLeft = canvasObjects[i].get('left'), + objectTop = canvasObjects[i].get('top'), + objectHeight = canvasObjects[i].getHeight(), + objectWidth = canvasObjects[i].getWidth(); + + if (isInRange(objectLeft, activeObjectLeft)) { + verticalLines.push({ + x: objectLeft, + y1: (objectTop < activeObjectTop) + ? (objectTop - objectHeight / 2 - aligningLineOffset) + : (objectTop + objectHeight / 2 + aligningLineOffset), + y2: (activeObjectTop > objectTop) + ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset) + : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset) + }); + activeObject.set('left', objectLeft); + } + + if (isInRange(objectTop, activeObjectTop)) { + horizontalLines.push({ + y: objectTop, + x1: (objectLeft < activeObjectLeft) + ? (objectLeft - objectWidth / 2 - aligningLineOffset) + : (objectLeft + objectWidth / 2 + aligningLineOffset), + x2: (activeObjectLeft > objectLeft) + ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset) + : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset) + }); + activeObject.set('top', objectTop); + } + } + + canvas.afterRender = function() { + for (var i = verticalLines.length; i--; ) { + drawVerticalLine(verticalLines[i]); + } + for (var i = horizontalLines.length; i--; ) { + drawHorizontalLine(horizontalLines[i]); + } + }; + }; + + +} \ No newline at end of file diff --git a/test/demo/demo.js b/test/demo/demo.js index a335ed8b..9c2cac2e 100644 --- a/test/demo/demo.js +++ b/test/demo/demo.js @@ -333,4 +333,8 @@ initCenteringGuidelines(canvas); + if (document.location.search.indexOf('align') > -1) { + initAligningGuidelines(canvas); + } + })(this); \ No newline at end of file diff --git a/test/demo/index.html b/test/demo/index.html index 249896f1..3ebd8223 100644 --- a/test/demo/index.html +++ b/test/demo/index.html @@ -151,6 +151,7 @@ + \ No newline at end of file