title: 使用 Konva 的调整大小压力测试
layout: demo_page

这是一个压力测试演示，可以同时选择和调整多个形状的大小。

该演示使用了两个核心的 Konva 特性来提升性能：

1. 图层

调整大小的形状被移动到另一个图层（另一个 canvas 元素）。因此，在调整所选形状大小时，我们不需要重绘其他形状。

2. 缓存

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

说明：尝试选择几个形状并调整它们的大小/旋转它们。

Konva Resizing Stress Test Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Resizing stress test Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      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)',
      });
      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;
        }
      });
    </script>
  </body>
</html>