Databases
StackOverflow2013
Postsdbo
POSpliting a quadratic slice into 3 smaller slices HTML5 CANVAS JS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSpliting a quadratic slice into 3 smaller slices HTML5 CANVAS JS
    text
    copied!<p>I have a quadratic curve that I use to create a slice of a piechart. The slice is situated in an axis of x and y, with the center point at (0,0). The radius is variable at radiusX and radiusY. This slice travels 90 degrees.</p> <p>I need to split this slice into 3 seperate slices (each having 30 degree angle) and have them match whatever curve their parent slice had. </p> <p>The following images show possible examples of the slice. Black circles adjust the size/shape of the slice:</p> <p><img src="https://i.stack.imgur.com/auYOi.png" alt="enter image description here"> <img src="https://i.stack.imgur.com/BroY6.png" alt="enter image description here"> <img src="https://i.stack.imgur.com/HqYNc.png" alt="enter image description here"></p> <p>Here is the function I've made but it's just not working correctly:</p> <pre><code>//globalPosX and globalPosY equal whatever position each of the two large black circles have repectively. var canvas = document.getElementById('CV_slices'); var context = canvas.getContext('2d'); var cenX = canvas.width/2; var cenY = canvas.height/2; var blackDotX = globalPosX - cenX; var blackDotY = cenY - globalPosY; var endX; var endY; var controlX; var controlY; //set first slice var startCoOrds = { x: cenX , y: globalPosY }; for (i=1; i &lt; 4; i++) { //make end(x,y) of previous slice the start(x,y) for the next slice. endX = startCoOrds.x - (blackDotX*Math.sin(30)); endY = startCoOrds.y + (blackDotY*Math.cos(30)); //set position of control point using position of start/end positions (at the moment only adjustibng using +10 -10 at end) controlX = ((endX - startCoOrds.x) /2) + (startCoOrds.x) + 10; controlY = ((endY - startCoOrds.y) / 2) + (startCoOrds.y) - 10; // draw slice context.save(); context.beginPath(); context.moveTo(cenX, cenY); context.lineTo(startCoOrds.x, startCoOrds.y); context.quadraticCurveTo(controlX, controlY, endX, endY); context.lineTo(cenX, cenY); //make end(x,y) of previous slice the start(x,y) for the next slice startCoOrds.x = endX; startCoOrds.y = endY; context.closePath(); context.globalAlpha = 0.1; context.fillStyle = "#333333"; context.fill(); context.lineWidth = 2; context.strokeStyle = "#ffffff"; context.stroke(); context.restore(); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload