Raphael的锥形线

Question

我正在尝试绘制一些动画的草叶，并且我想生成一条底部较厚，顶部较薄的锥形曲线。我想象得到的唯一方法是绘制每条曲线的长度较小和线宽较大。

我很好奇，如果有人有更好的方式来做到这一点。

Answer 1

请尝试以下功能。它绘制了草的轮廓。您可以修改它以满足您的需求。为Raphael编码。

/** 
* 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);