Svg 在拉斐尔中绘制填充180度圆弧
我刚刚开始使用SVG和Raphael.js,我试图画一个填充弧,但不知道如何开始。我试着画一个基本的挂锁,让它的主体和螺栓的两个部分与顶部的弧线相匹配。它基本上是一个180度的圆弧,10像素宽。我猜我需要使用.path(),但不确定语法,也不确定是否要使用“curveTo”或“arc”——老实说,我很难找到任何好的SVG或Raphael教程网站Svg 在拉斐尔中绘制填充180度圆弧,svg,raphael,Svg,Raphael,我刚刚开始使用SVG和Raphael.js,我试图画一个填充弧,但不知道如何开始。我试着画一个基本的挂锁,让它的主体和螺栓的两个部分与顶部的弧线相匹配。它基本上是一个180度的圆弧,10像素宽。我猜我需要使用.path(),但不确定语法,也不确定是否要使用“curveTo”或“arc”——老实说,我很难找到任何好的SVG或Raphael教程网站 var padlockBody = paper.rect(100, 100, 100, 100, 5); padlockBody.attr("fill"
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
众所周知,手工编写圆弧非常困难(在纯SVG或Raphael中也是如此) 我通常用这些方法扩展拉斐尔(学分属于)
您可以在这里找到一个演示:众所周知,弧很难手工编写(在纯SVG或Raphael中也是如此) 我通常用这些方法扩展拉斐尔(学分属于)
您可以在这里找到一个演示:谢谢,如果我能添加JSFIDLE示例,我会是+2。我在昨晚发帖后意识到我应该这么做,但是谢谢你给我带来额外的麻烦。谢谢,如果我能添加JSFIDLE示例,我会是+2。我昨晚发帖后意识到我应该这么做,但谢谢你给我添了这么多麻烦。
// 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);
};