跳到主要内容

Stage

new Konva.Stage(config)

Stage 构造函数。Stage 用于包含多个图层

参数​

名称类型描述
configObject
containerString|Element容器选择器或 DOM 元素
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.Container

自有方法​

setContainer(container)​

设置包含 Stage 包装器 div 元素的容器 DOM 元素

参数：

  • container (DomElement)：可以传入 DOM 元素或 id 字符串

clear()​

清除所有图层

getPointerPosition()​

返回绝对指针位置，该位置可以是触摸位置或鼠标位置。指针位置不包含 Stage 的任何变换（例如缩放），它只是相对于画布左上角的普通指针位置

返回： Vector2d|null

getIntersection(pos)​

获取可见的相交图形。这是确定某个点是否与图形相交的首选方法。将 listening 设置为 false 的节点不会被检测到

参数：

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

返回： Konva.Node

示例：

var shape = stage.getIntersection({x: 50, y: 50});

getLayers()​

返回图层数组

setPointersPositions(event)​

手动在 Stage 中注册指针位置（鼠标／触摸）。这样你就可以使用 stage.getPointerPosition()。通常不需要使用此方法，因为所有内部事件都会自动注册。如果事件在 Stage 外部触发，但你仍想使用 Konva 方法获取指针位置，此方法可能会很有用

参数：

  • event (Object)：事件对象

示例：

window.addEventListener('mousemove', (e) => {
  stage.setPointersPositions(e);
});

batchDraw()​

批量绘制

返回： Konva.Stage this

container()​

获取／设置容器 DOM 元素

返回： DomElement container

示例：

// 获取容器
var container = stage.container();
// 设置容器
var container = document.createElement('div');
body.appendChild(container);
stage.container(container);

继承的方法​

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

来自 Konva.Container​

来自 Konva.Node​