Skip to main content

Transformer

new Konva.Transformer(config)

Transformer 构造函数。Transformer 是一种特殊类型的组，允许你变换 Konva 基元和形状。变换工具在调整节点大小时不会更改节点的 width 和 height 属性，而是更改 scaleX 和 scaleY 属性

参数​

NameTypeDescription
configObject
resizeEnabled (optional)Boolean默认为 true
rotateEnabled (optional)Boolean默认为 true
rotateLineVisible (optional)Boolean默认为 true
rotationSnaps (optional)Array用于旋转吸附的角度数组。默认为 []
rotationSnapTolerance (optional)Number吸附容差。如果距离小于此值，则会吸附。默认为 5
rotateAnchorOffset (optional)Number默认为 50
rotateAnchorCursor (optional)String默认为 crosshair
padding (optional)Number默认为 0
borderEnabled (optional)Boolean是否绘制边框？默认为 true
borderStroke (optional)String边框描边颜色
borderStrokeWidth (optional)Number边框描边大小
borderDash (optional)Array边框虚线数组
anchorFill (optional)String锚点填充颜色
anchorStroke (optional)String锚点描边颜色
anchorCornerRadius (optional)String锚点圆角半径
anchorStrokeWidth (optional)Number锚点描边大小
anchorSize (optional)Number默认为 10
keepRatio (optional)Boolean移动边缘时是否保持比例？默认为 true
shiftBehavior (optional)String移动边缘时按下 shift 键，Transformer 应如何响应？默认为 'default'
centeredScaling (optional)Boolean是否相对于节点中心调整大小？默认为 false
enabledAnchors (optional)Array启用的控制柄名称数组
flipEnabled (optional)Boolean变换时是否可以翻转／镜像形状？默认为 true
boundBoxFunc (optional)function边界框函数
ignoreStroke (optional)function是否忽略描边大小？默认为 false
useSingleNodeRotation (optional)Boolean仅附加一个节点时，是否使用该节点的旋转角度作为 Transformer 的旋转角度？
shouldOverdrawWholeArea (optional)Boolean是否用假的透明形状填充整个 Transformer 区域，以便从空白区域开始拖动？

自有方法​

attachTo()​

tr.nodes([shape]) 的别名／此方法已弃用，很快将被移除

返回值： Konva.Transformer

示例：

transformer.attachTo(shape);

getActiveAnchor()​

返回当前活动锚点的名称

返回值： String|Null

示例：

transformer.getActiveAnchor();

detach()​

将 Transformer 从附加的节点上分离

返回值： Konva.Transformer

示例：

transformer.detach();

on(evtStr, handler)​

为 Transformer 绑定事件。你可以使用以下事件：transform、transformstart、transformend、dragstart、dragmove、dragend

参数：

  • evtStr（String）：例如 'transform'
  • handler（function）：处理函数。该函数的第一个参数是事件对象。事件对象包含 target（事件的主要目标）、currentTarget（当前节点监听器）和 evt（原生浏览器事件）

返回值： Konva.Transformer

示例：

// add click listener
tr.on('transformstart', function() {
  console.log('transform started');
});

forceUpdate()​

强制更新 Konva.Transformer。当你更新了附加的 Konva.Group 并需要重置 Transformer 大小时使用

isTransforming()​

确定 Transformer 是否处于活动变换状态

返回值： Boolean

stopTransform()​

停止活动的变换操作

返回值： Boolean

enabledAnchors(array)​

获取／设置启用的控制柄

参数：

  • array（Array）

返回值： Array

示例：

// get list of handlers
var enabledAnchors = transformer.enabledAnchors();

// set handlers
transformer.enabledAnchors(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);

flipEnabled(flag)​

获取／设置是否启用翻转

参数：

  • flag（Boolean）

返回值： Boolean

示例：

// get flip enabled property
var flipEnabled = transformer.flipEnabled();

// set flip enabled property
transformer.flipEnabled(false);

resizeEnabled(enabled)​

获取／设置调整大小功能。如果为 false，将自动隐藏调整大小控制柄

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get
var resizeEnabled = transformer.resizeEnabled();

// set
transformer.resizeEnabled(false);

anchorSize(size)​

获取／设置锚点大小。默认为 10

参数：

  • size（Number）

返回值： Number

示例：

// get
var anchorSize = transformer.anchorSize();

// set
transformer.anchorSize(20)

rotateEnabled(enabled)​

获取／设置旋转功能

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get
var rotateEnabled = transformer.rotateEnabled();

// set
transformer.rotateEnabled(false);

rotateLineVisible(enabled)​

获取／设置连接 Transformer 与旋转锚点的小线条的可见性

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get
var rotateLineVisible = transformer.rotateLineVisible();

// set
transformer.rotateLineVisible(false);

rotationSnaps(array)​

获取／设置旋转吸附角度

参数：

  • array（Array）

返回值： Array

示例：

// get
var rotationSnaps = transformer.rotationSnaps();

// set
transformer.rotationSnaps([0, 90, 180, 270]);

rotateAnchorOffset(offset)​

获取／设置旋转控制柄的距离

参数：

  • offset（Number）

返回值： Number

示例：

// get
var rotateAnchorOffset = transformer.rotateAnchorOffset();

// set
transformer.rotateAnchorOffset(100);

rotateAnchorAngle(angle)​

获取／设置旋转锚点围绕边界框的位置角度（以度为单位）。0 = 顶部中心（默认），90 = 中间右侧，180 = 底部中心，-90 = 中间左侧

参数：

  • angle（Number）

返回值： Number

示例：

// get
var rotateAnchorAngle = transformer.rotateAnchorAngle();

// set rotation anchor to the right side
transformer.rotateAnchorAngle(90);

// set rotation anchor to the bottom
transformer.rotateAnchorAngle(180);

rotateAnchorCursor(cursorName)​

获取／设置旋转锚点光标

参数：

  • cursorName（String）

返回值： String

示例：

// get
var currentRotationAnchorCursor = transformer.rotateAnchorCursor();

// set
transformer.rotateAnchorCursor('grab');

rotationSnapTolerance(tolerance)​

获取／设置旋转容差距离

参数：

  • tolerance（Number）

返回值： Number

示例：

// get
var rotationSnapTolerance = transformer.rotationSnapTolerance();

// set
transformer.rotationSnapTolerance(100);

borderEnabled(enabled)​

获取／设置边框可见性

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get
var borderEnabled = transformer.borderEnabled();

// set
transformer.borderEnabled(false);

anchorStroke(strokeColor)​

获取／设置锚点描边颜色

参数：

  • strokeColor（String）

返回值： String

示例：

// get
var anchorStroke = transformer.anchorStroke();

// set
transformer.anchorStroke('red');

anchorStrokeWidth(anchorStrokeWidth)​

获取／设置锚点描边宽度

参数：

  • anchorStrokeWidth（Number）

返回值： Number

示例：

// get
var anchorStrokeWidth = transformer.anchorStrokeWidth();

// set
transformer.anchorStrokeWidth(3);

anchorFill(anchorFill)​

获取／设置锚点填充颜色

参数：

  • anchorFill（String）

返回值： String

示例：

// get
var anchorFill = transformer.anchorFill();

// set
transformer.anchorFill('red');

anchorCornerRadius(radius)​

获取／设置锚点圆角半径

参数：

  • radius（Number）

返回值： Number

示例：

// get
var anchorCornerRadius = transformer.anchorCornerRadius();

// set
transformer.anchorCornerRadius(3);

borderStroke(enabled)​

获取／设置边框描边颜色

参数：

  • enabled（Boolean）

返回值： Boolean

示例：

// get
var borderStroke = transformer.borderStroke();

// set
transformer.borderStroke('red');

borderStrokeWidth(strokeWidth)​

获取／设置边框描边宽度

参数：

  • strokeWidth（Number）

返回值： Number

示例：

// get
var borderStrokeWidth = transformer.borderStrokeWidth();

// set
transformer.borderStrokeWidth(3);

borderDash(dash)​

获取／设置边框虚线数组

参数：

  • dash（Array）：数组

返回值： Array

示例：

// get
var borderDash = transformer.borderDash();

// set
transformer.borderDash([2, 2]);

keepRatio(keepRatio)​

获取／设置在调整角落锚点大小时是否保持比例

参数：

  • keepRatio（Boolean）

返回值： Boolean

示例：

// get
var keepRatio = transformer.keepRatio();

// set
transformer.keepRatio(false);

shiftBehavior(shiftBehavior)​

获取／设置在调整角落锚点大小时如何响应 shift 键

参数：

  • shiftBehavior（String）

返回值： String

示例：

// get
var shiftBehavior = transformer.shiftBehavior();

// set
transformer.shiftBehavior('none');

centeredScaling(centeredScaling)​

获取／设置是否相对于节点中心调整大小

参数：

  • centeredScaling（Boolean）

返回值： Boolean

示例：

// get
var centeredScaling = transformer.centeredScaling();

// set
transformer.centeredScaling(true);

ignoreStroke(ignoreStroke)​

获取／设置调整大小时是否考虑描边？当形状的 strokeScaleEnabled = false 时适合使用，默认为 false

参数：

  • ignoreStroke（Boolean）

返回值： Boolean

示例：

// get
var ignoreStroke = transformer.ignoreStroke();

// set
transformer.ignoreStroke(true);

padding(padding)​

获取／设置内边距

参数：

  • padding（Number）

返回值： Number

示例：

// get
var padding = transformer.padding();

// set
transformer.padding(10);

nodes()​

获取／设置 Transformer 附加的节点。Transformer 将根据这些节点的大小进行调整，并监听它们的事件

返回值： Konva.Node

示例：

// get
const nodes = transformer.nodes();

// set
transformer.nodes([rect, circle]);

// push new item:
const oldNodes = transformer.nodes();
const newNodes = oldNodes.concat([newShape]);
// it is important to set new array instance (and concat method above will create it)
transformer.nodes(newNodes);

boundBoxFunc(func)​

获取／设置边界框函数。**重要！**boundBondFunc 使用绝对坐标进行操作

参数：

  • func（function）

返回值： function

示例：

// get
var boundBoxFunc = transformer.boundBoxFunc();

// set
transformer.boundBoxFunc(function(oldBox, newBox) {
  // width and height of the boxes are corresponding to total absolute width and height of all nodes combined
  // so it includes scale of the node.
  if (newBox.width > 200) {
    return oldBox;
  }
  return newBox;
});

anchorDragBoundFunc(func)​

获取／设置 Transformer 锚点的拖动函数

参数：

  • func（function）

返回值： function

示例：

// get
var anchorDragBoundFunc = transformer.anchorDragBoundFunc();

// set
transformer.anchorDragBoundFunc(function(oldAbsPos, newAbsPos, event) {
 return {
  x: 0,
  y: newAbsolutePosition.y
 }
});

anchorStyleFunc(func)​

获取／设置 Transformer 锚点的样式函数，用于覆盖默认样式

参数：

  • func（function）

返回值： function

示例：

// get
var anchorStyleFunc = transformer.anchorStyleFunc();

// set
transformer.anchorStyleFunc(function(anchor) {
 // anchor is a simple Konva.Rect instance
 // it will be executed AFTER all attributes are set, like 'anchorStrokeWidth' or 'anchorFill'
 if (anchor.hasName('.rotater')) {
   // make rotater anchor filled black and looks like a circle
   anchor.fill('black');
   anchor.cornerRadius(anchor.width() / 2);
 }
});

shouldOverdrawWholeArea(shouldOverdrawWholeArea)​

使用此设置，可以通过拖动附加节点之间的空白区域来拖动 Transformer 组。shouldOverdrawWholeArea = true 可能会暂时禁用附加节点上的所有事件

参数：

  • shouldOverdrawWholeArea（Boolean）

返回值： Boolean

示例：

// get
var shouldOverdrawWholeArea = transformer.shouldOverdrawWholeArea();

// set
transformer.shouldOverdrawWholeArea(true);

useSingleNodeRotation(useSingleNodeRotation)​

如果 Transformer 仅附加了一个节点，它会将自身的初始旋转角度设置为该节点的旋转角度。在某些情况下，你可能需要设置不同的旋转角度

参数：

  • useSingleNodeRotation（Boolean）

返回值： Boolean

示例：

// set flag to false
transformer.useSingleNodeRotation(false);
// attach a shape
transformer.nodes([shape]);
transformer.rotation(45);
transformer.update();