如何在给定数据范围的情况下绘制半圆形轮廓 SVG 并用 Javascript 填充？ [复制]

Question

我的任务是尝试构建如下所示的示例。我无法根据给定的数据范围绘制曲线并填充它。我试图通过在 div 中使用 div 来做到这一点，但后来我意识到没有办法让 div 看起来像示例，因此我认为 SVG 是要走的路。绘制这个的 svg 路径坐标是什么？如何根据给定数据的范围用 Javascript 填充它？我将把它做成一个 React 组件，它通过 props 接受数据。我不需要帮助在 React 中编写代码，但我确实需要帮助才能开始第一部分。

]

Answer 1

正如你所说，你只是在寻找入门帮助，你应该看看这里：

http://xahlee.info/js/svg_circle_arc.html

基本上，您要绘制的是圆弧。您可以使用 SVG 或画布。

从上面的链接，这是一个绘制圆弧的 JS 代码：

const cos = Math.cos;
const sin = Math.sin;
const π = Math.PI;

const f_matrix_times = (( [[a,b], [c,d]], [x,y]) => [ a * x + b * y, c * x + d * y]);
const f_rotate_matrix = ((x) => [[cos(x),-sin(x)], [sin(x), cos(x)]]);
const f_vec_add = (([a1, a2], [b1, b2]) => [a1 + b1, a2 + b2]);

const f_svg_ellipse_arc = (([cx,cy],[rx,ry], [t1, Δ], φ ) => {
/* [
returns a SVG path element that represent a ellipse.
cx,cy → center of ellipse
rx,ry → major minor radius
t1 → start angle, in radian.
Δ → angle to sweep, in radian. positive.
φ → rotation on the whole, in radian
url: SVG Circle Arc http://xahlee.info/js/svg_circle_arc.html
Version 2019-06-19
 ] */
Δ = Δ % (2*π);
const rotMatrix = f_rotate_matrix (φ);
const [sX, sY] = ( f_vec_add ( f_matrix_times ( rotMatrix, [rx * cos(t1), ry * sin(t1)] ), [cx,cy] ) );
const [eX, eY] = ( f_vec_add ( f_matrix_times ( rotMatrix, [rx * cos(t1+Δ), ry * sin(t1+Δ)] ), [cx,cy] ) );
const fA = ( (  Δ > π ) ? 1 : 0 );
const fS = ( (  Δ > 0 ) ? 1 : 0 );
const path_2wk2r = document. createElementNS("http://www.w3.org/2000/svg", "path");
path_2wk2r.setAttribute("d", "M " + sX + " " + sY + " A " + [ rx , ry , φ / (2*π) *360, fA, fS, eX, eY ].join(" "));
return path_2wk2r;
});