跳到主要内容

线

new Konva.Line(config)

Line 构造函数。线由点数组和张力定义

参数​

名称类型描述
configObject
pointsArray点坐标的扁平数组。应将其定义为 [x1, y1, x2, y2, x3, y3]。
tension（可选）Number值越大，线条越弯曲。值为 0 时不会进行插值。默认值为 0
closed（可选）Boolean定义线条形状是否闭合，从而创建多边形或不规则图形
bezier（可选）Boolean如果未提供 tension 但 bezier=true，则使用传入的点将线条绘制为贝塞尔曲线
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

自有方法​

_eachTensionSegment()​

按绘制顺序报告线条中每个带张力的曲线段。场景函数和边界矩形都通过此方法读取形状，因此它们不会对线条所处的曲线产生不一致的判断。处理函数接收普通数字，因为此方法会在每一帧运行。

closed(closed)​

获取／设置 closed 标志。默认值为 false

参数：

  • closed（Boolean）

返回值： Boolean

示例：

// get closed flag
var closed = line.closed();

// close the shape
line.closed(true);

// open the shape
line.closed(false);

bezier(bezier)​

获取／设置 bezier 标志。默认值为 false

参数：

  • bezier（Boolean）

返回值： Boolean

示例：

// get whether the line is a bezier
var isBezier = line.bezier();

// set whether the line is a bezier
line.bezier(true);

tension(tension)​

获取／设置 tension

参数：

  • tension（Number）：值越大，线条越弯曲。值为 0 时不会进行插值。默认值为 0

返回值： Number

示例：

// get tension
var tension = line.tension();

// set tension
line.tension(3);

points(points)​

获取／设置 points 数组。Points 是一个扁平数组 [x1, y1, x2, y2]。出于性能原因，它采用扁平结构。

参数：

  • points（Array）

返回值： Array

示例：

// get points
var points = line.points();

// set points
line.points([10, 20, 30, 40, 50, 60]);

// push a new point
line.points(line.points().concat([70, 80]));

继承的方法​

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

来自 Konva.Shape​

来自 Konva.Node​