跳到主要内容

Shape

new Konva.Shape(config)

Shape 构造函数。Shape 是矩形、圆形、文本、线条等基本对象

参数​

名称类型描述
configObject
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') 以颜色填充渲染 Shape，或使用 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使节点可拖动。当 stage 可拖动时，可以通过拖动 stage 的任意部分来拖放整个 stage
dragDistance（可选）Number
dragBoundFunc（可选）function

继承自： Konva.Node

自有方法​

getContext()​

getCanvas()​

hasShadow()​

返回是否会渲染阴影

返回值： Boolean

hasFill()​

返回 Shape 是否会填充

返回值： Boolean

hasStroke()​

返回 Shape 是否会描边

返回值： Boolean

intersects(point)​

确定点是否位于 Shape 中，而不考虑其他 Shape 是否位于其上方。注意：由于此方法会清除临时画布，然后重新绘制 Shape，因此如果连续执行多次，性能会非常差。如果可能，请使用 Konva.Stage#getIntersection 方法，因为它的性能要好得多

参数：

  • point（Object）
  • point.x（Number）
  • point.y（Number）

返回值： Boolean

getSelfRect()​

返回 Shape 的自身矩形（x、y、width、height）。此方法不会考虑变换和样式

返回值： Object 包含 {x, y, width, height} 属性的矩形

示例：

rect.getSelfRect();  // return {x:0, y:0, width:rect.width(), height:rect.height()}
circle.getSelfRect();  // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}

drawHitFromCache(alphaThreshold)​

使用缓存的场景画布绘制命中图

参数：

  • alphaThreshold（Integer）：用于确定是否应将像素绘制到命中图上的 alpha 通道阈值。必须是 0 到 255 之间的值。默认值为 0

返回值： Konva.Shape

示例：

shape.cache();
shape.drawHitFromCache();

stroke(color)​

获取或设置描边颜色

参数：

  • color（String）

返回值： String

示例：

// get stroke color
var stroke = shape.stroke();

// set stroke color with color string
shape.stroke('green');

// set stroke color with hex
shape.stroke('#00ff00');

// set stroke color with rgb
shape.stroke('rgb(0,255,0)');

// set stroke color with rgba and make it 50% opaque
shape.stroke('rgba(0,255,0,0.5');

strokeWidth(strokeWidth)​

获取或设置描边宽度

参数：

  • strokeWidth（Number）

返回值： Number

示例：

// get stroke width
var strokeWidth = shape.strokeWidth();

// set stroke width
shape.strokeWidth(10);

fillAfterStrokeEnabled(fillAfterStrokeEnabled)​

获取或设置 fillAfterStrokeEnabled 属性。默认情况下，Konva 先绘制填充，然后在填充上方绘制描边。在少数情况下，你可能需要不同的行为，即先绘制描边，然后在其上方绘制填充。对 Text 对象尤其有用。默认值为 false

参数：

  • fillAfterStrokeEnabled（Boolean）

返回值： Boolean

示例：

// get stroke width
var fillAfterStrokeEnabled = shape.fillAfterStrokeEnabled();

// set stroke width
shape.fillAfterStrokeEnabled(true);

hitStrokeWidth(hitStrokeWidth)​

获取或设置用于命中检测的描边宽度。默认值为 "auto"，表示其值等于 strokeWidth

参数：

  • hitStrokeWidth（Number）

返回值： Number

示例：

// get stroke width
var hitStrokeWidth = shape.hitStrokeWidth();

// set hit stroke width
shape.hitStrokeWidth(20);
// set hit stroke width always equals to scene stroke width
shape.hitStrokeWidth('auto');

strokeHitEnabled(strokeHitEnabled)​

已弃用，请改用 hitStrokeWidth！ 获取或设置 strokeHitEnabled 属性。可用于性能优化。你可以设置 shape.strokeHitEnabled(false)。在这种情况下，描边不会绘制到命中画布上，因此 Shape 的命中区域会缩小（缩小 lineWidth / 2）。请记住，当 strokeHitEnabled = false 时，未闭合的线不会绘制到命中画布上，这意味着该线不会触发指针事件（例如 mouseover）。默认值为 true

参数：

  • strokeHitEnabled（Boolean）

返回值： Boolean

示例：

// get strokeHitEnabled
var strokeHitEnabled = shape.strokeHitEnabled();

// set strokeHitEnabled
shape.strokeHitEnabled();

perfectDrawEnabled(perfectDrawEnabled)​

获取或设置 perfectDrawEnabled。如果 Shape 同时具有填充、描边和不透明度，可以将 perfectDrawEnabled 设置为 false 以提升性能。有关更多信息，请参阅 http://konvajs.org/docs/performance/Disable_Perfect_Draw.html。默认值为 true

参数：

  • perfectDrawEnabled（Boolean）

返回值： Boolean

示例：

// get perfectDrawEnabled
var perfectDrawEnabled = shape.perfectDrawEnabled();

// set perfectDrawEnabled
shape.perfectDrawEnabled();

shadowForStrokeEnabled(shadowForStrokeEnabled)​

获取或设置 shadowForStrokeEnabled。可用于性能优化。你可以设置 shape.shadowForStrokeEnabled(false)。在这种情况下，描边不会产生阴影。请记住，如果将未闭合线的 shadowForStrokeEnabled = false，该线将没有阴影！默认值为 true

参数：

  • shadowForStrokeEnabled（Boolean）

返回值： Boolean

示例：

// get shadowForStrokeEnabled
var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();

// set shadowForStrokeEnabled
shape.shadowForStrokeEnabled();

lineJoin(lineJoin)​

获取或设置线连接样式。可以是 miter、round 或 bevel。默认值为 miter

参数：

  • lineJoin（String）

返回值： String

示例：

// get line join
var lineJoin = shape.lineJoin();

// set line join
shape.lineJoin('round');

lineCap(lineCap)​

获取或设置线帽样式。可以是 butt、round 或 square

参数：

  • lineCap（String）

返回值： String

示例：

// get line cap
var lineCap = shape.lineCap();

// set line cap
shape.lineCap('round');

miterLimit(miterLimit)​

获取或设置 miterLimit

参数：

  • miterLimit（Number）

返回值： Number

示例：

// get miter limit
var miterLimit = shape.miterLimit();

// set miter limit
shape.miterLimit(10);

sceneFunc(drawFunc)​

获取或设置场景绘制函数。该函数用于在画布上绘制 Shape。如果未定义 hitFunc，该函数也会用于绘制 Shape 的命中区域

参数：

  • drawFunc（function）：绘制函数

返回值： function

示例：

// get scene draw function
var sceneFunc = shape.sceneFunc();

// set scene draw function
shape.sceneFunc(function(context, shape) {
  context.beginPath();
  context.rect(0, 0, shape.width(), shape.height());
  context.closePath();
  // important Konva method that fill and stroke shape from its properties
  // like stroke and fill
  context.fillStrokeShape(shape);
});

hitFunc(drawFunc)​

获取或设置命中绘制函数。该函数用于绘制 Shape 的自定义命中区域

参数：

  • drawFunc（function）：绘制函数

返回值： function

示例：

// get hit draw function
var hitFunc = shape.hitFunc();

// set hit draw function
shape.hitFunc(function(context) {
  context.beginPath();
  context.rect(0, 0, shape.width(), shape.height());
  context.closePath();
  // important Konva method that fill and stroke shape from its properties
  context.fillStrokeShape(shape);
});

dash(dash)​

获取或设置描边的虚线数组

参数：

  • dash（Array）

返回值： Array

示例：

// apply dashed stroke that is 10px long and 5 pixels apart
 line.dash([10, 5]);
 // apply dashed stroke that is made up of alternating dashed
 // lines that are 10px long and 20px apart, and dots that have
 // a radius of 5px and are 20px apart
 line.dash([10, 20, 0.001, 20]);

dash(dash)​

获取或设置描边的虚线偏移量

参数：

  • dash（Number）：偏移量

返回值： Number

示例：

// apply dashed stroke that is 10px long and 5 pixels apart with an offset of 5px
 line.dash([10, 5]);
 line.dashOffset(5);

shadowColor(color)​

获取或设置阴影颜色

参数：

  • color（String）

返回值： String

示例：

// get shadow color
var shadow = shape.shadowColor();

// set shadow color with color string
shape.shadowColor('green');

// set shadow color with hex
shape.shadowColor('#00ff00');

// set shadow color with rgb
shape.shadowColor('rgb(0,255,0)');

// set shadow color with rgba and make it 50% opaque
shape.shadowColor('rgba(0,255,0,0.5');

shadowBlur(blur)​

获取或设置阴影模糊度

参数：

  • blur（Number）

返回值： Number

示例：

// get shadow blur
var shadowBlur = shape.shadowBlur();

// set shadow blur
shape.shadowBlur(10);

shadowOpacity(opacity)​

获取或设置阴影不透明度。必须是 0 到 1 之间的值

参数：

  • opacity（Number）

返回值： Number

示例：

// get shadow opacity
var shadowOpacity = shape.shadowOpacity();

// set shadow opacity
shape.shadowOpacity(0.5);

shadowOffset(offset)​

获取或设置阴影偏移量

参数：

  • offset（Object）
  • offset.x（Number）
  • offset.y（Number）

返回值： Object

示例：

// get shadow offset
var shadowOffset = shape.shadowOffset();

// set shadow offset
shape.shadowOffset({
  x: 20,
  y: 10
});

shadowOffsetX(x)​

获取或设置阴影 x 偏移量

参数：

  • x（Number）

返回值： Number

示例：

// get shadow offset x
var shadowOffsetX = shape.shadowOffsetX();

// set shadow offset x
shape.shadowOffsetX(5);

shadowOffsetY(y)​

获取或设置阴影 y 偏移量

参数：

  • y（Number）

返回值： Number

示例：

// get shadow offset y
var shadowOffsetY = shape.shadowOffsetY();

// set shadow offset y
shape.shadowOffsetY(5);

fillPatternImage(image)​

获取或设置填充图案图像

参数：

  • image（Image）：对象

返回值： Image

示例：

// get fill pattern image
var fillPatternImage = shape.fillPatternImage();

// set fill pattern image
var imageObj = new Image();
imageObj.onload = function() {
  shape.fillPatternImage(imageObj);
};
imageObj.src = 'path/to/image/jpg';

fill(color)​

获取或设置填充颜色

参数：

  • color（String）

返回值： String

示例：

// get fill color
var fill = shape.fill();

// set fill color with color string
shape.fill('green');

// set fill color with hex
shape.fill('#00ff00');

// set fill color with rgb
shape.fill('rgb(0,255,0)');

// set fill color with rgba and make it 50% opaque
shape.fill('rgba(0,255,0,0.5');

// shape without fill
shape.fill(null);

fillPatternX(x)​

获取或设置填充图案 x 坐标

参数：

  • x（Number）

返回值： Number

示例：

// get fill pattern x
var fillPatternX = shape.fillPatternX();
// set fill pattern x
shape.fillPatternX(20);

fillPatternY(y)​

获取或设置填充图案 y 坐标

参数：

  • y（Number）

返回值： Number

示例：

// get fill pattern y
var fillPatternY = shape.fillPatternY();
// set fill pattern y
shape.fillPatternY(20);

fillLinearGradientColorStops(colorStops)​

获取或设置填充线性渐变颜色停止点

参数：

  • colorStops（Array）

返回值： Array colorStops

示例：

// get fill linear gradient color stops
var colorStops = shape.fillLinearGradientColorStops();

// create a linear gradient that starts with red, changes to blue
// halfway through, and then changes to green
shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');

strokeLinearGradientColorStops(colorStops)​

获取或设置描边线性渐变颜色停止点

参数：

  • colorStops（Array）

返回值： Array colorStops

示例：

// get stroke linear gradient color stops
var colorStops = shape.strokeLinearGradientColorStops();

// create a linear gradient that starts with red, changes to blue
// halfway through, and then changes to green
shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);

fillRadialGradientStartRadius(radius)​

获取或设置填充径向渐变起始半径

参数：

  • radius（Number）

返回值： Number

示例：

// get radial gradient start radius
var startRadius = shape.fillRadialGradientStartRadius();

// set radial gradient start radius
shape.fillRadialGradientStartRadius(0);

fillRadialGradientEndRadius(radius)​

获取或设置填充径向渐变结束半径

参数：

  • radius（Number）

返回值： Number

示例：

// get radial gradient end radius
var endRadius = shape.fillRadialGradientEndRadius();

// set radial gradient end radius
shape.fillRadialGradientEndRadius(100);

fillRadialGradientColorStops(colorStops)​

获取或设置填充径向渐变颜色停止点

参数：

  • colorStops（Number）

返回值： Array

示例：

// get fill radial gradient color stops
var colorStops = shape.fillRadialGradientColorStops();

// create a radial gradient that starts with red, changes to blue
// halfway through, and then changes to green
shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');

fillPatternRepeat(repeat)​

获取或设置填充图案重复方式。可以是 'repeat'、'repeat-x'、'repeat-y' 或 'no-repeat'。默认值为 'repeat'

参数：

  • repeat（String）

返回值： String

示例：

// get fill pattern repeat
var repeat = shape.fillPatternRepeat();

// repeat pattern in x direction only
shape.fillPatternRepeat('repeat-x');

// do not repeat the pattern
shape.fillPatternRepeat('no-repeat');

fillEnabled(enabled)​

获取或设置填充启用标志

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get fill enabled flag
var fillEnabled = shape.fillEnabled();

// disable fill
shape.fillEnabled(false);

// enable fill
shape.fillEnabled(true);

strokeEnabled(enabled)​

获取或设置描边启用标志

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get stroke enabled flag
var strokeEnabled = shape.strokeEnabled();

// disable stroke
shape.strokeEnabled(false);

// enable stroke
shape.strokeEnabled(true);

shadowEnabled(enabled)​

获取或设置阴影启用标志

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get shadow enabled flag
var shadowEnabled = shape.shadowEnabled();

// disable shadow
shape.shadowEnabled(false);

// enable shadow
shape.shadowEnabled(true);

dashEnabled(enabled)​

获取或设置虚线启用标志

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get dash enabled flag
var dashEnabled = shape.dashEnabled();

// disable dash
shape.dashEnabled(false);

// enable dash
shape.dashEnabled(true);

strokeScaleEnabled(enabled)​

获取或设置描边缩放启用标志

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get stroke scale enabled flag
var strokeScaleEnabled = shape.strokeScaleEnabled();

// disable stroke scale
shape.strokeScaleEnabled(false);

// enable stroke scale
shape.strokeScaleEnabled(true);

fillPriority(priority)​

获取或设置填充优先级。可以是 color、pattern、linear-gradient 或 radial-gradient。默认值为 color。当你想在不同填充类型之间切换时，此方法非常方便

参数：

  • priority（String）

返回值： String

示例：

// get fill priority
var fillPriority = shape.fillPriority();

// set fill priority
shape.fillPriority('linear-gradient');

fillPatternOffset(offset)​

获取或设置填充图案偏移量

参数：

  • offset（Object）
  • offset.x（Number）
  • offset.y（Number）

返回值： Object

示例：

// get fill pattern offset
var patternOffset = shape.fillPatternOffset();

// set fill pattern offset
shape.fillPatternOffset({
  x: 20,
  y: 10
});

fillPatternOffsetX(x)​

获取或设置填充图案 x 偏移量

参数：

  • x（Number）

返回值： Number

示例：

// get fill pattern offset x
var patternOffsetX = shape.fillPatternOffsetX();

// set fill pattern offset x
shape.fillPatternOffsetX(20);

fillPatternOffsetY(y)​

获取或设置填充图案 y 偏移量

参数：

  • y（Number）

返回值： Number

示例：

// get fill pattern offset y
var patternOffsetY = shape.fillPatternOffsetY();

// set fill pattern offset y
shape.fillPatternOffsetY(10);

fillPatternScale(scale)​

获取或设置填充图案缩放

参数：

  • scale（Object）
  • scale.x（Number）
  • scale.y（Number）

返回值： Object

示例：

// get fill pattern scale
var patternScale = shape.fillPatternScale();

// set fill pattern scale
shape.fillPatternScale({
  x: 2,
  y: 2
});

fillPatternScaleX(x)​

获取或设置填充图案 x 缩放

参数：

  • x（Number）

返回值： Number

示例：

// get fill pattern scale x
var patternScaleX = shape.fillPatternScaleX();

// set fill pattern scale x
shape.fillPatternScaleX(2);

fillPatternScaleY(y)​

获取或设置填充图案 y 缩放

参数：

  • y（Number）

返回值： Number

示例：

// get fill pattern scale y
var patternScaleY = shape.fillPatternScaleY();

// set fill pattern scale y
shape.fillPatternScaleY(2);

fillLinearGradientStartPoint(startPoint)​

获取或设置填充线性渐变起始点

参数：

  • startPoint（Object）
  • startPoint.x（Number）
  • startPoint.y（Number）

返回值： Object

示例：

// get fill linear gradient start point
var startPoint = shape.fillLinearGradientStartPoint();

// set fill linear gradient start point
shape.fillLinearGradientStartPoint({
  x: 20,
  y: 10
});

strokeLinearGradientStartPoint(startPoint)​

获取或设置描边线性渐变起始点

参数：

  • startPoint（Object）
  • startPoint.x（Number）
  • startPoint.y（Number）

返回值： Object

示例：

// get stroke linear gradient start point
var startPoint = shape.strokeLinearGradientStartPoint();

// set stroke linear gradient start point
shape.strokeLinearGradientStartPoint({
  x: 20,
  y: 10
});

fillLinearGradientStartPointX(x)​

获取或设置填充线性渐变起始点 x 坐标

参数：

  • x（Number）

返回值： Number

示例：

// get fill linear gradient start point x
var startPointX = shape.fillLinearGradientStartPointX();

// set fill linear gradient start point x
shape.fillLinearGradientStartPointX(20);

linearLinearGradientStartPointX(x)​

获取或设置描边线性渐变起始点 x 坐标

参数：

  • x（Number）

返回值： Number

示例：

// get stroke linear gradient start point x
var startPointX = shape.strokeLinearGradientStartPointX();

// set stroke linear gradient start point x
shape.strokeLinearGradientStartPointX(20);

fillLinearGradientStartPointY(y)​

获取或设置填充线性渐变起始点 y 坐标

参数：

  • y（Number）

返回值： Number

示例：

// get fill linear gradient start point y
var startPointY = shape.fillLinearGradientStartPointY();

// set fill linear gradient start point y
shape.fillLinearGradientStartPointY(20);

strokeLinearGradientStartPointY(y)​

获取或设置描边线性渐变起始点 y 坐标

参数：

  • y（Number）

返回值： Number

示例：

// get stroke linear gradient start point y
var startPointY = shape.strokeLinearGradientStartPointY();

// set stroke linear gradient start point y
shape.strokeLinearGradientStartPointY(20);

fillLinearGradientEndPoint(endPoint)​

获取或设置填充线性渐变结束点

参数：

  • endPoint（Object）
  • endPoint.x（Number）
  • endPoint.y（Number）

返回值： Object

示例：

// get fill linear gradient end point
var endPoint = shape.fillLinearGradientEndPoint();

// set fill linear gradient end point
shape.fillLinearGradientEndPoint({
  x: 20,
  y: 10
});

strokeLinearGradientEndPoint(endPoint)​

获取或设置描边线性渐变结束点

参数：

  • endPoint（Object）
  • endPoint.x（Number）
  • endPoint.y（Number）

返回值： Object

示例：

// get stroke linear gradient end point
var endPoint = shape.strokeLinearGradientEndPoint();

// set stroke linear gradient end point
shape.strokeLinearGradientEndPoint({
  x: 20,
  y: 10
});

fillLinearGradientEndPointX(x)​

获取或设置填充线性渐变结束点 x 坐标

参数：

  • x（Number）

返回值： Number

示例：

// get fill linear gradient end point x
var endPointX = shape.fillLinearGradientEndPointX();

// set fill linear gradient end point x
shape.fillLinearGradientEndPointX(20);

strokeLinearGradientEndPointX(x)​

获取或设置填充线性渐变结束点 x 坐标

参数：

  • x（Number）

返回值： Number

示例：

// get stroke linear gradient end point x
var endPointX = shape.strokeLinearGradientEndPointX();

// set stroke linear gradient end point x
shape.strokeLinearGradientEndPointX(20);

fillLinearGradientEndPointY(y)​

获取或设置填充线性渐变结束点 y 坐标

参数：

  • y（Number）

返回值： Number

示例：

// get fill linear gradient end point y
var endPointY = shape.fillLinearGradientEndPointY();

// set fill linear gradient end point y
shape.fillLinearGradientEndPointY(20);

strokeLinearGradientEndPointY(y)​

获取或设置描边线性渐变结束点 y 坐标

参数：

  • y（Number）

返回值： Number

示例：

// get stroke linear gradient end point y
var endPointY = shape.strokeLinearGradientEndPointY();

// set stroke linear gradient end point y
shape.strokeLinearGradientEndPointY(20);

fillRadialGradientStartPoint(startPoint)​

获取或设置填充径向渐变起始点

参数：

  • startPoint（Object）
  • startPoint.x（Number）
  • startPoint.y（Number）

返回值： Object

示例：

// get fill radial gradient start point
var startPoint = shape.fillRadialGradientStartPoint();

// set fill radial gradient start point
shape.fillRadialGradientStartPoint({
  x: 20,
  y: 10
});

fillRadialGradientStartPointX(x)​

获取或设置填充径向渐变起始点 x 坐标

参数：

  • x（Number）

返回值： Number

示例：

// get fill radial gradient start point x
var startPointX = shape.fillRadialGradientStartPointX();

// set fill radial gradient start point x
shape.fillRadialGradientStartPointX(20);

fillRadialGradientStartPointY(y)​

获取或设置填充径向渐变起始点 y 坐标

参数：

  • y（Number）

返回值： Number

示例：

// get fill radial gradient start point y
var startPointY = shape.fillRadialGradientStartPointY();

// set fill radial gradient start point y
shape.fillRadialGradientStartPointY(20);

fillRadialGradientEndPoint(endPoint)​

获取或设置填充径向渐变结束点

参数：

  • endPoint（Object）
  • endPoint.x（Number）
  • endPoint.y（Number）

返回值： Object

示例：

// get fill radial gradient end point
var endPoint = shape.fillRadialGradientEndPoint();

// set fill radial gradient end point
shape.fillRadialGradientEndPoint({
  x: 20,
  y: 10
});

fillRadialGradientEndPointX(x)​

获取或设置填充径向渐变结束点 x 坐标

参数：

  • x（Number）

返回值： Number

示例：

// get fill radial gradient end point x
var endPointX = shape.fillRadialGradientEndPointX();

// set fill radial gradient end point x
shape.fillRadialGradientEndPointX(20);

fillRadialGradientEndPointY(y)​

获取或设置填充径向渐变结束点 y 坐标

参数：

  • y（Number）

返回值： Number

示例：

// get fill radial gradient end point y
var endPointY = shape.fillRadialGradientEndPointY();

// set fill radial gradient end point y
shape.fillRadialGradientEndPointY(20);

fillPatternRotation(rotation)​

获取或设置填充图案旋转角度

参数：

  • rotation（Number）

返回值： Konva.Shape

示例：

// get fill pattern rotation
var patternRotation = shape.fillPatternRotation();

// set fill pattern rotation
shape.fillPatternRotation(20);

fillRule(rotation)​

获取或设置填充规则

参数：

  • rotation（CanvasFillRule）

返回值： Konva.Shape

示例：

// get fill rule
var fillRule = shape.fillRule();

// set fill rule
shape.fillRule('evenodd');

继承的方法​

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

来自 Konva.Node​