Javascript如何创建圈子

Question

大家好，我正在学习 javascript 并使用 raphael 库创建对象。我正在尝试创建以下示例:

Example

你可以看到我想要做什么，但是我想要它，所以它是从上到下而不是从左到右

到目前为止，我已经设法做到了这一点，但一切都很顺利。

var Top = paper.rect(700,0,100,189).attr({fill: "red"});;
var mid = paper.rect(700,189,100,221).attr({fill: "yellow"});
var Bot = paper.rect(700,410,100,189).attr({fill: "red"});

任何使它更 flex 的帮助都会很棒

Answer 1

遇到了一些有趣的代码:原文链接:https://gist.github.com/omniosi/9556084

Raphael(function(){
  var paper = new Raphael('box', 300, 250);
  //var shape = paper.circle(150, 125, 55);
  var str = getCircleToPath(150, 125, 55);
  //console.log(str);
  function getCircleToPath(x, y, r){ //x and y are center, r is radius
    var s = 'M ' + 
            x + ',' + (y-r)+
            ' A ' + r + ',' + r +
            ' 45 1,1 ' + 
            (x-0.1) + ',' + (y-r) + 
            ' z';
    //console.log(s);
    return s;
  }

  //var shape = paper.path("M 150,70 A 55,55 45 1,1 149.9,70 z");     
  var shape = paper.path(str);     

  shape.attr({
    'stroke-width': 1,
    'stroke-opacity': 1,
    stroke: 'black',
    fill: '#000000'
  }).data('id', 'shape');

  shape.mouseover(function(){
    shape.animate({
      path: "M55,129.8c0-8.1,40.3-9.7,42.7-17c2.5-7.6-29.1-32.6-24.5-38.8c4.6-6.4,38.2,16,44.5,11.3c6.3-4.6-4.6-43.4,3-45.9 c7.3-2.4,21.3,35.4,29.4,35.4c8.1,0,22.1-37.7,29.4-35.4c7.6,2.5-3.3,41.3,3,45.9c6.4,4.6,39.9-17.7,44.5-11.3 c4.6,6.3-27,31.3-24.5,38.8c2.4,7.3,42.7,8.9,42.7,17c0,8.1-40.3,9.7-42.7,17c-2.5,7.6,29.1,32.6,24.5,38.8 c-4.6,6.4-38.2-16-44.5-11.3c-6.3,4.6,4.6,43.4-3,45.9c-7.3,2.4-21.3-35.4-29.4-35.4c-8.1,0-22.1,37.7-29.4,35.4 c-7.6-2.5,3.3-41.3-3-45.9c-6.4-4.6-39.9,17.7-44.5,11.3c-4.6-6.3,27-31.3,24.5-38.8C95.3,139.5,55,137.8,55,129.8z"
    }, 500, 'bounce');

  });

  shape.mouseout(function(){
    shape.animate({
      //path: "M 150,70 A 55,55 45 1,1 149.9,70 z"
      path: str
    }, 500, 'bounce');
  });
});