跳到主要内容

Konva 调整大小压力测试

这是一个同时选择许多图形并调整其大小的压力测试示例。

此示例使用两项核心 Konva 功能来提高性能：

1. 图层​

正在调整大小的图形会被移动到另一个图层（即另一个 Canvas 元素）。因此，调整所选图形大小时，无需重绘其他图形。

2. 缓存​

发生 select 事件时，我会将所有选中的图形移入一个组，并缓存该组。缓存操作会将该组转换为位图图像。在屏幕上重绘这样的组要快得多。

操作说明：尝试选择多个图形，然后调整其大小或旋转它们。

import Konva from 'konva';

// first we need to create a stage
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
});

// layer for all shapes
var layer = new Konva.Layer();
stage.add(layer);
for (var i = 0; i < 10000; i++) {
  var shape = new Konva.Circle({
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight,
    radius: 10,
    name: 'shape',
    fill: Konva.Util.getRandomColor(),
  });
  layer.add(shape);
}

// top layer for transforming group
var topLayer = new Konva.Layer();
stage.add(topLayer);

var group = new Konva.Group({
  draggable: true,
});
topLayer.add(group);

var tr = new Konva.Transformer();
topLayer.add(tr);

// add a new feature, lets add ability to draw selection rectangle
var selectionRectangle = new Konva.Rect({
  fill: 'rgba(0,0,255,0.5)',
  visible: false,
});
topLayer.add(selectionRectangle);

var x1, y1, x2, y2;
stage.on('mousedown touchstart', (e) => {
  // do nothing if we mousedown on the transformer
  if (e.target.getParent() === tr) {
    return;
  }
  // do nothing if we mousedown on the group
  if (e.target.parent === group) {
    return;
  }
  x1 = stage.getPointerPosition().x;
  y1 = stage.getPointerPosition().y;
  x2 = stage.getPointerPosition().x;
  y2 = stage.getPointerPosition().y;

  selectionRectangle.setAttrs({
    x: x1,
    y: y1,
    width: 0,
    height: 0,
    visible: true,
  });

  // move old selection back to original layer
  group.children.slice().forEach((shape) => {
    const transform = shape.getAbsoluteTransform();
    shape.moveTo(layer);
    shape.setAttrs(transform.decompose());
  });
  // reset group transforms
  group.setAttrs({
    x: 0,
    y: 0,
    scaleX: 1,
    scaleY: 1,
    rotation: 0,
  });
  group.clearCache();
});

stage.on('mousemove touchmove', () => {
  // do nothing if we didn't start selection
  if (!selectionRectangle.visible()) {
    return;
  }
  x2 = stage.getPointerPosition().x;
  y2 = stage.getPointerPosition().y;

  selectionRectangle.setAttrs({
    x: Math.min(x1, x2),
    y: Math.min(y1, y2),
    width: Math.abs(x2 - x1),
    height: Math.abs(y2 - y1),
  });
});

stage.on('mouseup touchend', () => {
  // no nothing if we didn't start selection
  if (!selectionRectangle.visible()) {
    return;
  }
  // update visibility in timeout, so we can check it in click event
  setTimeout(() => {
    selectionRectangle.visible(false);
  });

  var shapes = stage.find('.shape');
  var box = selectionRectangle.getClientRect();

  // remove all children for better performance
  layer.removeChildren();

  // then check intersections and add all shape into correct container
  shapes.forEach((shape) => {
    var intersected = Konva.Util.haveIntersection(
      box,
      shape.getClientRect()
    );
    if (intersected) {
      group.add(shape);
      shape.stroke('blue');
    } else {
      layer.add(shape);
      shape.stroke(null);
    }
  });

  if (group.children.length) {
    tr.nodes([group]);
    group.cache();
  } else {
    tr.nodes([]);
    group.clearCache();
  }
});

// clicks should select/deselect shapes
stage.on('click tap', function (e) {
  // if we are selecting with rect, do nothing
  if (selectionRectangle.visible()) {
    return;
  }

  // if click on empty area - remove all selections
  if (e.target === stage) {
    tr.nodes([]);
    return;
  }
});