跳到主要内容

Arrow

new Konva.Arrow(config)

Arrow 构造函数

参数​

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

继承自： Konva.Line

自有方法​

pointerLength(Length)​

获取／设置 pointerLength

参数：

  • Length (Number)：箭头指针的长度。默认值为 10。

返回值： Number

示例：

// get length
var pointerLength = line.pointerLength();

// set length
line.pointerLength(15);

pointerWidth(Width)​

获取／设置 pointerWidth

参数：

  • Width (Number)：箭头指针的宽度。默认值为 10。

返回值： Number

示例：

// get width
var pointerWidth = line.pointerWidth();

// set width
line.pointerWidth(15);

pointerAtBeginning(Should)​

获取／设置 pointerAtBeginning

参数：

  • Should (Number)：是否在箭头起始位置显示指针。默认值为 false。

返回值： Boolean

示例：

// get value
var pointerAtBeginning = line.pointerAtBeginning();

// set value
line.pointerAtBeginning(true);

pointerAtEnding(Should)​

获取／设置 pointerAtEnding

参数：

  • Should (Number)：是否在箭头结束位置显示指针。默认值为 true。

返回值： Boolean

示例：

// get value
var pointerAtEnding = line.pointerAtEnding();

// set value
line.pointerAtEnding(false);

继承的方法​

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

来自 Konva.Line​

来自 Konva.Shape​

来自 Konva.Node​