Bezier Curve drawing

Developers
6 
function toSVGPoints(points) {
  var result = '';

  for (var i = 0, p; (p = points[i]); i++) {
    result += p.x + ',' + p.y + ' ';
  }

  return result;
}

function toSVGCurve(points) {
    var result = '';
    var result = 'm  ' + points[0].x + ',' + points[0].y;
    if (!isCurve) {
        for (var i = 1; i < points.length; i++) {
            result += 'L' + points[i].x + ',' + points[i].y + ' ';
        }
    } else {
        if (points.length >= 3) {
            result += ' Q' + points[1].x + ',' + points[1].y;
            result += ' ' + points[2].x + ',' + points[2].y;
        }
        for (var i = 3, p; (p = points[i]) ; i++) {
            result += ' T' + points[i].x + ',' + points[i].y;
        }
    }

    return result;
}


module.exports.createCurve = function (points, attrs) {
    return Snap.create('path', { d: toSVGCurve(points) }).attr(attrs || {});
};

module.exports.updateCurve = function (gfx, points) {
    return gfx.attr({ d: toSVGCurve(points) });
};
In the RenderUtil.js of diagram.js

And in the modeler renderer

  function isCurvedConnection(connection) {
      if (connection.type === 'vdml:SequenceFlow') {
          return true;
      }
      return false;
  }
  function createPathFromConnection(connection) {
    var isCurve = isCurvedConnection(connection);
    var waypoints = connection.waypoints;
    
    var pathData = 'm  ' + waypoints[0].x + ',' + waypoints[0].y;
    if (!isCurve) {
        for (var i = 1; i < waypoints.length; i++) {
            pathData += 'L' + waypoints[i].x + ',' + waypoints[i].y + ' ';
        }
    } else {
        if (waypoints.length >= 3) {
            pathData += ' Q' + waypoints[1].x + ',' + waypoints[1].y;
            pathData += ' ' + waypoints[2].x + ',' + waypoints[2].y;
        }
        for (var i = 3, p; (p = waypoints[i]) ; i++) {
            pathData += ' T' + waypoints[i].x + ',' + waypoints[i].y;
        }
    }
    return pathData;
  }

Used the above code to draw curve…

2 Likes