Search code examples
javascriptmathlinefabricjspolygon

Adjusting lines positions on polygon

I am using FabricJS to generate a polygon with 6 points 

var polygon = new fabric.Polygon([
  new fabric.Point(150, 50),
  new fabric.Point(250, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150),
  new fabric.Point(50, 250),
]);

On each point I need to have a line, so I am iterating through points and adding lines successfully:

return new fabric.Line([p.x, p.y, fromX, fromY], {
  stroke: colors[i],
  strokeWidth: 10,
  hasBorders: true,
  strokeDashArray: [20, 5]
});

this code generates polygon successfully with my desired coloured line: enter image description here

The issue is now I want to adjust lines positions, for example the red line I need to be sticky on top of the polygon, the green one I need it half inside of polygon, blue 5% distant from polygon, etc.

While searching I found, Check if Point Is Inside A Polygon and tried those functions, which gives different results, so I have two functions, isinPolygonFirst and isinPolygonSecond, which basically are checking if my point is inside polygon. I thought If I could know that if my points are inside polygon I can add some value, for example if point was [20,20 and if it is inside polygon I can increase to [21,21] and recheck if it is. I am posting debugging info(in snippet below needs to move polygon box to see debug messages):

enter image description here

// function to check if line exists in polygon
function isinPolygonFirst(points, longitude_x, latitude_y) {
  vertices_y = new Array();
  vertices_x = new Array();
  var r = 0;
  var i = 0;
  var j = 0;
  var c = 0;
  var point = 0;

  for (r = 0; r < points.length; r++) {
    vertices_y.push(points[r].y);
    vertices_x.push(points[r].x);
  }
  points_polygon = vertices_x.length;
  for (i = 0, j = points_polygon; i < points_polygon; j = i++) {
    point = i;
    if (point == points_polygon)
      point = 0;
    if (((vertices_y[point] > latitude_y != (vertices_y[j] > latitude_y)) && (longitude_x < (vertices_x[j] - vertices_x[point]) * (latitude_y - vertices_y[point]) / (vertices_y[j] - vertices_y[point]) + vertices_x[point])))
      c = !c;
  }
  return c;
}
// other function to check if line exist in polygon 

function isinPolygonSecond(points, x, y) {

  cornersX = new Array();
  cornersY = new Array();

  for (r = 0; r < points.length; r++) {
    cornersX.push(points[r].x);
    cornersY.push(points[r].y);
  }

  var i, j = cornersX.length - 1;
  var odd = false;

  var pX = cornersX;
  var pY = cornersY;

  for (i = 0; i < cornersX.length; i++) {
    if ((pY[i] < y && pY[j] >= y || pY[j] < y && pY[i] >= y) &&
      (pX[i] <= x || pX[j] <= x)) {
      odd ^= (pX[i] + (y - pY[i]) * (pX[j] - pX[i]) / (pY[j] - pY[i])) < x;
    }

    j = i;
  }

  return odd;
}

var canvas = new fabric.Canvas("c", {
  selection: false
});

var points = [];

var polygon = new fabric.Polygon([
  new fabric.Point(150, 50),
  new fabric.Point(250, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150),
  new fabric.Point(50, 250),
]);

polygon.on("modified", function() {
  //document.getElementById("p").innerHTML = JSON.stringify(this)+ "<br>";
  var matrix = this.calcTransformMatrix();
  var transformedPoints = this.get("points")
    .map(function(p) {
      return new fabric.Point(
        p.x - polygon.pathOffset.x,
        p.y - polygon.pathOffset.y);
    })
    .map(function(p) {
      return fabric.util.transformPoint(p, matrix);
    });
  var circles = transformedPoints.map(function(p) {
    return new fabric.Circle({
      left: p.x,
      top: p.y,
      radius: 3,
      fill: "red",
      originX: "center",
      originY: "center",
      hasControls: false,
      hasBorders: false,
      selectable: false
    });
  });
  //Lines Colors
  var colors = ['red', 'green', 'blue', 'violet', 'teal', 'brown'];
  //I need these distances from the polygon, where is negative value it should go inside polygon
  var LinesDistances = [10, -5, -20, 0, 20, 40];
  
  var lines = transformedPoints.map(function(p, i) {
    var po = (i < polygon.points.length) ? i + 1 : 0;

    if (typeof transformedPoints[po] === 'undefined')
      po = 0;

    var fromX = transformedPoints[po].x;
    var fromY = transformedPoints[po].y;
    var isinPolygon = isinPolygonFirst(transformedPoints, fromX, fromY);
    var isinPolygon2 = isinPolygonSecond(transformedPoints, fromX, fromY);

    var debug = '';
    debug += 'fromX:' + fromX;
    debug += ' ,fromY :' + fromY;
    debug += ' ,isinPolygon:' + isinPolygon;
    debug += ' ,isinPolygonSecond:' + isinPolygon2;

    document.getElementById("p").innerHTML += '<p style="color:#fff;background:' + colors[i] + '"> ' + debug + "</p>";

    return new fabric.Line([p.x, p.y, fromX, fromY], {
      stroke: colors[i],
      strokeWidth: 10,
      hasBorders: true,
      strokeDashArray: [20, 5]
    });
  });
  this.canvas.clear().add(this).add.apply(this.canvas, lines).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
  polygon.set({
    opacity: 0.5
  });
  polygon.sendToBack();
});

canvas.add(polygon).renderAll();
canvas {
  border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>

<div id="p"></div>
<canvas id="c" width="600" height="400"></canvas>

I am not certain if it's the right approach I am moving to, I wants to dynamically distance lines around the polygon as it will be required.

I need these distances from the polygon, where is negative value it should go inside polygon

  var LinesDistances = [10, -5, -20, 0, 20, 40];

Here is fiddle and code. at https://jsfiddle.net/DivMaster/0e34Lnyx/211/

Any help? Thanks <3

Solution

  • I was able to solve it by using Intersects library available at https://github.com/davidfig/intersects

    I calculated the midpoint of line and performed plus/minus operations on x/y points to see if points reside in polygon

    pointPolygon(x1, y1, points)