- SVGPath
- path.width <number>
- path.height <number>
- path.start(relativeToLayer)
- path.end(relativeToLayer)
- path.pointAtFraction(fraction)
- path.rotationAtFraction(fraction, delta)
- path.fill <string>
- path.stroke <string>
- path.strokeWidth <number>
- path.strokeStart <number>
- path.strokeEnd <number>
- path.strokeLength <number>
- path.strokeFraction <number>
- path.strokeLinecap <string>
- path.strokeLinejoin <string>
- path.strokeMiterlimit <number>
- path.strokeOpacity <number>
- path.strokeDasharray <array>
- path.strokeDashoffset <number>
SVGPath
使用 SVGPath
来调节设计模式下画的 SVG 路径的 fill
、strokeStart
、strokeEnd
等属性,并给它添加动画。
Use SVGPath to modify and animate SVG paths targeted from Design. Set fill, strokeStart, strokeEnd and more.
在代码模式中不能创建 SVGPath ,我们一般使用 SVGLayer 并通过获取它的 elements
属性来获取 SVGPath 。
An SVGPath should not be created in code. The only way to get an SVGPath is through the elements property of SVGLayer
svg = new SVGLayer
svg: "<svg><path id='shape' name='Rectangle' d='M0 0 H 150 V 75 H 0 L 0 0' />"
fill: "#0AF"
path = svg.elements.shape
图层可以沿着一个 SVG 路径运动,下面的例子演示了一个图层沿着一个 SVG 路径的位置和角度运动。
Layers can also be animated along a path, in combination with the point and rotation property, for example.
layer = new Layer
size: 100
layer.midPoint = path.start
layer.animate
point: path
rotation: path
# Shorthand for doing all of the above steps
layer.animate
path: path
path.length <number>
路径长度。(只读)
The length of the path. (Read-only)
print path.length
# Output: 450
path.width <number>
路径宽度。(只读)
The width of the path. (Read-only)
print path.width
# Output: 150
path.height <number>
路径高度。(只读) The height of the path. (Read-only)
print path.height
# Output: 75
path.start(relativeToLayer)
返回路径的起始位置坐标和角度。如果你传入了一个图层作为参数,那么返回的坐标就是以这个图层为参考系,否则的话以其父图层作为参考系。
Returns the location and rotation of the start of the path. Pass a layer as final argument to get the coordinates for that layer. If no layer is passed, the coordinates will be for the current context.
print path.start()
# {x:0, y:0, rotation:90}
# Shorthand to set the location of a layer to the start of the path
layer.point = path.start
path.end(relativeToLayer)
返回路径的结束位置坐标和角度。如果你传入了一个图层作为参数,那么返回的坐标就是以这个图层为参考系,否则的话以其父图层作为参考系。
Returns the location and rotation of the end of the path. Pass a layer as final argument to get the coordinates in that layer. If no layer is passed, the coordinates will be for the current context.
print path.end()
# {x:0, y:0, rotation:0}
# Shorthand to set the location of a layer to the end of the path
layer.point = path.end
path.pointAtFraction(fraction)
获取路径对应比例( 0 到 1 )长度处的坐标,该坐标是相对于这个路径的。
Get the location of a point along a fraction (value from 0 to 1) of the path, relative to the position of the path.
point = path.pointAtFraction(0.5)
print point.x, point.y
# Output: 150, 75
path.rotationAtFraction(fraction, delta)
路径线条对应比例( 0 到 1 )处的角度,另一个可选参数是计算角度的偏差。
Get the angle of the line at a fraction (value from 0 to 1) of the path. The optional second argument is the offset used to calculate the angle.
print path.rotationAtFraction(0.5)
# Output: -90
path.fill <string>
设置路径填充色。
Sets the fill color of the path.
path.fill = "#FFF"
path.stroke <string>
设置路径的描边颜色。
Sets the stroke color of the path.
path.stroke = "#0AF"
path.strokeWidth <number>
设置路径的描边宽度。
Sets the stroke width of the path.
path.strokeWidth = 10
path.strokeStart <number>
设置路径的描边起始点。
Set the start position of where to draw the stroke on the path.
# Only stroke the last half of the path
path.strokeStart = path.length / 2
path.strokeEnd <number>
设置路径的描边结束点。
Set the end position of where to stop drawing the stroke on the path.
# Only stroke the first half of the path
path.strokeEnd = path.length / 2
path.strokeLength <number>
设置路径的描边长度。
Set the length of the stroke of the path.
path.strokeLength = 200
path.strokeFraction <number>
设置路径的描边长度比例,是 strokeLength
的一种简写。
Set the stroke length to a fraction of the total length of the path. Shorthand for strokeLength.
# Set the stroke length to half of the total length
# Same as path.strokeLength = path.length / 2
path.strokeFraction = 0.5
path.strokeLinecap <string>
设置描边的两端样式。
Set the line-cap of the stroke.
你可以选择 butt
、round
、square
中的一个。
You can choose between butt, round and square.
# Multiple types of line caps
shape.strokeLinecap = "butt"
shape.strokeLinecap = "round"
shape.strokeLinecap = "square"
path.strokeLinejoin <string>
设置描边的拐角样式。
Set the line-join of the stroke.
你可以选择 miter
、round
、bevel
中的一个。
You can choose between miter, round and bevel.
# Multiple types of line joins
shape.strokeLinejoin = "miter"
shape.strokeLinejoin = "round"
shape.strokeLinejoin = "bevel"
path.strokeMiterlimit <number>
设置斜切限制,只在 strokeLinejoin
是 miter
时起作用。
Set the miter limit of the stroke. Only works when strokeLinejoin is set to miter.
star.strokeMiterlimit = 1
path.strokeOpacity <number>
设置描边不透明度,它的值是从 0 到 1 ,0 表示不可见,1 表示完全可见。
Sets the stroke opacity. Opacity is defined with a number between 0 and 1, where 0 is invisible and 1 fully opaque.
path.opacity = 0.5
path.strokeDasharray <array>
给描边设置更加精细的虚线图案,可以看MDN 的示例了解更多细节。
Sets the stroke to have a certain pattern. See MDN’s examples for more details.
path.strokeDasharray = [5, 5, 10, 10]
path.strokeDashoffset <number>
设置虚线间隔宽度,当你想做虚线动画时很有用。
The offset of the dash-pattern set by strokeDasharray. Useful for animating a dashed pattern.
path.stroke = "#000"
path.strokeDasharray = [10, 10]
path.animate
strokeDashoffset: path.length