Draw Customizable Polylines Using jQuery And Canvas - polyline.js

Draw Customizable Polylines Using jQuery And Canvas - polyline.js

polyline.js is a jQuery plugin/jQuery UI widget that lets you draw polylines with dots on an HTML canvas to represent routes, paths, data series, etc.

1. Include the required jQuery and jQuery UI libraries from CDN.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Download and include the jquery.polyline.min.js script after jQuery.

<script src="jquery.polyline.min.js"></script>

3. Create an HTML canvas element on which you want to draw the polylines and dots.

<canvas id="polyline">
  Your browser does not support HTML5 Canvas.
</canvas>

4. Initialize the plugin on the canvas element and done. Double-click the canvas to add a new dot. Double-click on a dot to remove it.

$('#polyline').polyline();

5. Customize the appearance of the polylines and dots.

$('#polyline').polyline({
  max_x: 10,
  max_y: 10,
  min_dot_diff: 0.1,
  padding_top: 15,
  padding_right: 15,
  padding_bottom: 25,
  padding_left: 25,
  stroke_count: 10,
  stroke_size: 7,
  stroke_width: 1,
  stroke_shift: 4,
  stroke_text_font_style: "bold",
  stroke_text_font_name: "sans-serif",
  stroke_text_font_size: 14,
  stroke_text_hshift: 5,
  stroke_text_vshift: 18,
  stroke_text_precision: 2,
  line_width: 2,
  axis_width: 1,
  dot_radius: 4,
  dot_pick_radius_addition: 3,
  dots: [] // an array of predefined dots
});

6. Execute a callback function each time the polyline changes.

$('#polyline').polyline({
  'change': function(event, isnew, affected) {
    var text = ((isnew === true) ? "Added" : (isnew === false) ? "Changed" : "Deleted") +
          " dot #"+affected.index+" at ( "+affected.dot[0]+" ; "+affected.dot[1]+" )";
}

This awesome jQuery plugin is developed by SmoothMouse. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 02.04.2019
  • Source