跳到主要内容

Container

new Konva.Container(config)

Container 构造函数。  Container 用于包含节点或其他容器

参数​

名称类型描述
configObject
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* @param {Object} [config.clip] 设置裁剪
clipX (可选)Number设置 X 轴裁剪
clipY (可选)Number设置 Y 轴裁剪
clipWidth (可选)Number设置裁剪宽度
clipHeight (可选)Number设置裁剪高度
clipFunc (可选)function设置裁剪函数

继承自： Konva.Node

自有方法​

getChildren(filterFunc)​

返回直接后代节点数组

参数：

  • filterFunc (function)（可选）：过滤函数

返回： Array

示例：

// get all children
var children = layer.getChildren();

// get only circles
var circles = layer.getChildren(function(node){
   return node.getClassName() === 'Circle';
});

hasChildren()​

确定节点是否有子节点

返回： Boolean

removeChildren()​

移除所有子节点。子节点仍会保留在内存中。如果希望完全销毁所有子节点，请改用 "destroyChildren" 方法

destroyChildren()​

销毁所有子节点。

add(children)​

向容器中添加一个或多个子节点

参数：

  • children (Konva.Node)

返回： Container

示例：

layer.add(rect);
layer.add(shape1, shape2, shape3);
// empty arrays are accepted, though each individual child must be defined
layer.add(...shapes);

find(selector)​

返回与选择器匹配的节点数组。可以提供带有 '#' 的字符串来进行 ID 选择，以及带有 '.' 的字符串来进行名称选择。也可以提供一个函数，在传入节点时返回 true/false。请参阅下面的示例。使用字符串时，还可以按类型或类名进行选择。传递多个选择器时用逗号分隔。

参数：

  • selector (String|function)

返回： Array

示例：

Passing a string as a selector
// select node with id foo
var node = stage.find('#foo');

// select nodes with name bar inside layer
var nodes = layer.find('.bar');

// select all groups inside layer
var nodes = layer.find('Group');

// select all rectangles inside layer
var nodes = layer.find('Rect');

// select node with an id of foo or a name of bar inside layer
var nodes = layer.find('#foo, .bar');

Passing a function as a selector

// get all groups with a function
var groups = stage.find(node => {
 return node.getType() === 'Group';
});

// get only Nodes with partial opacity
var alphaNodes = layer.find(node => {
 return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1;
});

findOne(selector)​

返回 find 方法找到的第一个节点

参数：

  • selector (String|function)

返回： Konva.Node|Undefined

示例：

// select node with id foo
var node = stage.findOne('#foo');

// select node with name bar inside layer
var nodes = layer.findOne('.bar');

// select the first node to return true in a function
var node = stage.findOne(node => {
 return node.getType() === 'Shape'
})

isAncestorOf(node)​

确定节点是否为后代节点的祖先

参数：

  • node (Konva.Node)

getAllIntersections(pos)​

获取与某个点相交的所有图形。注意：由于此方法必须清除临时画布并重绘容器中的每个图形，因此它只应在特殊情况下使用，因为其性能非常差。如果可能，请使用 Konva.Stage#getIntersection 方法，因为其性能好得多，listening 设置为 false 的节点不会被检测到

参数：

  • pos (Object)
  • pos.x (Number)
  • pos.y (Number)

返回： Array 图形数组

clip(clip)​

获取/设置裁剪

参数：

  • clip (Object)
  • clip.x (Number)
  • clip.y (Number)
  • clip.width (Number)
  • clip.height (Number)

返回： Object

示例：

// get clip
var clip = container.clip();

// set clip
container.clip({
  x: 20,
  y: 20,
  width: 20,
  height: 20
});

clipX(x)​

获取/设置 X 轴裁剪

参数：

  • x (Number)

返回： Number

示例：

// get clip x
var clipX = container.clipX();

// set clip x
container.clipX(10);

clipY(y)​

获取/设置 Y 轴裁剪

参数：

  • y (Number)

返回： Number

示例：

// get clip y
var clipY = container.clipY();

// set clip y
container.clipY(10);

clipWidth(width)​

获取/设置裁剪宽度

参数：

  • width (Number)

返回： Number

示例：

// get clip width
var clipWidth = container.clipWidth();

// set clip width
container.clipWidth(100);

clipHeight(height)​

获取/设置裁剪高度

参数：

  • height (Number)

返回： Number

示例：

// get clip height
var clipHeight = container.clipHeight();

// set clip height
container.clipHeight(100);

clipFunc(function)​

获取/设置裁剪函数

参数：

  • function (function)

返回： function

示例：

// get clip function
var clipFunction = container.clipFunc();

// set clip function
container.clipFunc(function(ctx) {
  ctx.rect(0, 0, 100, 100);
});

container.clipFunc(function(ctx) {
  // optionally return a clip Path2D and clip-rule or just the clip-rule
  return [new Path2D('M0 0v50h50Z'), 'evenodd']
});

继承的方法​

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

来自 Konva.Node​