javascript - 计算圆上的 SVG 圆弧路径
问题描述
我正在尝试使用 SVG 路径元素绘制类似于饼图的 SVG 对象。我之前曾使用此 stackoverflow 帖子中的示例来生成 SVG 弧形路径。但不知何故,我的两条弧线应该是同一个圆的一部分,并没有形成一个完整的圆。这是我用来在圆上生成弧线的代码示例。
var draw = SVG('drawing').size(300, 130)
var radi = 20;
var st = {'x':0,'y':0};
var pie1Arc = this.describeArc(this.st.x,this.st.y,this.radi,0,42)
var pie1 = draw.path('M 0 0 '+ pie1Arc)
pie1.fill('none')
pie1.stroke({ color: '#f06', width: 3, linecap: 'round', linejoin: 'round' })
pie1.move(80,80)
var pie2Arc = this.describeArc(this.st.x,this.st.y,this.radi,42,360)
var pie2 = draw.path('M 0 0 '+ pie2Arc)
pie2.fill('none')
pie2.stroke({ color: '#f06', width: 3, linecap: 'round', linejoin: 'round' })
pie2.move(80,80)
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
return d;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.5.0/svg.min.js"></script>
<div id="drawing"></div>
解决方案
我已经重写describeArc
并重置了st = {'x':80,'y':80};
而不是移动每个弧。如果您确实需要翻译,请将 2 条弧线放在一个组中并翻译该组。
var draw = SVG('drawing').size(300, 130)
var radi = 20;
var st = {'x':80,'y':80};
var pie1Arc = this.describeArc(this.st.x,this.st.y,this.radi,0,42)
var pie1 = draw.path(pie1Arc)
pie1.fill('none')
pie1.stroke({ color: '#f06', width: 3, linecap: 'round', linejoin: 'round' })
var pie2Arc = this.describeArc(this.st.x,this.st.y,this.radi,42,360)
var pie2 = draw.path(pie2Arc)
pie2.fill('none')
pie2.stroke({ color: '#f06', width: 3, linecap: 'round', linejoin: 'round' })
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle){
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = `M${start.x},${start.y}A${radius}, ${radius}, 0, ${largeArcFlag}, 0, ${end.x}, ${end.y}`;
return d;
}
svg{border:solid}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.5.0/svg.min.js"></script>
<div id="drawing"></div>
推荐阅读
- c# - XRay 和 XUnit 报告器错误地解析多个测试用例属性
- django - FormView 不在 Django 中保存数据
- python - PyTorch 安装问题 - 使用 Jupyter notebook 和 Conda navigator 找不到包
- r - 在 Jupyter Lab 中从 Rmarkdown .Rmd 文件运行 R 代码时如何调整绘图大小?
- python - 通过气流中的文件观察器触发 dag
- amazon-web-services - 无法使用 Amazon Linux 2 在 Lightsail 实例中安装 CodeDeploy
- angular - 如何在打字稿中从cdn脚本执行函数
- javascript - react-navigation 导航钩子类型
- angular - 单击Angular更改项目的颜色
- firebase - 在 Firebase 中检索 API 密钥