跳到主要内容

Path

new Konva.Path(config)

路径构造函数。

参数​

名称类型描述
configObject
dataStringSVG 数据字符串
fill (可选)String填充颜色
fillPatternImage (可选)Image填充图案图像
fillPatternX (可选)Number
fillPatternY (可选)Number
fillPatternOffset (可选)Object包含 x 和 y 分量的对象
fillPatternOffsetX (可选)Number
fillPatternOffsetY (可选)Number
fillPatternScale (可选)Object包含 x 和 y 分量的对象
fillPatternScaleX (可选)Number
fillPatternScaleY (可选)Number
fillPatternRotation (可选)Number
fillPatternRepeat (可选)String可以是 "repeat"、"repeat-x"、"repeat-y" 或 "no-repeat"。默认值为 "no-repeat"
fillLinearGradientStartPoint (可选)Object包含 x 和 y 分量的对象
fillLinearGradientStartPointX (可选)Number
fillLinearGradientStartPointY (可选)Number
fillLinearGradientEndPoint (可选)Object包含 x 和 y 分量的对象
fillLinearGradientEndPointX (可选)Number
fillLinearGradientEndPointY (可选)Number
fillLinearGradientColorStops (可选)Array颜色停靠点数组
fillRadialGradientStartPoint (可选)Object包含 x 和 y 分量的对象
fillRadialGradientStartPointX (可选)Number
fillRadialGradientStartPointY (可选)Number
fillRadialGradientEndPoint (可选)Object包含 x 和 y 分量的对象
fillRadialGradientEndPointX (可选)Number
fillRadialGradientEndPointY (可选)Number
fillRadialGradientStartRadius (可选)Number
fillRadialGradientEndRadius (可选)Number
fillRadialGradientColorStops (可选)Array颜色停靠点数组
fillEnabled (可选)Boolean启用或禁用填充的标志。默认值为 true
fillPriority (可选)String可以是 color、linear-gradient、radial-graident 或 pattern。默认值为 color。fillPriority 属性可以非常方便地在不同填充类型之间切换。例如，如果要在填充颜色样式和填充图案样式之间切换，只需设置 fill 属性和 fillPattern 属性，然后使用 setFillPriority('color') 以颜色填充渲染图形，或使用 setFillPriority('pattern') 以图案填充配置渲染图形
stroke (可选)String描边颜色
strokeWidth (可选)Number描边宽度
fillAfterStrokeEnabled (可选)Boolean是否在描边之后绘制填充？默认值为 false。
hitStrokeWidth (可选)Number命中画布上的描边大小。默认值为 "auto"，等于 strokeWidth
strokeHitEnabled (可选)Boolean启用或禁用描边命中区域的标志。默认值为 true
perfectDrawEnabled (可选)Boolean启用或禁用使用缓冲画布的标志。默认值为 true
shadowForStrokeEnabled (可选)Boolean启用或禁用描边阴影的标志。默认值为 true
strokeScaleEnabled (可选)Boolean启用或禁用描边缩放的标志。默认值为 true
strokeEnabled (可选)Boolean启用或禁用描边的标志。默认值为 true
lineJoin (可选)String可以是 miter、round 或 bevel。默认值为 miter
lineCap (可选)String可以是 butt、round 或 square。默认值为 butt
shadowColor (可选)String
shadowBlur (可选)Number
shadowOffset (可选)Object包含 x 和 y 分量的对象
shadowOffsetX (可选)Number
shadowOffsetY (可选)Number
shadowOpacity (可选)Number阴影不透明度。可以是 0 到 1 之间的任意实数
shadowEnabled (可选)Boolean启用或禁用阴影的标志。默认值为 true
dash (可选)Array
dashEnabled (可选)Boolean启用或禁用 dashArray 的标志。默认值为 true
x (可选)Number
y (可选)Number
width (可选)Number
height (可选)Number
visible (可选)Boolean
listening (可选)Boolean节点是否监听事件
id (可选)String唯一 ID
name (可选)String非唯一名称
opacity (可选)Number确定节点不透明度。可以是 0 到 1 之间的任意数值
scale (可选)Object设置缩放
scaleX (可选)Number设置 x 缩放
scaleY (可选)Number设置 y 缩放
rotation (可选)Number以度为单位的旋转角度
offset (可选)Object相对于中心点和旋转点的偏移
offsetX (可选)Number设置 x 偏移
offsetY (可选)Number设置 y 偏移
draggable (可选)Boolean使节点可拖动。当舞台可拖动时，可以通过拖动舞台的任意部分来拖放整个舞台
dragDistance (可选)Number
dragBoundFunc (可选)function

继承自： Konva.Shape

自有方法​

getLength()​

返回路径的长度。

返回值： Number length

示例：

var length = path.getLength();

getPointAtLength(length)​

获取路径上指定长度处的点

参数：

  • length (Number)：长度

返回值： Object point {x,y} point

示例：

var point = path.getPointAtLength(10);

data(data)​

获取／设置 SVG 路径数据字符串。此方法还会自动将数据字符串解析为数据数组。目前支持的 SVG 数据：M、m、L、l、H、h、V、v、Q、q、T、t、C、c、S、s、A、a、Z、z

参数：

  • data (String)：svg 路径字符串

返回值： String

示例：

// get data
var data = path.data();

// set data
path.data('M200,100h100v50z');

继承的方法​

Konva.Path 还拥有其父类的所有方法。下面的每个链接都会打开定义该方法的类中该方法的完整文档。

来自 Konva.Shape​

来自 Konva.Node​