search

sciapp / gr

GR framework: a graphics library for visualisation applications
Other
328 stars 55 forks source link

Javascript Polyline #183

Open etm opened 1 year ago

etm commented 1 year ago

I can not find out how to draw a polyline with discontinuities (Sprungstellen) in javascript? Is this even possible?

An intuitive solution would be to set corresponding x,y pairs to null.

danielkaiser commented 1 year ago

Hi @etm,

using NaN for x and y should produce discontinuities in a polyline:

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Polyline using gr.js</title>
</head>
<body>
  <canvas id="example-canvas" width="500" height="500"></canvas>
  <script src="https://gr-framework.org/downloads/gr-latest.js"></script>
  <script>
    GR.ready(function() {
      var gr = new GR('example-canvas');

      gr.setviewport(0, 1, 0, 1);

      var x = new Array(100);
      var y = new Array(100);
      x[0] = y[0] = 0;
      x[1] = 0.5;
      y[1] = 1;

      x[2] = y[2] = NaN;

      x[3] = 0.5;
      y[3] = 0;
      x[4] = y[4] = 1;

      gr.polyline(5, x, y);
    });
  </script>
</body>
</html>