拉斐尔的锥形线

时间:2013-04-15 09:23:34

标签: javascript raphael

我正在尝试绘制一些动画草叶,我想生成一个锥形曲线,底部较厚,顶部较薄。我能想象到的唯一方法就是画出每条长度较短,线宽较大的曲线。

如果有人有更好的方法,我很好奇。

1 个答案:

答案 0 :(得分:3)

请尝试以下功能。它绘制了草的开放轮廓。您可以修改它以满足您的需要。拉斐尔编码。

/**
 * drawAGrass draws an open base grass.
 * @param   paper   Raphael paper instance
 * @param   baseX   X position of the grass base center
 * @param   baseY   Y position of the grass base center
 * @param   baseW   Width of the grass base
 * @param   length  Length of the grass
 * @param   tilt    Angle of shift of the grass tip; Safe range: [-45, 45]
 */
function drawAGrass (paper, baseX, baseY, baseW, length, tilt) {
    var x1 = baseX + baseW * 0.5,
        x2 = baseX - baseW * 0.5,
        ang = (180 - tilt) * Math.PI / 180,
        x = Math.round(baseX + length * Math.sin(ang)),
        y = Math.round(baseY + length * Math.cos(ang));

    paper.path(['M', baseX, baseY, 'Q', baseX, y, x, y]);
    paper.path(['M', x1, baseY, 'Q', x1, y, x, y]);
    paper.path(['M', x2, baseY, 'Q', x2, y, x, y]);
}

如下所示使用它。

var paper = Raphael(0, 0, 500, 350);
drawAGrass(paper, 250, 330, 15, 150, 25);