Node

new Konva.Node(config)

Node 构造函数。Node 是可以进行变换、分层并绑定事件的实体。stage、layers、groups 和 shapes 都扩展自 Node。

参数

名称	类型	描述
config	`Object`
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`

自有方法

clearCache()

清除缓存的 canvas

返回值： Konva.Node

示例：

node.clearCache();

cache(config)

缓存节点以提升绘制性能、应用滤镜或创建更准确的命中区域。对于所有基本图形，缓存 canvas 的大小会自动检测。如果需要缓存自定义的 Konva.Shape 实例，则必须传入图形的边界框属性。更多信息请参阅 https://konvajs.org/docs/performance/Shape_Caching.html。

参数：

config（Object）（可选）
config.x（Number）（可选）
config.y（Number）（可选）
config.width（Number）（可选）
config.height（Number）（可选）
config.offset（Number）（可选）：使 canvas 在所有方向上增加 offset 个像素的大小。
config.drawBorder（Boolean）（可选）：设置为 true 时，将在缓存区域周围绘制红色边框，以便调试
config.pixelRatio（Number）（可选）：更改缓存图像的质量（或像素比率）。pixelRatio = 2 将生成大小为 2 倍的缓存。
config.imageSmoothingEnabled（Boolean）（可选）：控制创建的缓存 canvas 的 imageSmoothingEnabled 属性
config.hitCanvasPixelRatio（Number）（可选）：更改缓存命中 canvas 的质量（或像素比率）。

返回值： Konva.Node

示例：

// cache a shape with the x,y position of the bounding box at the center and
// the width and height of the bounding box equal to the width and height of
// the shape obtained from shape.width() and shape.height()
image.cache();

// cache a node and define the bounding box position and size
node.cache({
  x: -30,
  y: -30,
  width: 100,
  height: 200
});

// cache a node and draw a red border around the bounding box
// for debugging purposes
node.cache({
  x: -30,
  y: -30,
  width: 100,
  height: 200,
  offset : 10,
  drawBorder: true
});

isCached()

确定节点当前是否已缓存

返回值： Boolean

getClientRect(config)

返回节点的客户端矩形 {x, y, width, height}。此矩形还包括所有样式（描边、阴影等）。此方法的用途类似于 DOM 的 getBoundingClientRect API。

参数：

config（Object）
config.skipTransform（Boolean）（可选）：计算矩形时是否应对节点应用变换？
config.skipShadow（Boolean）（可选）：计算边界框时是否应对节点应用阴影？
config.skipStroke（Boolean）（可选）：计算边界框时是否应对节点应用描边？
config.relativeTo（Object）（可选）：计算相对于某个父节点的客户端矩形

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

示例：

var rect = new Konva.Rect({
     width : 100,
     height : 100,
     x : 50,
     y : 50,
     strokeWidth : 4,
     stroke : 'black',
     offsetX : 50,
     scaleY : 2
});

// get client rect without think off transformations (position, rotation, scale, offset, etc)
rect.getClientRect({ skipTransform: true});
// returns {
//     x : -2,   // two pixels for stroke / 2
//     y : -2,
//     width : 104, // increased by 4 for stroke
//     height : 104
//}

// get client rect with transformation applied
rect.getClientRect();
// returns Object {x: -2, y: 46, width: 104, height: 208}

off(evtStr)

移除节点上的事件绑定。传入以空格分隔的事件类型字符串，可以一次移除多个事件绑定，例如 'mousedown mouseup mousemove'。包含命名空间时，可以按名称移除事件绑定，例如 'click.foobar'。如果只提供类似 '.foobar' 的名称，则会移除该命名空间中的所有事件。

参数：

evtStr（String）：例如 'click'、'mousedown touchstart'、'.foobar'

返回值： Konva.Node

示例：

// remove listener
node.off('click');

// remove multiple listeners
node.off('click touchstart');

// remove listener by name
node.off('click.foo');

remove()

从父节点中移除节点，但不销毁节点。之后可以重新使用该节点。

返回值： Konva.Node

示例：

node.remove();

destroy()

移除并销毁节点。终止节点并永久删除！调用 destroy() 后不应重新使用该节点。如果节点是容器（Group、Stage 或 Layer），也会销毁所有子节点。

示例：

node.destroy();

getAttr(attr)

获取属性

参数：

attr（String）

返回值： Integer|String|Object|Array

示例：

var x = node.getAttr('x');

getAncestors()

获取祖先节点

返回值： Array

示例：

shape.getAncestors().forEach(function(node) {
  console.log(node.id());
})

getAttrs()

获取属性对象字面量

返回值： Object

setAttrs(config)

使用对象字面量一次设置多个属性

参数：

config（Object）：包含键值对的对象

返回值： Konva.Node

示例：

node.setAttrs({
  x: 5,
  fill: 'red'
});

isListening()

综合考虑祖先节点，确定节点是否监听事件。父节点 | 自身 | isListening listening | listening | ----------+-----------+------------ T | T | T T | F | F F | T | F F | F | F

返回值： Boolean

isVisible()

综合考虑祖先节点，确定节点是否可见。父节点 | 自身 | isVisible visible | visible | ----------+-----------+------------ T | T | T T | F | F F | T | F F | F | F

返回值： Boolean

show()

显示节点。设置 visible = true

返回值： Konva.Node

hide()

隐藏节点。隐藏的节点将不再可检测

返回值： Konva.Node

getAbsoluteZIndex()

获取绝对 z-index，同时考虑兄弟节点和祖先节点的索引

返回值： Integer

getDepth()

获取节点在节点树中的深度。返回一个整数。例如，Stage 的深度始终为 0，Layer 的深度始终为 1，Group 和 Shape 的深度始终大于等于 2

返回值： Integer

getRelativePointerPosition()

获取第一个指针（如鼠标或第一次触摸）相对于当前节点本地坐标的位置

返回值： Konva.Node

示例：

// let's think we have a rectangle at position x = 10, y = 10
// now we clicked at x = 15, y = 15 of the stage
// if you want to know position of the click, related to the rectangle you can use
rect.getRelativePointerPosition();

getAbsolutePosition(Ancestor)

获取节点的绝对位置。该函数可用于计算绝对位置，但位置可以相对于任意祖先节点

参数：

Ancestor（Object）：可选的祖先节点

返回值： Konva.Node

示例：

// returns absolute position relative to top-left corner of canvas
node.getAbsolutePosition();

// calculate absolute position of node, inside stage
// so stage transforms are ignored
node.getAbsolutePosition(stage)

move(change)

将节点相对于当前位置移动指定距离

参数：

change（Object）
change.x（Number）
change.y（Number）

返回值： Konva.Node

示例：

// move node in x direction by 1px and y direction by 2px
node.move({
  x: 1,
  y: 2
});

rotate(theta)

将节点相对于当前旋转角度旋转指定的度数

参数：

theta（Number）

返回值： Konva.Node

moveToTop()

将节点移动到其兄弟节点的最上层

返回值： Boolean

moveUp()

向上移动节点

返回值： Boolean 是否移动的标志

moveDown()

向下移动节点

返回值： Boolean

moveToBottom()

将节点移动到其兄弟节点的最底层

返回值： Boolean

getAbsoluteOpacity()

获取绝对不透明度

返回值： Number

moveTo(newContainer)

将节点移动到另一个容器

参数：

newContainer（Container）

返回值： Konva.Node

示例：

// move node from current layer into layer2
node.moveTo(layer2);

toObject()

将 Node 转换为用于序列化的对象。返回一个对象。

返回值： Object

toJSON()

将 Node 转换为 JSON 字符串。返回一个 JSON 字符串。

返回值： String

getParent()

获取父容器

返回值： Konva.Node

findAncestors(selector, includeSelf, stopNode)

获取节点的所有祖先节点（父节点，然后是父节点的父节点，以此类推）

参数：

selector（String）：用于搜索的选择器
includeSelf（Boolean）（可选）：是否将该节点自身视为祖先节点？
stopNode（Konva.Node）（可选）：需要停止搜索的可选节点（祖先节点之一）

返回值： Array [ancestors]

示例：

// get one of the parent group
var parentGroups = node.findAncestors('Group');

findAncestor(selector, includeSelf, stopNode)

获取与传入选择器匹配的节点祖先（父节点、父节点的父节点等）

参数：

selector（String）：用于搜索的选择器
includeSelf（Boolean）（可选）：是否将该节点自身视为祖先节点？
stopNode（Konva.Node）（可选）：需要停止搜索的可选节点（祖先节点之一）

返回值： Konva.Node ancestor

示例：

// get one of the parent group
var group = node.findAncestors('.mygroup');

getLayer()

获取祖先 Layer

返回值： Konva.Layer

getStage()

获取祖先 Stage

返回值： Konva.Stage

fire(eventType, evt, bubble)

触发事件

参数：

eventType（String）：事件类型。可以是常规事件，如 click、mouseover 或 mouseout，也可以是自定义事件，如 myCustomEvent
evt（Event）（可选）：事件对象
bubble（Boolean）（可选）：将值设置为 false 或留空 undefined，将导致事件不冒泡。将值设置为 true 将导致事件冒泡。

返回值： Konva.Node

示例：

// manually fire click event
node.fire('click');

// fire custom event
node.fire('foo');

// fire custom event with custom event object
node.fire('foo', {
  bar: 10
});

// fire click event that bubbles
node.fire('click', null, true);

getAbsoluteTransform()

获取节点的绝对变换，同时考虑其祖先节点的变换

返回值： Konva.Transform

getAbsoluteScale()

获取节点的绝对缩放，同时考虑其祖先节点的缩放

返回值： Object

示例：

// get absolute scale x
var scaleX = node.getAbsoluteScale().x;

getAbsoluteRotation()

获取节点的绝对旋转，同时考虑其祖先节点的旋转

返回值： Number

示例：

// get absolute rotation
var rotation = node.getAbsoluteRotation();

getTransform()

获取节点的变换

返回值： Konva.Transform

clone(obj)

克隆节点。返回一个具有相同属性的新 Node 实例。也可以使用对象字面量覆盖节点属性，从而将现有节点用作另一个节点的模板

参数：

obj（Object）：覆盖属性

返回值： Konva.Node

示例：

// simple clone
var clone = node.clone();

// clone a node and override the x position
var clone = rect.clone({
  x: 5
});

toCanvas(config)

将节点转换为 canvas 元素。

参数：

config（Object）
config.callback（function）：组合完成时执行的函数
config.x（Number）（可选）：canvas 区域的 x 位置
config.y（Number）（可选）：canvas 区域的 y 位置
config.width（Number）（可选）：canvas 区域的宽度
config.height（Number）（可选）：canvas 区域的高度
config.pixelRatio（Number）（可选）：输出 canvas 的 pixelRatio。默认值为 1。可以使用此属性提高图像质量，例如用于超高质量导出或在 retina（或类似）显示屏上使用。pixelRatio 将用于乘以导出图像的大小。如果以 pixelRatio = 2 导出 500x500 大小，则生成的图像大小将为 1000x1000。
config.imageSmoothingEnabled（Boolean）（可选）：如果希望禁用 imageSmoothing，请将其设置为 false

示例：

var canvas = node.toCanvas();

toDataURL(config)

创建组合数据 URL（base64 字符串）。如果未指定 MIME 类型，则会生成 "image/png"。对于 "image/jpeg"，请将质量级别指定为 quality（范围为 0.0 - 1.0）

参数：

config（Object）
config.mimeType（String）（可选）：可以是 "image/png" 或 "image/jpeg"。"image/png" 是默认值
config.x（Number）（可选）：canvas 区域的 x 位置
config.y（Number）（可选）：canvas 区域的 y 位置
config.width（Number）（可选）：canvas 区域的宽度
config.height（Number）（可选）：canvas 区域的高度
config.quality（Number）（可选）：jpeg 质量。如果使用 "image/jpeg" mimeType，可以指定 0 到 1 之间的质量，其中 0 表示质量非常差，1 表示质量非常高
config.pixelRatio（Number）（可选）：输出图像 URL 的 pixelRatio。默认值为 1。可以使用此属性提高图像质量，例如用于超高质量导出或在 retina（或类似）显示屏上使用。pixelRatio 将用于乘以导出图像的大小。如果以 pixelRatio = 2 导出 500x500 大小，则生成的图像大小将为 1000x1000。
config.imageSmoothingEnabled（Boolean）（可选）：如果希望禁用 imageSmoothing，请将其设置为 false

返回值： String

toImage(config)

将节点转换为图像。由于 toImage 方法是异步的，因此只能从 config 回调或返回的 Promise 中获取结果图像。toImage 最常用于将复杂绘图缓存为图像，这样就不必不断重新绘制

参数：

config（Object）
config.callback（function）（可选）：组合完成时执行的函数
config.mimeType（String）（可选）：可以是 "image/png" 或 "image/jpeg"。"image/png" 是默认值
config.x（Number）（可选）：canvas 区域的 x 位置
config.y（Number）（可选）：canvas 区域的 y 位置
config.width（Number）（可选）：canvas 区域的宽度
config.height（Number）（可选）：canvas 区域的高度
config.quality（Number）（可选）：jpeg 质量。如果使用 "image/jpeg" mimeType，可以指定 0 到 1 之间的质量，其中 0 表示质量非常差，1 表示质量非常高
config.pixelRatio（Number）（可选）：输出图像的 pixelRatio。默认值为 1。可以使用此属性提高图像质量，例如用于超高质量导出或在 retina（或类似）显示屏上使用。pixelRatio 将用于乘以导出图像的大小。如果以 pixelRatio = 2 导出 500x500 大小，则生成的图像大小将为 1000x1000。
config.imageSmoothingEnabled（Boolean）（可选）：如果希望禁用 imageSmoothing，请将其设置为 false

返回值： Promise<Image>

示例：

var image = node.toImage({
  callback(img) {
    // do stuff with img
  }
});

toBlob(config)

将节点转换为 blob。由于 toBlob 方法是异步的，因此只能从 config 回调或返回的 Promise 中获取结果 blob。

参数：

config（Object）
config.callback（function）（可选）：组合完成时执行的函数
config.x（Number）（可选）：canvas 区域的 x 位置
config.y（Number）（可选）：canvas 区域的 y 位置
config.width（Number）（可选）：canvas 区域的宽度
config.height（Number）（可选）：canvas 区域的高度
config.pixelRatio（Number）（可选）：输出 canvas 的 pixelRatio。默认值为 1。可以使用此属性提高图像质量，例如用于超高质量导出或在 retina（或类似）显示屏上使用。pixelRatio 将用于乘以导出图像的大小。如果以 pixelRatio = 2 导出 500x500 大小，则生成的图像大小将为 1000x1000。
config.imageSmoothingEnabled（Boolean）（可选）：如果希望禁用 imageSmoothing，请将其设置为 false

返回值： Promise<Blob>

示例：

var blob = await node.toBlob({});

getClassName()

获取类名，可能返回 Stage、Layer、Group，或 Rect、Circle、Text 等图形类名

返回值： String

getType()

获取节点类型，可能返回 Stage、Layer、Group 或 Shape

返回值： String

addName(name)

向节点添加名称

参数：

name（String）

返回值： Konva.Node

示例：

node.name('red');
node.addName('selected');
node.name(); // return 'red selected'

hasName(name)

检查节点是否具有名称

参数：

name（String）

返回值： Boolean

示例：

node.name('red');
node.hasName('red');   // return true
node.hasName('selected'); // return false
node.hasName(''); // return false

removeName(name)

从节点移除名称

参数：

name（String）

返回值： Konva.Node

示例：

node.name('red selected');
node.removeName('selected');
node.hasName('selected'); // return false
node.name(); // return 'red'

setAttr(attr, val)

设置属性

参数：

attr（String）
val（*）

返回值： Konva.Node

示例：

node.setAttr('x', 5);

draw()

绘制场景图和命中图。如果正在绘制的节点是 stage，则会清除并重绘所有 layer

返回值： Konva.Node

startDrag()

开始拖放。

stopDrag()

停止拖放

isDragging()

确定节点当前是否处于拖放模式

isClientRectOnScreen(margin)

确定节点（至少部分）当前是否位于用户可见区域内

参数：

margin（Number|Object）：以像素为单位的可选边距
margin.x（Number）
margin.y（Number）

返回值： Boolean

示例：

// get index
// default calculations
var isOnScreen = node.isClientRectOnScreen()
// increase object size (or screen size) for cases when objects close to the screen still need to be marked as "visible"
var isOnScreen = node.isClientRectOnScreen({ x: stage.width(), y: stage.height() })

Node.create(json, container)

使用 JSON 字符串或对象创建节点。反序列化不会生成自定义图形绘制函数、图像或事件处理程序（否则会使序列化对象变得非常庞大）。如果应用使用自定义图形、图像和事件处理程序（很可能会使用），则需要在加载 stage 后选择相应的图形，并通过 on()、setSceneFunc() 和 setImage() 方法设置这些属性

参数：

json（String|Object）：字符串或对象
container（Element）（可选）：仅在创建 stage 节点时使用的可选容器 dom 元素

zIndex(index)

获取或设置相对于共享同一父节点的兄弟节点的 zIndex。请记住，zIndex 并不是绝对值（如 CSS 中那样），它只相对于父元素。

参数：

index（Number）

返回值： Number

示例：

// get index
var index = node.zIndex();

// set index
node.zIndex(2);

absolutePosition(pos)

获取或设置节点的绝对位置

参数：

pos（Object）
pos.x（Number）
pos.y（Number）

返回值： Object

示例：

// get position
var position = node.absolutePosition();

// set position
node.absolutePosition({
  x: 5,
  y: 10
});

position(pos)

获取或设置相对于父节点的节点位置

参数：

pos（Object）
pos.x（Number）
pos.y（Number）

返回值： Object

示例：

// get position
var position = node.position();

// set position
node.position({
  x: 5,
  y: 10
});

x(x)

获取或设置 x 位置

参数：

x（Number）

返回值： Object

示例：

// get x
var x = node.x();

// set x
node.x(5);

y(y)

获取或设置 y 位置

参数：

y（Number）

返回值： Integer

示例：

// get y
var y = node.y();

// set y
node.y(5);

globalCompositeOperation(type)

获取或设置节点的 globalCompositeOperation。globalCompositeOperation 不会影响节点的命中图。因此，它们仍会触发事件，因为它们使用默认的 "source-over" globalCompositeOperation。

参数：

type（String）

返回值： String

示例：

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

// set globalCompositeOperation
shape.globalCompositeOperation('source-in');

opacity(opacity)

获取或设置不透明度。不透明度值范围为 0 到 1。不透明度为 0 的节点完全透明，不透明度为 1 的节点完全不透明

参数：

opacity（Object）

返回值： Number

示例：

// get opacity
var opacity = node.opacity();

// set opacity
node.opacity(0.5);

name(name)

获取或设置名称。

参数：

name（String）

返回值： String

示例：

// get name
var name = node.name();

// set name
node.name('foo');

// also node may have multiple names (as css classes)
node.name('foo bar');

id(id)

获取或设置 id。Id 对整个页面是全局唯一的。

参数：

id（String）

返回值： String

示例：

// get id
var name = node.id();

// set id
node.id('foo');

rotation(rotation)

获取或设置以度为单位的旋转角度

参数：

rotation（Number）

返回值： Number

示例：

// get rotation in degrees
var rotation = node.rotation();

// set rotation in degrees
node.rotation(45);

scale(scale)

获取或设置缩放

参数：

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

返回值： Object

示例：

// get scale
var scale = node.scale();

// set scale
shape.scale({
  x: 2,
  y: 3
});

scaleX(x)

获取或设置 x 轴缩放

参数：

x（Number）

返回值： Number

示例：

// get scale x
var scaleX = node.scaleX();

// set scale x
node.scaleX(2);

scaleY(y)

获取或设置 y 轴缩放

参数：

y（Number）

返回值： Number

示例：

// get scale y
var scaleY = node.scaleY();

// set scale y
node.scaleY(2);

skew(skew)

获取或设置倾斜

参数：

skew（Object）
skew.x（Number）
skew.y（Number）

返回值： Object

示例：

// get skew
var skew = node.skew();

// set skew
node.skew({
  x: 20,
  y: 10
});

skewX(x)

获取或设置 x 轴倾斜

参数：

x（Number）

返回值： Number

示例：

// get skew x
var skewX = node.skewX();

// set skew x
node.skewX(3);

skewY(y)

获取或设置 y 轴倾斜

参数：

y（Number）

返回值： Number

示例：

// get skew y
var skewY = node.skewY();

// set skew y
node.skewY(3);

offsetX(x)

获取或设置 x 轴偏移

参数：

x（Number）

返回值： Number

示例：

// get offset x
var offsetX = node.offsetX();

// set offset x
node.offsetX(3);

offsetY(y)

获取或设置 y 轴偏移

参数：

y（Number）

返回值： Number

示例：

// get offset y
var offsetY = node.offsetY();

// set offset y
node.offsetY(3);

dragDistance(distance)

获取或设置拖动距离

参数：

distance（Number）

返回值： Number

示例：

// get drag distance
var dragDistance = node.dragDistance();

// set distance
// node starts dragging only if pointer moved more then 3 pixels
node.dragDistance(3);
// or set globally
Konva.dragDistance = 3;

width(width)

获取或设置宽度

参数：

width（Number）

返回值： Number

示例：

// get width
var width = node.width();

// set width
node.width(100);

height(height)

获取或设置高度

参数：

height（Number）

返回值： Number

示例：

// get height
var height = node.height();

// set height
node.height(100);

listening(listening)

获取或设置 listening 属性。如果需要综合考虑父节点来确定节点是否监听事件，请使用 isListening() 方法。将 listening 设置为 false 的节点不会在命中图中被检测到，因此会在 container.getIntersection() 方法中被忽略

参数：

listening（Boolean）：可以是 true 或 false。默认值为 true。

返回值： Boolean

示例：

// get listening attr
var listening = node.listening();

// stop listening for events, remove node and all its children from hit graph
node.listening(false);

// listen to events according to the parent
node.listening(true);

preventDefault(preventDefault)

获取或设置 preventDefault。默认情况下，所有图形都会阻止浏览器在指针移动或点击时的默认行为。这会在尝试拖放节点时阻止原生滚动，但有时可能需要启用默认操作，此时可以将该属性设置为 false

参数：

preventDefault（Boolean）

返回值： Boolean

示例：

// get preventDefault
var shouldPrevent = shape.preventDefault();

// set preventDefault
shape.preventDefault(false);

filters(filters)

获取或设置滤镜。支持函数滤镜、CSS 滤镜字符串或混合数组。CSS 滤镜在可能的情况下使用原生浏览器性能应用，函数滤镜使用 ImageData 操作。CSS 滤镜在不受支持的浏览器中会自动回退到函数滤镜。

参数：

filters（Array）：滤镜函数和／或 CSS 滤镜字符串的数组

返回值： Array

示例：

// get filters
var filters = node.filters();

// set CSS filters only (no caching required, uses native performance)
node.filters(['blur(5px)', 'brightness(1.2)', 'contrast(1.5)']);

// set function filters only (caching required)
node.cache();
node.filters([Konva.Filters.Blur, Konva.Filters.Sepia, Konva.Filters.Invert]);

// mix CSS and function filters (caching required, uses fallback strategy)
node.cache();
node.filters([
  'blur(3px)',           // CSS filter
  Konva.Filters.Invert,  // function filter
  'brightness(1.5)'      // CSS filter
]);

visible(visible)

获取或设置 visible 属性。可以是 true 或 false。默认值为 true。如果需要综合考虑父节点来确定节点是否可见，请使用 isVisible() 方法

参数：

visible（Boolean）

返回值： Boolean

示例：

// get visible attr
var visible = node.visible();

// make invisible
node.visible(false);

// make visible (according to the parent)
node.visible(true);

transformsEnabled(enabled)

获取或设置启用的变换。可以是 "all"、"none" 或 "position"。默认值为 "all"

参数：

enabled（String）

返回值： String

示例：

// enable position transform only to improve draw performance
node.transformsEnabled('position');

// enable all transforms
node.transformsEnabled('all');

size(size)

获取或设置节点大小

参数：

size（Object）
size.width（Number）
size.height（Number）

返回值： Object

示例：

// get node size
var size = node.size();
var width = size.width;
var height = size.height;

// set size
node.size({
  width: 100,
  height: 200
});

dragBoundFunc(dragBoundFunc)

获取或设置拖动边界函数。用于覆盖默认的拖放位置。

参数：

dragBoundFunc（function）

返回值： function

示例：

// get drag bound function
var dragBoundFunc = node.dragBoundFunc();

// create vertical drag and drop
node.dragBoundFunc(function(pos){
  // important pos - is absolute position of the node
  // you should return absolute position too
  return {
    x: this.absolutePosition().x,
    y: pos.y
  };
});

draggable(draggable)

获取或设置可拖动标志

参数：

draggable（Boolean）

返回值： Boolean

示例：

// get draggable flag
var draggable = node.draggable();

// enable drag and drop
node.draggable(true);

// disable drag and drop
node.draggable(false);

to(params)

补间节点属性。Konva.Tween 对象的简写用法。

参数：

params（Object）（可选）：补间参数

示例：

circle.to({
  x : 50,
  duration : 0.5,
  onUpdate: () => console.log('props updated'),
  onFinish: () => console.log('finished'),
});

blurRadius(radius)

获取或设置模糊半径。与 Konva.Filters.Blur 滤镜一起使用

参数：

radius（Integer）

返回值： Integer

brightness(brightness)

获取或设置滤镜亮度。亮度是 -1 到 1 之间的数字。正值会使像素变亮，负值会使像素变暗。与 Konva.Filters.Brighten 滤镜一起使用。

参数：

brightness（Number）：-1 到 1 之间的值

返回值： Number

contrast(contrast)

获取或设置滤镜对比度。对比度是 -100 到 100 之间的数字。与 Konva.Filters.Contrast 滤镜一起使用。

参数：

contrast（Number）：-100 到 100 之间的值

返回值： Number

embossStrength(level)

获取或设置浮雕强度。与 Konva.Filters.Emboss 滤镜一起使用。

参数：

level（Number）：介于 0 和 1 之间。默认值为 0.5

返回值： Number

embossWhiteLevel(embossWhiteLevel)

获取或设置浮雕白色级别。与 Konva.Filters.Emboss 滤镜一起使用。

参数：

embossWhiteLevel（Number）：介于 0 和 1 之间。默认值为 0.5

返回值： Number

embossDirection(embossDirection)

获取或设置浮雕方向。与 Konva.Filters.Emboss 滤镜一起使用。

参数：

embossDirection（String）：可以是 top-left、top、top-right、right、bottom-right、bottom、bottom-left 或 left。默认值为 top-left

返回值： String

embossBlend(embossBlend)

获取或设置浮雕混合。与 Konva.Filters.Emboss 滤镜一起使用。

参数：

embossBlend（Boolean）

返回值： Boolean

enhance(amount)

获取或设置增强。与 Konva.Filters.Enhance 滤镜一起使用。值范围为 -1 到 1

参数：

amount（Float）

返回值： Float

hue(hue)

获取或设置以度为单位的 hsv 色相。与 Konva.Filters.HSV 或 Konva.Filters.HSL 滤镜一起使用。

参数：

hue（Number）：0 到 359 之间的值

返回值： Number

saturation(saturation)

获取或设置 hsv 饱和度。与 Konva.Filters.HSV 或 Konva.Filters.HSL 滤镜一起使用。

参数：

saturation（Number）：0 表示不变，-1.0 表示饱和度减半，1.0 表示加倍，依此类推..

返回值： Number

luminance(value)

获取或设置 hsl 亮度。与 Konva.Filters.HSL 滤镜一起使用。

参数：

value（Number）：范围为 -1 到 1

返回值： Number

hue(hue)

获取或设置以度为单位的 hsv 色相。与 Konva.Filters.HSV 或 Konva.Filters.HSL 滤镜一起使用。

参数：

hue（Number）：0 到 359 之间的值

返回值： Number

saturation(saturation)

获取或设置 hsv 饱和度。与 Konva.Filters.HSV 或 Konva.Filters.HSL 滤镜一起使用。

参数：

saturation（Number）：0 表示不变，-1.0 表示饱和度减半，1.0 表示加倍，依此类推..

返回值： Number

value(value)

获取或设置 hsv 值。与 Konva.Filters.HSV 滤镜一起使用。

参数：

value（Number）：0 表示不变，-1.0 表示值减半，1.0 表示加倍，依此类推..

返回值： Number

kaleidoscopePower(power)

获取或设置万花筒强度。与 Konva.Filters.Kaleidoscope 滤镜一起使用。

参数：

power（Integer）：万花筒强度

返回值： Integer

kaleidoscopeAngle(degrees)

获取或设置万花筒角度。与 Konva.Filters.Kaleidoscope 滤镜一起使用。

参数：

degrees（Integer）

返回值： Integer

noise(noise)

获取或设置噪声量。必须是 0 到 1 之间的值。与 Konva.Filters.Noise 滤镜一起使用。

参数：

noise（Number）

返回值： Number

pixelSize(pixelSize)

获取或设置像素大小。与 Konva.Filters.Pixelate 滤镜一起使用。

参数：

pixelSize（Integer）

返回值： Integer

levels(level)

获取或设置级别。必须是 0 到 1 之间的数字。与 Konva.Filters.Posterize 滤镜一起使用。

参数：

level（Number）：介于 0 和 1 之间

返回值： Number

red(red)

获取或设置滤镜红色值。与 Konva.Filters.RGB 滤镜一起使用。

参数：

red（Integer）：0 到 255 之间的值

返回值： Integer

green(green)

获取或设置滤镜绿色值。与 Konva.Filters.RGB 滤镜一起使用。

参数：

green（Integer）：0 到 255 之间的值

返回值： Integer

blue(blue)

获取或设置滤镜蓝色值。与 Konva.Filters.RGB 滤镜一起使用。

参数：

blue（Integer）：0 到 255 之间的值

返回值： Integer

red(red)

获取或设置滤镜红色值。与 Konva.Filters.RGBA 滤镜一起使用。

参数：

red（Integer）：0 到 255 之间的值

返回值： Integer

green(green)

获取或设置滤镜绿色值。与 Konva.Filters.RGBA 滤镜一起使用。

参数：

green（Integer）：0 到 255 之间的值

返回值： Integer

blue(blue)

获取/设置滤镜 blue 值。与 Konva.Filters.RGBA 滤镜一起使用。

参数：

blue（Integer）：介于 0 和 255 之间的值

返回值： Integer

alpha(alpha)

获取/设置滤镜 alpha 值。与 Konva.Filters.RGBA 滤镜一起使用。

参数：

alpha（Float）：介于 0 和 1 之间的值

返回值： Float

threshold(threshold)

获取/设置 threshold。必须是介于 0 和 1 之间的值。与 Konva.Filters.Threshold 或 Konva.Filters.Mask 滤镜一起使用。

参数：

threshold（Number）

返回值： Number

参数​

自有方法​

clearCache()​

cache(config)​

isCached()​

getClientRect(config)​

off(evtStr)​

remove()​

destroy()​

getAttr(attr)​

getAncestors()​

getAttrs()​

setAttrs(config)​

isListening()​

isVisible()​

show()​

hide()​

getAbsoluteZIndex()​

getDepth()​

getRelativePointerPosition()​

getAbsolutePosition(Ancestor)​

move(change)​

rotate(theta)​

moveToTop()​

moveUp()​

moveDown()​

moveToBottom()​

getAbsoluteOpacity()​

moveTo(newContainer)​

toObject()​

toJSON()​

getParent()​

findAncestors(selector, includeSelf, stopNode)​

findAncestor(selector, includeSelf, stopNode)​

getLayer()​

getStage()​

fire(eventType, evt, bubble)​

getAbsoluteTransform()​

getAbsoluteScale()​

getAbsoluteRotation()​

getTransform()​

clone(obj)​

toCanvas(config)​

toDataURL(config)​

toImage(config)​

toBlob(config)​

getClassName()​

getType()​

addName(name)​

hasName(name)​

removeName(name)​

setAttr(attr, val)​

draw()​

startDrag()​

stopDrag()​

isDragging()​

isClientRectOnScreen(margin)​

Node.create(json, container)​

zIndex(index)​

absolutePosition(pos)​

position(pos)​

x(x)​

y(y)​

globalCompositeOperation(type)​

opacity(opacity)​

name(name)​

id(id)​

rotation(rotation)​

scale(scale)​

scaleX(x)​

scaleY(y)​

skew(skew)​

skewX(x)​

skewY(y)​

offsetX(x)​

offsetY(y)​

dragDistance(distance)​

width(width)​

height(height)​

listening(listening)​

参数

自有方法

clearCache()

cache(config)

isCached()

getClientRect(config)

off(evtStr)

remove()

destroy()

getAttr(attr)

getAncestors()

getAttrs()

setAttrs(config)

isListening()

isVisible()

show()

hide()

getAbsoluteZIndex()

getDepth()

getRelativePointerPosition()

getAbsolutePosition(Ancestor)

move(change)

rotate(theta)

moveToTop()

moveUp()

moveDown()

moveToBottom()

getAbsoluteOpacity()

moveTo(newContainer)

toObject()

toJSON()

getParent()

findAncestors(selector, includeSelf, stopNode)

findAncestor(selector, includeSelf, stopNode)

getLayer()

getStage()

fire(eventType, evt, bubble)

getAbsoluteTransform()

getAbsoluteScale()

getAbsoluteRotation()

getTransform()

clone(obj)

toCanvas(config)

toDataURL(config)

toImage(config)

toBlob(config)

getClassName()

getType()

addName(name)

hasName(name)

removeName(name)

setAttr(attr, val)

draw()

startDrag()

stopDrag()

isDragging()

isClientRectOnScreen(margin)

Node.create(json, container)

zIndex(index)

absolutePosition(pos)

position(pos)

x(x)

y(y)

globalCompositeOperation(type)

opacity(opacity)

name(name)

id(id)

rotation(rotation)

scale(scale)

scaleX(x)

scaleY(y)

skew(skew)

skewX(x)

skewY(y)

offsetX(x)

offsetY(y)

dragDistance(distance)

width(width)

height(height)

listening(listening)