SVG - 拉斐尔的新月形答案

【问题标题】：SVG - crescent shape in raphaelSVG - 拉斐尔的新月形
【发布时间】：2013-05-17 16:05:23
【问题描述】：

我有一个带有半个圆圈的圆圈，我将用它来创建发光效果 - 我真正想做的是将它做成新月形

有人知道如何将半圆做成新月形，让它看起来更像 3d 吗？

这是我目前所拥有的

var paper = Raphael("holder", 550, 550/1.5);
var rad = Math.PI / 180;
function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);
    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}
var circle = paper.circle(100, 100, 50).attr({"fill":"brown"});
var fifty = sector(100,100,50,0,180,{"fill":"white","opacity":"0.4"});

【问题讨论】：

您仍然可以查看下面提供的解决方案以获得洞察力。

标签： svg raphael

【解决方案1】：

我已经稍微修改了 main 函数来达到同样的效果。

function sector(cx, cy, r, startAngle, endAngle, params) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);
    return paper.path(["M", x1, y1, 
    "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, 
    "A", r*1.1, r*1.1, 0, +(endAngle - startAngle > 180), 1, x1, y1, 
    "z"]).attr(params);
}

在绘制第二条曲线时，将绘制的感觉反转并稍微增加半径。希望对您有所帮助。

【讨论】：

太完美了，感激不尽。

【解决方案2】：

我通过在inkscape中绘制新月然后保存为SVG解决了这个问题

【讨论】：