how to ellipse()? #3065

jhchoi-ii · 2017-05-18T08:07:24Z

	<head>
		<style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }

        p {
            max-width:600px;
        }

        h4 {
            margin-bottom:3px;
        }
    </style>
		
	</head>
	<body>
<p>
  You can draw on the canvas using normal HTML5 canvas functions. The before drawing will be behind the network, the after drawing will be in front of the network.
</p>

<div id="mynetwork"></div>
<pre id="eventSpan"></pre>
<script type="text/javascript">
  // create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5}
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, data, options);

  network.on("initRedraw", function () {
    // do something like move some custom elements?
  });
  network.on("beforeDrawing", function (ctx) {
    var nodeId = 1;
    var nodePosition = network.getPositions([nodeId]);
    ctx.strokeStyle = '#294475';
    ctx.fillStyle = '#A6D5F7';
    ctx.ellipse(100, 100, 50, 20, 45 * Math.PI/180, 0, 2 * Math.PI, false);
	//ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
    ctx.fill();
    ctx.stroke();
    
    ctx.strokeStyle = '#294475';
    ctx.fillStyle = '#A6D5F7';
    ctx.ellipse(120, 120, 50, 20, 90 * Math.PI/180, 0, 2 * Math.PI, false);
	//ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
    ctx.fill();
    ctx.stroke();
    
    ctx.strokeStyle = '#294475';
    ctx.fillStyle = '#A6D5F7';
    ctx.ellipse(140, 140, 50, 20, 135 * Math.PI/180, 0, 2 * Math.PI, false);
	//ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
    ctx.fill();
    ctx.stroke();
    
    ctx.strokeStyle = '#294475';
    ctx.fillStyle = '#A6D5F7';
    ctx.ellipse(160, 160, 50, 20, 180 * Math.PI/180, 0, 2 * Math.PI, false);
	//ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
    ctx.fill();
    ctx.stroke();
  });
</script>
	</body>
</html>

.ellipse()

If you use "ctx.ellipse()" in "beforeDrawing"

The ellipse does not rotate.

how to ctx.ellipse()?
How to rotate the four ellipses differently?

The text was updated successfully, but these errors were encountered:

wimrijnders · 2017-05-18T18:26:02Z

Hi there,

It's because network adds its own ellipse() method to the 2D context(*). You can find it in lib/network/shapes.js, with prototype:

CanvasRenderingContext2D.prototype.ellipse = function (x, y, w, h) {
 ...
}

This method definition just plain overrides any method that was there previously. I admit this is dubious; prototypes of existing, library objects shouldn't be overwritten just like that.

I'm not sure how to handle this properly; I suppose that if ellipse() already exists, it shouldn't be overwritten. The parameters are accidentally in the right place to make this possible.

I'm going to consult this one with some other admin's. Thanks for reporting, I can fully imagine this is totally confusing.

(*): TIL

wimrijnders · 2017-05-19T04:55:19Z

A fix for this is pending. I'm sorry to say I don't have an easy workaround for this. If you build vis.js from the code, you could rename the method as described in the previous comment yourself.

Thanks for reporting!

wimrijnders added Network Problem labels May 18, 2017

wimrijnders mentioned this issue May 19, 2017

Avoid overriding standard context method ellipse() #3072

Merged

yotamberk added the Fixed awaiting release label May 19, 2017

mojoaxel added this to the Minor Release v4.20 milestone May 19, 2017

mojoaxel closed this as completed May 21, 2017

wimrijnders removed the Fixed awaiting release label Jul 17, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to ellipse()? #3065

how to ellipse()? #3065

jhchoi-ii commented May 18, 2017

wimrijnders commented May 18, 2017 •

edited

Loading

wimrijnders commented May 19, 2017

how to ellipse()? #3065

how to ellipse()? #3065

Comments

jhchoi-ii commented May 18, 2017

wimrijnders commented May 18, 2017 • edited Loading

wimrijnders commented May 19, 2017

wimrijnders commented May 18, 2017 •

edited

Loading