Skip to main content

Layer

new Konva.Layer(config)

Layer 构造函数。Layer 与其自身的 canvas 元素绑定，用于包含组或形状

参数​

名称类型描述
configObject
clearBeforeDraw（可选）Boolean如果不想在每次绘制图层前清除 canvas，请将此属性设置为 false。默认值为 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* @param {Object} [config.clip] 设置裁剪
clipX（可选）Number设置 x 裁剪
clipY（可选）Number设置 y 裁剪
clipWidth（可选）Number设置裁剪宽度
clipHeight（可选）Number设置裁剪高度
clipFunc（可选）function设置裁剪函数

继承自： Konva.Container

自有方法​

getCanvas()​

获取图层 canvas 包装器

getNativeCanvasElement()​

获取原生 canvas 元素

getHitCanvas()​

获取图层 hit canvas

getContext()​

获取图层 canvas 上下文

width()​

获取／设置图层宽度。getter 返回 stage 的宽度。setter 不执行任何操作。如果要更改宽度，请使用 stage.width(value);

返回值： Number

示例：

var width = layer.width();

height()​

获取／设置图层高度。getter 返回 stage 的高度。setter 不执行任何操作。如果要更改高度，请使用 stage.height(value);

返回值： Number

示例：

var height = layer.height();

batchDraw()​

批量绘制。此函数不会立即绘制，而是会安排在下一个 tick（requestAnimFrame）中绘制

返回值： Konva.Layer this

getIntersection(pos)​

获取可见的相交形状。这是确定一个点是否与形状相交的首选方法。你也可以传入可选的 selector 参数，以返回相交形状节点的祖先。listening 设置为 false 的节点不会被检测到

参数：

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

返回值： Konva.Node

示例：

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

enableHitGraph()​

启用 hit graph。已弃用！ 请改用 layer.listening(true)。

返回值： Layer

disableHitGraph()​

禁用 hit graph。已弃用！ 请改用 layer.listening(false)。

返回值： Layer

toggleHitCanvas()​

显示或隐藏 stage 上的 hit canvas。调试自定义 hitFunc 时可能很有用

imageSmoothingEnabled(imageSmoothingEnabled)​

获取／设置 imageSmoothingEnabled 标志。更多信息请参阅 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

参数：

  • imageSmoothingEnabled（Boolean）

返回值： Boolean

示例：

// get imageSmoothingEnabled flag
var imageSmoothingEnabled = layer.imageSmoothingEnabled();

layer.imageSmoothingEnabled(false);

layer.imageSmoothingEnabled(true);

clearBeforeDraw(clearBeforeDraw)​

获取／设置 clearBeforeDraw 标志，该标志用于确定绘制前是否清除图层

参数：

  • clearBeforeDraw（Boolean）

返回值： Boolean

示例：

// get clearBeforeDraw flag
var clearBeforeDraw = layer.clearBeforeDraw();

// disable clear before draw
layer.clearBeforeDraw(false);

// enable clear before draw
layer.clearBeforeDraw(true);

hitGraphEnabled(enabled)​

获取／设置 hitGraphEnabled 标志。已弃用！ 请改用 layer.listening(false)。禁用 hit graph 将大幅提升绘制性能，因为每次绘制图层时都不会重新绘制 hit graph。不过，这也会禁用鼠标／触摸事件检测

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get hitGraphEnabled flag
var hitGraphEnabled = layer.hitGraphEnabled();

// disable hit graph
layer.hitGraphEnabled(false);

// enable hit graph
layer.hitGraphEnabled(true);

继承的方法​

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

来自 Konva.Container​

来自 Konva.Node​