我正在尝试从圆心开始以一定 Angular (60 度)绘制 6 根棍子
图中是手动设置坐标实现的。是否可以用 Angular 和长度来画这6根木棍?如果有必要,我愿意使用图书馆。
<defs>
<marker id="markerCircle" markerwidth="13" markerheight="13" refx="5" refy="7" orient="auto">
<circle cx="7" cy="7" r="3" style="stroke: none; fill:#ef4b22;" />
</marker>
</defs>
<path d="M150,5 L150,55"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M25,60 L75,95"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M20,225 L68,200"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M275,60 L225,95"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M280,225 L220,200"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
<path d="M150,300 L150,250"
style="stroke: #ef4b22; stroke-width: 2px; fill: none;
marker-start: url(#markerCircle);" />
最佳答案
这是一个 demo I made for you .
主要使用的函数是在圆上找一点,如下:
function findPoint(cx, cy, rad, cornerGrad){
var cornerRad = cornerGrad * Math.PI / 180;
var nx = Math.cos(cornerRad)*rad + cx;
var ny = Math.sin(cornerRad)*rad + cy;
return { x: nx, y: ny };
}
关于javascript - SVG 标记 - 我可以设置长度和 Angular 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32921322/