跳到主要内容

Rect

new Konva.Rect(config)

Rect 构造函数

参数​

名称类型描述
configObject
cornerRadius（可选）Number
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

自有方法​

cornerRadius(cornerRadius)​

获取／设置圆角半径

参数：

  • cornerRadius（Number）

返回值： Number

示例：

// get corner radius
var cornerRadius = rect.cornerRadius();

// set corner radius
rect.cornerRadius(10);

// set different corner radius values
// top-left, top-right, bottom-right, bottom-left
rect.cornerRadius([0, 10, 20, 30]);

继承的方法​

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

来自 Konva.Shape​

来自 Konva.Node​