将圆转换为折线
Convert Circle to Polyline
我有 svg 圈子 喜欢:
<circle stroke-width="10px" cx="317.5" cy="108.5" r="52.71147882577384"></circle>
我们可以将其视为具有定义半径的某个点。
问题:如何绘制折线(一组细线)来重现这个圆?
您需要绘制一个多边形。
在下一个示例中,多边形的顶点彼此相距 0.1 弧度。根据圆的大小,您可能需要使用较小的值,
let r = 52.71;// the radius of the circle
let cx = 317.5;// the x coord of the center of the circle
let cy = 108.5;// the y coord of the center of the circle
let points = "";// the points for the polyline
for (let a = 0; a <= 2*Math.PI; a+=.1) {
let x = cx + r * Math.cos(a);
let y = cy + r * Math.sin(a);
points += `${x}, ${y} `;
}
// close the path
//if you are using polygon instead of polyline you may skip this line
points += `${cx + r}, ${cy} `;
// set the atribute points for the polyline
poly.setAttributeNS(null, "points", points)
svg{border: solid}
<svg viewBox ="260 50 115 115" width="200">
<circle id="c" cx="317.5" cy="108.5" r="52.71" fill="gold"></circle>
<polyline id="poly" points="" stroke="red" fill="none" />
</svg>
const NUM_VERTICES = 30;
const DELTA_THETA = 2 * Math.PI / NUM_VERTICES;
function getVertices(options) {
const { cx, cy, r } = options;
function getParametricCoordinates(t) {
return [
r * Math.cos(t) + cx,
r * Math.sin(t) + cy,
];
}
const vertices = [];
for (let i = 0; i <= NUM_VERTICES; i++) {
const t = i * DELTA_THETA;
const vertex = getParametricCoordinates(t);
vertices.push(vertex);
}
return vertices;
}
const svg = document.getElementById('svg');
const polyline = document.getElementById('polyline');
const vertices = getVertices({ cx: 317.5, cy: 108.5, r: 52.71147882577384 } );
vertices.forEach(vertex => {
const point = svg.createSVGPoint();
point.x = vertex[0];
point.y = vertex[1];
polyline.points.appendItem(point);
});
<svg width="450" height="250" id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline id="polyline" stroke-width="10" />
</svg>
我有 svg 圈子 喜欢:
<circle stroke-width="10px" cx="317.5" cy="108.5" r="52.71147882577384"></circle>
我们可以将其视为具有定义半径的某个点。
问题:如何绘制折线(一组细线)来重现这个圆?
您需要绘制一个多边形。 在下一个示例中,多边形的顶点彼此相距 0.1 弧度。根据圆的大小,您可能需要使用较小的值,
let r = 52.71;// the radius of the circle
let cx = 317.5;// the x coord of the center of the circle
let cy = 108.5;// the y coord of the center of the circle
let points = "";// the points for the polyline
for (let a = 0; a <= 2*Math.PI; a+=.1) {
let x = cx + r * Math.cos(a);
let y = cy + r * Math.sin(a);
points += `${x}, ${y} `;
}
// close the path
//if you are using polygon instead of polyline you may skip this line
points += `${cx + r}, ${cy} `;
// set the atribute points for the polyline
poly.setAttributeNS(null, "points", points)
svg{border: solid}
<svg viewBox ="260 50 115 115" width="200">
<circle id="c" cx="317.5" cy="108.5" r="52.71" fill="gold"></circle>
<polyline id="poly" points="" stroke="red" fill="none" />
</svg>
const NUM_VERTICES = 30;
const DELTA_THETA = 2 * Math.PI / NUM_VERTICES;
function getVertices(options) {
const { cx, cy, r } = options;
function getParametricCoordinates(t) {
return [
r * Math.cos(t) + cx,
r * Math.sin(t) + cy,
];
}
const vertices = [];
for (let i = 0; i <= NUM_VERTICES; i++) {
const t = i * DELTA_THETA;
const vertex = getParametricCoordinates(t);
vertices.push(vertex);
}
return vertices;
}
const svg = document.getElementById('svg');
const polyline = document.getElementById('polyline');
const vertices = getVertices({ cx: 317.5, cy: 108.5, r: 52.71147882577384 } );
vertices.forEach(vertex => {
const point = svg.createSVGPoint();
point.x = vertex[0];
point.y = vertex[1];
polyline.points.appendItem(point);
});
<svg width="450" height="250" id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polyline id="polyline" stroke-width="10" />
</svg>