mozilla

比較修改

路径

Change Revisions

版本 350081:

Revision 350081 by Dx.Yang on

版本 350083:

Revision 350083 by Dx.Yang on

標題:
路径
路径
URL代稱:
SVG/Tutorial/路径
SVG/Tutorial/路径
內容:

Revision 350081
Revision 350083
n111      Curve commandsn111      曲线命令 Curve commands
n114      There are 3 different commands that can be used to create sn114      绘制平滑曲线的命令有3个,其中两个用来绘制贝塞尔曲线,另外一个用来绘制弧形或者说是圆的一部分。如果你用过Inkscap
>mooth curves. Two of those curves are Bezier curves, and the thir>e, Illustrator 或者 Photoshop,你可能对贝塞尔曲线有一定程度的了解。关于贝塞尔曲线的数学解释,你可以在<a
>d one is an "arc" or part of a circle. You might have already gai> class="external" href="http://en.wikipedia.org/wiki/B%C3%A9zier_
>ned practical experience with Bezier curves, if you used path too>curve">Wikipedia的文档</a>中获取到。其中的很多知识都可以用在这里。贝塞尔曲线的类型有很多,但是在path元素里
>ls in Inkscape, Illustrator or Photoshop. For a complete descript>,只存在两种:三次贝塞尔曲线C,和二次贝塞尔曲线Q。
>ion of the math behind Bezier curves you'll have to go to a refer 
>ence like the one on <a class="external" href="http://en.wikipedi 
>a.org/wiki/B%C3%A9zier_curve">Wikipedia</a>. It's too much inform 
>ation to try and cover here. There are an infinite number of diff 
>erent types of Bezier curves, but only two simple ones are availa 
>ble in path elements: a cubic one, C, and a quadratic one, Q. 
n117      Bezier Curvesn117      贝塞尔曲线
n120      So we'll start with the slightly more complex Bezier curve,n120      我们从稍微复杂一点的三次贝塞尔曲线入手,三次贝塞尔曲线需要定义一个点和两个控制点,所以用C命令创建三次贝塞尔曲线,需要
> the cubic one, C. Cubic Beziers take in two control points for e>设置三组坐标参数:
>ach point. As such, you have to specify three sets of coordinates 
> when you want to create a cubic Bezier 
n126      The last set of coordinates here (x,y) are where you want tn126      这里的最后一个坐标(x,y)表示的是曲线的终点,另外两个坐标是控制点,(x1,y1)是起点的控制点,(x2,y2)是终
>he line to end. The other two are control points. (x1,y1) is the >点的控制点。如果你熟悉代数或者微积分的话,会更容易理解控制点,控制点描述的是曲线起始点的斜率,曲线上各个点的斜率,是从起点斜率到终
>control point for the start of your curve, and (x2,y2) for the en>点斜率的渐变过程。(文字描述不好,维基百科上有图示,更直观。) <img align="right" alt="" class="
>d point of your curve. If you are familiar with algebra or calcul>internal" src="/@api/deki/files/159/=Cubic_Bezier_Curves.png">
>us, the control points essentially describe the slope of your lin 
>e starting at each point. The Bezier function then creates a smoo 
>th curve that transfers you from the slope you established at the 
> beginning of your line, to the slope at the other end. <img alig 
>n="right" alt="" class="internal" src="/@api/deki/files/159/=Cubi 
>c_Bezier_Curves.png"> 
n146      The example above creates nine Cubic Bezier curves. I regren146      上面的例子里,创建了9个三次贝塞尔曲线。有一点比较遗憾,标记控制点的代码会比较庞大,所以在这里舍弃了。(之前所有点都用
>t that at this point, drawing all the control points in the above>circle标记,此处一样,只不过没把代码列出来)。如果你想更准确地控制它们,可以自己动手把他们画出来。图例上的曲线从左开始,控制
> code would make it fairly large so they've been left out. You ca>点在水平方向上逐渐分开,最右侧的曲线,控制点之间离得更远。这里要注意观察,曲线沿着起点到第一控制点的方向伸出,逐渐弯曲,然后沿着第
>n draw them on your own if you want to draw the exact figure show>二控制点到终点的方向结束。(这个翻译的不太好,没弄清原文想要表达的意思。曲线的原理,还是看维基百科比较好。)
>n yourself. As the curves move toward the left the control points 
> become more spread out horizontally. As it moves towards the rig 
>ht, they become further separated from the end points. The thing  
>to note here is that the curve starts out in the direction of the 
> first control point, and then bends so that it arrives along the 
> direction of the second control point. 
147    </p>
148    <p>147    </p>
149      You can string several Bezier curves to create long smooth 148    <p>
>shapes. Often in this case, the control point on one side of a po 
>int will be a reflection of the control point used on the other s 
>ide (to keep the slope constant). In this case, you can use a sho 
>rtcut version of the cubic Bezier, designated by the command <cod 
>e>S</code> (or <code>s</code>). 
149      你可以将若干个贝塞尔曲线连起来,从而创建出一条很长的平滑曲线。如果将一个点的控制点在它的另一侧建立一个对称点(斜率不变
 >),可以通过一个简写的命令来实现,这个命令是S(或s)。(这段话可以这样理解:S命令前面可以是一条C命令创建的三次贝赛尔曲线,这时
 >候,S命令跟在C命令的后面,就可以用比较简单的参数,生成一个与前面那个相对称的三次贝塞尔曲线。仔细看一下后面的图例,可以帮助理解。
 >另外,S命令也可以跟在S命令后面。)
n155      <code>S</code> produces the same type of curve as earlier, n155      S命令可以用来创建与之前那些曲线一样的贝塞尔曲线,但是,如果S命令跟在一个C命令或者另一个S命令的后面,它的第一个控制
>but if it follows another <code>S</code> command or a <code>C</co>点,就会被假设成前一个控制点的对称点。如果S命令单独使用,前面没有C命令或者另一个S命令,那么它的两个控制点就会被假设为同一个点。
>de> command, the first control point is assumed to be a reflectio>下面是S命令的语法示例,如图所示,左侧的控制点用红色标示,与它对称的控制点用蓝色标示。
>n of the one used previously. If the <code>S</code> command doesn 
>'t follow another <code>S</code> or <code>C</code> command, then  
>it is assumed that both control points for the curve are the same 
>. An example of this syntax is shown below, and in the figure to  
>the left the specified control points are shown in red, and the i 
>nferred control point in blue. 
n167      The other type of Bezier curve that is available is a quadrn167      另一个贝塞尔曲线是二次贝塞尔曲线Q,它比三次贝塞尔曲线简单,只需要一个控制点,用来确定起点和终点的曲线斜率。另外还有两
>atic Bezier, Q. Its actually a simpler curve than the cubic one. >组参数,用来确定起点和终点坐标。
>Basically it only requires one control point, which determines th 
>e slope of the curve at both the start point, and at the end poin 
>t, as such it takes two arguments, the control point and the end  
>point of the curve 
n182      As with the cubic Bezier curve, there is a shortcut for strn182      就像三次贝塞尔曲线有一个S命令,二次贝塞尔曲线有一个差不多的T命令,可以通过更简短的参数,延长二次贝塞尔曲线。
>inging together long sets of them quadratic Beziers, T. 
n188      As before, the shortcut looks at the previous control pointn188      和之前一样,快捷命令T会通过前一个控制点,推断出一个新的控制点。这意味着,在你的第一个控制点后面,可以只定义终点,就创
> you used, and infers a new one from it. This means that after yo>建出一个相当复杂的曲线。需要注意的是,T命令前面必须是一个Q命令,或者是另一个T命令,才能达到这种效果。如果T单独使用,那么控制点
>ur first control point, you can make fairly complex shapes by spe>就会被认为和终点是同一个点,所以画出来的将是一条直线。
>cifying only end points. Note that this only works if the previou 
>s command was a Q or a T command. If it is not, then the control  
>point is assumed to be the same as the previous point, and you'll 
> only draw lines. 
n200      Both curves produce fairly similar results, although the cun200      虽然三次贝塞尔曲线拥有更大的自由度,但是两种曲线能达到的效果总是差不多的。具体使用哪种曲线,通常取决于需求,以及对曲线
>bic allows you greater freedom in exactly what your curve looks l>对称性的依赖程度。
>ike. Deciding which to use often just depends on the situations a 
>nd amount of symmetry your line has. 
n203      Arcsn203      弧形Arcs
n206      The other type of curved line you can create using SVG is tn206      弧形命令A是另一个创建SVG曲线的命令。基本上,弧形可以视为圆形或椭圆形的一部分。假设,已知椭圆形的长轴半径和短轴半径
>he arc, A. Arcs are essentially sections of circles or ellipses. >,另外已知两个点(它们的距离在圆的半径范围内),这时我们会发现,有两个路径可以连接这两个点。每种情况都可以生成出四种弧形。所以,为
>For a given x-radius and y-radius, there are two ellipses that ca>了保证创建的弧形唯一,A命令需要用到比较多的参数:
>n connect any two points (as long as they're within the radius of 
> the circle). Along either of those circles there are two possibl 
>e paths that you can take to connect the points, so in any situat 
>ion there are four possible arcs available. Because of that, arcs 
> have to take in quite a few arguments: 
n213      At its start the arc element takes in two arguments for then213      弧形命令A的前两个参数分别是x轴半径和y轴半径,它们的作用很明显,不用多做解释,如果你不是很清楚它们的作用,可以参考一
> x-radius and y-radius of the arc. Those seem pretty self explana>下椭圆<a href="/en/SVG/Element/ellipse" title="en/SVG/Element/ellips
>tory, but if you need to, look up <a href="/en/SVG/Element/ellips>e">ellipse</a>命令中的相同参数。弧形命令A的第三个参数表示弧形的旋转情况,下面的例子可以很好地解释它:
>e" title="en/SVG/Element/ellipse">ellipses</a> to see how they be 
>have. The third parameter describes the rotation of the arc. This 
> is best explained with an example: 
n230      The example shows a path element that goes diagonally acrosn230      如图例所示,画布上有一条对角线,中间有两个椭圆弧被对角线切开(x radius = 30, y radius = 50
>s the page. In the middle of it, two elliptical arcs have been cu>)。第一个椭圆弧的x-axis-rotation(x轴旋转角度)是0,所以弧形所在的椭圆是正置的(没有倾斜)。在第二个椭圆弧中,x
>t out (x radius = 30, y radius = 50). In the first one, the x-axi>-axis-rotation设置为-45,所以这是一个旋转的椭圆,并以短轴为分割线,形成了两个对称的弧形。参看图示中的第二个椭圆形
>s-rotation has been left at 0, so the ellipse that the arc travel>
>s around (shown in gray), is oriented straight up and down. For t 
>he second arc though, the x-axis-rotation is set to -45 degrees.  
>This rotates the ellipse so that it is aligned with its minor axi 
>s along the path direction, as shown by the second ellipse in the 
> example image. 
231    </p>
232    <p>231    </p>
233      The four different paths mentioned above are determined by 232    <p>
>next two flags in the argument. As mentioned earlier, there are s 
>till two possible ellipses for the path to travel around, and two 
> different possible paths on both those ellipses giving four poss 
>ible paths. The first argument here is the large-arc-sweep-flag.  
>It simply determines if the arc that should be drawn should be gr 
>eater than, or less than 180 degrees, and in the end determines w 
>hich direction the arc will travel around a given circle. The sec 
>ond argument determines if the arc should begin moving at negativ 
>e angles or positive ones, which essentially picks which of the t 
>wo circles you will travel around. The example below shows all fo 
>ur possible combinations, along with the two circles for each cas 
>e. 
233      上面提到的四种不同路径将由接下来的两个参数决定。如前所讲,还有两种可能的椭圆用来形成路径,它们给出的四种可能的路径中,
 >有两种不同的路径。这里要讲的参数是large-arc-flag(角度大小) 和sweep-flag(弧线方向),large-arc
 >-flag决定弧线是大于还是小于180度,0表示小角度弧,1表示大角度弧。sweep-flag表示弧线的方向,0表示从起点到终点沿
 >逆时针画弧,1表示从起点到终点沿顺时针画弧。下面的例子展示了这四种情况。
n256      The final two arguments, if you haven't guessed yet, designn256      你应该已经猜到了,最后两个参数是指定弧形的终点,弧形可以简单地创建圆形或椭圆形图标,比如你可以创建若干片弧形,组成一个
>ate the x and y coordinates to end the stroke at. Arcs are an eas><em>饼图</em>。
>y way to create pieces of circles or ellipses in your drawings. F 
>or instance, a <em>pie chart</em> would require you create a diff 
>erent arc for each piece. 
257    </p>
258    <p>257    </p>
259      If you're transitioning to SVG from <a href="/en/HTML/Canva258    <p>
>s" title="en/HTML/Canvas">Canvas</a>, arcs can be the hardest thi 
>ng to move, but are also much more powerful. Complete circles and 
> ellipses are actually the one object paths have trouble drawing. 
> Because the start and end points for any path going around a cir 
>cle are the same, there are an infinite number of circles that co 
>uld be chosen, and the actual path is undefined. It's possible to 
> approximate them by making the start and end points of your path 
> slightly askew, and then connecting them with another path segme 
>nt. At that point, it's often easier to use a real circle or elli 
>pses node instead. 
259      如果你是从<a href="/en/HTML/Canvas" title="en/HTML/Canvas">Canva
 >s</a>过渡到SVG,那么弧形会比较难以掌握,但它也是非常强大的。用路径来绘制完整的圆或者椭圆是比较困难的,因为圆上的任意点都可
 >以是起点同时也是终点,无数种方案可以选择,真正的路径无法定义。通过绘制连续的路径段落,也可以达到近似的效果,但使用真正的circl
 >e或者ellipse元素会更容易一些。
t265      {{ languages( { "ja": "ja/SVG/Tutorial/Paths"} ) }}t265      {{ languages( { "ja": "ja/SVG/Tutorial/Paths","zh-TW": "zh-
 >TW/SVG/Tutorial/Paths"} ) }}

回到編輯歷史