跳到主要内容

Sprite

new Konva.Sprite(config)

Sprite 构造函数

参数​

名称类型描述
configObject
animationString动画键
animationsObject动画映射
frameIndex（可选）Integer动画帧索引
imageImage图像对象
frameRate（可选）Integer动画帧速率
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

自有方法​

start()​

启动 Sprite 动画

stop()​

停止 Sprite 动画

isRunning()​

确定 Sprite 的动画是否正在运行。返回 true 或 false

返回值： Boolean

animation(anim)​

获取／设置动画键

参数：

  • anim（String）：动画键

返回值： String

示例：

// get animation key
var animation = sprite.animation();

// set animation key
sprite.animation('kicking');

animations(animations)​

获取／设置动画映射

参数：

  • animations（Object）

返回值： Object

示例：

// get animations map
var animations = sprite.animations();

// set animations map
sprite.animations({
  standing: [
    // x, y, width, height (6 frames)
    0, 0, 49, 109,
    52, 0, 49, 109,
    105, 0, 49, 109,
    158, 0, 49, 109,
    210, 0, 49, 109,
    262, 0, 49, 109
  ],
  kicking: [
    // x, y, width, height (6 frames)
    0, 109, 45, 98,
    45, 109, 45, 98,
    95, 109, 63, 98,
    156, 109, 70, 98,
    229, 109, 60, 98,
    287, 109, 41, 98
  ]
});

offsets(offsets)​

获取／设置偏移映射

参数：

  • offsets（Object）

返回值： Object

示例：

// get offsets map
var offsets = sprite.offsets();

// set offsets map
sprite.offsets({
  standing: [
    // x, y (6 frames)
    0, 0,
    0, 0,
    5, 0,
    0, 0,
    0, 3,
    2, 0
  ],
  kicking: [
    // x, y (6 frames)
    0, 5,
    5, 0,
    10, 0,
    0, 0,
    2, 1,
    0, 0
  ]
});

image(image)​

获取／设置图像

参数：

  • image（Image）

返回值： Image

示例：

// get image
var image = sprite.image();

// set image
sprite.image(imageObj);

frameIndex(frameIndex)​

设置／设置动画帧索引

参数：

  • frameIndex（Integer）

返回值： Integer

示例：

// get animation frame index
var frameIndex = sprite.frameIndex();

// set animation frame index
sprite.frameIndex(3);

frameRate(frameRate)​

获取／设置每秒帧数。增大此数值可以使 Sprite 动画运行得更快，减小此数值可以使 Sprite 动画运行得更慢。默认值为每秒 17 帧

参数：

  • frameRate（Integer）

返回值： Integer

示例：

// get frame rate
var frameRate = sprite.frameRate();

// set frame rate to 2 frames per second
sprite.frameRate(2);

继承的方法​

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

来自 Konva.Shape​

来自 Konva.Node​