0

SVGとRaphael.jsを使い始めたばかりで、塗りつぶされた円弧を描画しようとしていますが、開始方法がわかりません。基本的な南京錠を描き、本体とボルトの2つの部分を弧に合わせて上に配置しようとしています。これは基本的に、幅10ピクセルの180度の円弧で埋められています。.path（）を使用する必要があると思いますが、構文がわからないか、「curveTo」と「arc」のどちらを使用するかがわかりません。正直に言うと、適切なSVGまたはRaphaelチュートリアルサイトを見つけるのに苦労しています。

var padlockBody = paper.rect(100, 100, 100, 100, 5);
padlockBody.attr("fill", "#000000");

var leftBoltPart = paper.rect(120, 70, 10, 30);
leftBoltPart.attr("fill", "#000000");

var rightBoltPart = paper.rect(170, 70, 10, 30);
rightBoltPart.attr("fill", "#000000");

// TODO: filled arc to fit on top of left/right bolt parts
4

1 に答える 1

4

アークは手で書くのが難しいことで有名です（純粋なSVGでもRaphaelでも同じです）。

私は通常、これらの方法でRaphaelを拡張します（クレジットはthe55に属します）

// http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
Raphael.fn.arc = function(startX, startY, endX, endY, radius1, radius2, angle) {
  var arcSVG = [radius1, radius2, angle, 0, 1, endX, endY].join(' ');
  return this.path('M'+startX+' '+startY + " a " + arcSVG);
};

Raphael.fn.circularArc = function(centerX, centerY, radius, startAngle, endAngle) {
  var startX = centerX+radius*Math.cos(startAngle*Math.PI/180); 
  var startY = centerY+radius*Math.sin(startAngle*Math.PI/180);
  var endX = centerX+radius*Math.cos(endAngle*Math.PI/180); 
  var endY = centerY+radius*Math.sin(endAngle*Math.PI/180);
  return this.arc(startX, startY, endX-startX, endY-startY, radius, radius, 0);
};

ここでデモを見つけることができます：http：//jsfiddle.net/cahT9/

于 2012-10-10T22:34:26.120 に答える