0

我刚刚开始使用 SVG 和 Raphael.js 并试图绘制一个填充的弧线，但不知道如何开始。我正在尝试绘制一个基本的挂锁，并让锁体和螺栓的两个部分适合顶部的弧线。它基本上是一个填充的 180 度弧，10 像素宽。我猜我需要使用 .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 回答