× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Assisting with Fabric.JS

David F.
Nov 18, 2015
<p>Damien came with an issue, that he couldn't get the distance of a polyline. </p> <p>I've added this bit when the comments with<strong> daminufe</strong> are:</p> <p> </p> <pre><code class="language-javascript">function letsDraw() { canvas = createCanvasHistoryDraw(); fabric.Object.prototype.transparentCorners = false; var magnify = document.getElementById('obj_mag').value; var realPixel = document.getElementById('pixel_size').value; var realBinning = document.getElementById('bin_size').value; var realMount = document.getElementById('c_mount').value; var realLens = document.getElementById('lens_mag').value; var realWidth = document.getElementById('real_width').value; var realHeight = document.getElementById('real_height').value; var divisorScale = magnify * realMount * realLens; var ccdBin = realPixel * realBinning; var actualPixelSize = ccdBin / divisorScale; var scaled_factor = realHeight / 800; var normalizedSize = actualPixelSize * scaled_factor; var line, isDown; var arr = new Array(); var startx = new Array(); var endx = new Array(); var starty = new Array(); var endy = new Array(); var temp = 0; var graphtype; trigger = "1"; var text; // daminufe: You define here an empty array with the points to be availble in this whole scope var points = []; canvas.on('mouse:down', function (o) { if (trigger == "1") { isDown = true; var pointer = canvas.getPointer(o.e); // daminufe: You initialize the points with the starting x and y points = [ { x: pointer.x, y: pointer.y } ]; startx[temp] = pointer.x; starty[temp] = pointer.y; line = new fabric.Polyline(points, { strokeWidth: $('#selWidth').val(), stroke: $('#selColor').val(), originX: 'center', originY: 'center' }); canvas.add(line); } else { canvas.forEachObject(function (o) { o.setCoords(); }); } }); canvas.on('mouse:move', function (o) { canvas.remove(text); canvas.renderAll(); if (!isDown) return; var pointer = canvas.getPointer(o.e); line.set({ x2: pointer.x, y2: pointer.y }); // daminufe: You push a new object with the current position of the mouse points.push({ x: pointer.x, y: pointer.y }); endx[temp] = pointer.x; endy[temp] = pointer.y; if (trigger == "1") { // daminufe: you call the function that calculates the points var px = Calculate.lineLength(points).toFixed(2); text = new fabric.Text('Length ' + px, { left: endx[temp], top: endy[temp], stroke: $('#selColor').val(), fontSize: 18 }); canvas.add(text); } canvas.renderAll(); }); canvas.on('mouse:up', function (o) { var pointer = canvas.getPointer(o.e); isDown = false; }); var Calculate = { lineLength: function (pointArray) { var distance = 0; for (var i=0; i &lt; pointArray.length - 1; i++) { var p1 = pointArray[i]; var p2 = pointArray[i + 1]; distance += normalizedSize * (Math.sqrt(Math.pow(p2.x * 1 - p1.x * 1, 2) + Math.pow(p2.y * 1 - p1.y * 1, 2))); } return distance; } }</code></pre> <p> </p> <p>Basically, there was a points, which was being defined inside the `canvas.on('mouse:down', function (o)` and now I've added a <strong>points</strong> array inside the function. Then I've initialized the points as an array with the starting position `{ x: pointer.x, y: pointer.y }`.</p> <p> </p> <p>Then I've pushed an object with the current position of the polyline.</p> <p><strong>points.push({ x: pointer.x, y: pointer.y });</strong></p> <p> </p> <p>In the Calculate.lineLength, I've changed the distance to be calculated on the following way:</p> <p><strong>distance += normalizedSize * (Math.sqrt(Math.pow(p2.x * 1 - p1.x * 1, 2) + Math.pow(p2.y * 1 - p1.y * 1, 2)));</strong></p>
comments powered by Disqus