position label 在 canvas 弧上的百分比使用 javascript

Question

我使用帶有百分比數據的 canvas 繪制了弧線。 現在，我想 label 每個數據都帶有百分比文本（例如：20%）。 我在 canvas 弧上定位數據百分比 label 有問題。 我無法正確 position 每個弧內的文本。

藍色-20%、黃色-20%、紅色-10%

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var jQCanvas = $('#canvas'); var canvas = jQCanvas[0]; canvas.width = jQCanvas.width(); canvas.height = jQCanvas.height(); center_x = canvas.width / 2; //x center_y = canvas.height / 2; //y lineWidth = 20; var radius = canvas.height / 2 - 20; //r circle(center_x, center_y, radius); function circle(x, y, r) { var starting_point = 1.5 * Math.PI; cumulative_degree = 0; data = [ ['#17a2b8', 20], ['#ffc107', 20], ['#dc3545', 10] ]; //value in percent ctx.lineWidth = 20; //arc thickness for (j = 0; j < data.length; j++) { ctx.strokeStyle = data[j][0]; //arc color ctx.beginPath(); start = cumulative_degree * (Math.PI / 180) + starting_point; degree = data[j][1] / 100 * 360; cumulative_degree += data[j][1] / 100 * 360; end = degree * (Math.PI / 180) + start; ctx.arc(x, y, r, start, end); //ctx.fillText(data[j][1]+'%', start, end); ctx.stroke(); // draw the label var midAngle = ((cumulative_degree - 90) - degree) + ((cumulative_degree - 90) - ((cumulative_degree - 90) - degree)) / 2; var labelRadius = r *.75; var cx = 50; var cy = 50; var lbl_x = cx + (labelRadius) * Math.cos(midAngle); var lbl_y = cy + (labelRadius) * Math.sin(midAngle); ctx.fillStyle = 'black'; ctx.fontSize = 30; ctx.fillText(data[j][1], lbl_x, lbl_y); } remaining_degree = 360 - cumulative_degree; ctx.strokeStyle = 'silver'; //arc color ctx.beginPath(); start = cumulative_degree * (Math.PI / 180) + starting_point; degree = remaining_degree; end = degree * (Math.PI / 180) + start; ctx.arc(x, y, r, start, end); if (remaining_degree > 0) { ctx.stroke(); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="canvas" height="150" width="150"></canvas>

Answer 1

在計算 midAngle 時，我使用了開始和結束角度的弧度，而不是使用角度。 這是因為在計算弧度時，我添加了starting_point (1.5*Math.PI)，因為我從頂部繪制弧線。 然后，使用 midAngle 計算 label position 的 x 和 y。

var lbl_x = cx + (labelRadius) * Math.cos(midAngle);
var lbl_y = cy + (labelRadius) * Math.sin(midAngle);

對於cx和cy，我給出了canvas.width/2; 和canvas.height/2;

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var jQCanvas = $('#canvas'); var canvas = jQCanvas[0]; canvas.width = jQCanvas.width(); canvas.height = jQCanvas.height(); center_x=canvas.width/2;//x center_y=canvas.height/2;//y lineWidth=20; var radius = canvas.height/2 - 20;//r circle(center_x, center_y, radius); function circle(x,y,r) { var starting_point=1.5*Math.PI; cumulative_degree=0; data=[['#17a2b8',25],['#ffc107',20],['#dc3545',5]];//value in percent ctx.lineWidth=20;//arc thickness for(j=0;j<data.length;j++) { ctx.strokeStyle=data[j][0];//arc color ctx.beginPath(); start=cumulative_degree* (Math.PI / 180)+starting_point; degree=data[j][1]/100*360; cumulative_degree+=data[j][1]/100*360; end=degree * (Math.PI / 180)+start; ctx.arc(x, y, r, start, end); ctx.stroke(); //label var midAngle=start+(end-start)/2; var labelRadius = r *.75; var cx = center_x; var cy = center_y; var lbl_x = cx + (labelRadius) * Math.cos(midAngle); var lbl_y = cy + (labelRadius) * Math.sin(midAngle); ctx.fillStyle = 'black'; ctx.fontSize= 30; console.log(lbl_x+'=>'+lbl_y); ctx.fillText(data[j][1], lbl_x, lbl_y); } remaining_degree=360-cumulative_degree; ctx.strokeStyle='silver';//arc color ctx.beginPath(); start=cumulative_degree* (Math.PI / 180)+starting_point; degree=remaining_degree; end=degree * (Math.PI / 180)+start; ctx.arc(x, y, r, start, end); if(remaining_degree>0) { ctx.stroke(); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="canvas" height="150" width="150"></canvas>