У многих объектов проблемы с производительностью. - PullRequest
Новая
       18

У многих объектов проблемы с производительностью.

0 голосов
/ 01 апреля 2019

С konvajs у меня возникают проблемы при рендеринге многих объектов, более 1000. Я уже попробовал все упомянутые выше советы по производительности, но кадры кажутся немного медленными.Затем я сделал это базовое сравнение, и у меня есть эти цифры.Должен ли я перенести мой код в fabricjs?Улучшения и предложения приветствуются!Я взял этот код и немного подправил: https://github.com/jonobr1/two.js/issues/237

(function() {
  fabric.Object.prototype.transparentCorners = false;
  // this.__canvases = [];

  //
  // General parameters\
  //
  const objectsNumber = 1000;
  const objectsRadius = 15;
  const canvasWidth = 390;
  const canvasHeight = 390;
  var i, dot, circle,
    t1, t2,
    // only to have
    startTimer = function() {
      t1 = new Date().getTime();
      return t1;
    },
    stopTimer = function() {
      t2 = new Date().getTime();
      return t2 - t1;
    },
    // getRandomInt = fabric.util.getRandomInt,
    rainbow = ["#ffcc66", "#ccff66", "#66ccff", "#ff6fcf", "#ff6666"],
    rainbowEnd = rainbow.length - 1;

  //
  // Rendering canvas #1 twojs
  //
  var elem = document.getElementById('c1');

  var two = new Two({
    width: 390,
    height: 390
  }).appendTo(elem);
  results1 = document.getElementById('results-c1');
  startTimer();
  for (i = 1000; i >= 0; i--) {
    circle = two.makeCircle(Math.floor(Math.random() * 400) + 0, Math.floor(Math.random() * 350) + 0, objectsRadius);
    circle.fill = rainbow[Math.floor(Math.random() * rainbowEnd) + 0];
    circle.noStroke();
    circle.opacity = 0.75;
  }
  two.update();
  results1.innerHTML = 'Twojs rendering of 1000 elements in ' + stopTimer() + 'ms';


  //
  // Rendering canvas #2
  //
  var canvas2 = new fabric.Canvas('c2', {
    backgroundColor: "white",
    renderOnAddRemove: false
  });
  canvas2.setHeight(390);
  canvas2.setWidth(390);
  var results2 = document.getElementById('results-c2');
  startTimer();
  for (i = 1000; i >= 0; i--) {
    dot = new fabric.Circle({
      left: Math.floor(Math.random() * 400) + 0,
      top: Math.floor(Math.random() * 350) + 0,
      radius: objectsRadius,
      fill: rainbow[Math.floor(Math.random() * rainbowEnd) + 0],
      objectCaching: false,
      opacity: 0.75
    });
    canvas2.add(dot);
  }
  canvas2.renderAll(); // Note, calling renderAll() is important in this case
  results2.innerHTML = 'Fabricjs rendering 1000 elements using canvas.renderOnAddRemove = false and objectCaching = false in ' + stopTimer() + 'ms';
  // this.__canvases.push(canvas2);

  //
  // Rendering canvas #3 konvajs
  //

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

  var layer = new Konva.Layer();
  results3 = document.getElementById('results-c3');
  startTimer();
  for (i = 1000; i >= 0; i--) {
    var kcircle = new Konva.Circle({
      x: Math.floor(Math.random() * 400) + 0,
      y: Math.floor(Math.random() * 350) + 0,
      radius: objectsRadius,
      fill: rainbow[Math.floor(Math.random() * rainbowEnd) + 0],
      draggable: true,
      opacity: 0.75
    });
    layer.add(kcircle);
  }
  stage.add(layer);
  results3.innerHTML = 'Konvajs rendering of 1000 elements in ' + stopTimer() + 'ms';

})();
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/3.2.3/konva.min.js"></script>
<div class="row">
  <div id="results-c1" class=" col-lg-4"></div>
  <div id="results-c2" class=" col-lg-4"></div>
  <div id="results-c3" class=" col-lg-4"></div>
</div>
<div class="row">
  <div id="c1" class=" col-lg-4"></div>
  <canvas id="c2" class=" col-lg-4" width="390" height="390"></canvas>
  <div id="c3" class=" col-lg-4"></div>
</div>
...