Rysowanie na płótnie jest bardzo powolne

Sep 13 2020

Chcę wyświetlić skalę z oznaczeniami, która działa dobrze. Oprócz tego chcę również wyświetlić położenie myszy na skali z czerwonym wskaźnikiem.

Tak więc rysuję płótno po uruchomieniu aplikacji, a następnie przerysowuję całe płótno, gdy zmienia się lokalizacja myszy.

Jestem nowy w płótnie i nie rozumiem, co jest nie tak w moim kodzie. Próbowałem go rozwiązać, ale bez powodzenia.

Problem może dotyczyć tej funkcji,

 function drawBlackMarkers(y, coordinateMeasurment){
    const markHightY = scaleTextPadding.initial;
    ctxLeft.moveTo(coordinateMeasurment, y + markHightY);
    ctxLeft.lineTo(completeMarkHight, y + markHightY);
  }

Mam dużą pętlę for, która oznacza tyle iteracji do przejścia iw tej pętli wywołuję funkcję drawBlackMarkers tyle razy, co pokazano poniżej.

function setMarkers(initialValY, rangeValY, coordinateMeasurmentr, divisableVal,
    scaleCountStartValueOfY, scaleCountRangeValueOfY) {
    let count = 0;
    // re-modifying scale staring and ending values based on zoom factor
    const scaleInceremnt = scaleIncementValue;
    for (let y = (initialValY), scaleCountY = scaleCountStartValueOfY;
      y <= (rangeValY) && scaleCountY <= scaleCountRangeValueOfY;
      y += scaleInceremnt, scaleCountY += incrementFactor) {


      switch (count) {
        case displayScale.starting:
          coordinateMeasurment = marktype.bigMark; count++;
          const scaleValY = scaleCountY - divisableVal;

          ctxLeft.strokeStyle = colors.black;

          ctxLeft.font = scaleNumberFont;
          const size = ctxLeft.measureText(scaleValY.toString());
          ctxLeft.save();
          const textX = coordinateMeasurment + ((size.width) / 2);
          const textY = y - scaleTextPadding.alignment;
          ctxLeft.translate(textX, textY);
          ctxLeft.rotate(-Math.PI / 2);
          ctxLeft.translate(-textX, -textY);
          ctxLeft.fillText(scaleValY.toString(), coordinateMeasurment, y - scaleTextPadding.complete);
          ctxLeft.restore();
          break;
        case displayScale.middle:
          coordinateMeasurment = marktype.middleMark; count++;
          break;
        case displayScale.end:
          coordinateMeasurment = marktype.smallMark; count = 0;
          break;
        default:
          coordinateMeasurment = marktype.smallMark; count++;
          break;
      }

      // to draw scale lines on canvas
  // drawBlackMarkers(y, coordinateMeasurment);      
    }
  }

Proszę to sprawdzić : http://jsfiddle.net/3v5nt7fe/1/

Problem polega na tym, że jeśli skomentuję wywołanie funkcji drawBlackMarkers , aktualizacja współrzędnych myszy jest bardzo szybka, ale jeśli odkomentuję, aktualizacja lokalizacji zajmuje tak dużo czasu.

Naprawdę potrzebuję pomocy, aby rozwiązać ten problem.

Odpowiedzi

5 SimonSarris Sep 16 2020 at 12:26

To nie jest drawBlackMarkerssamo, to jest to:

for (let y = (initialValY), scaleCountY = scaleCountStartValueOfY;
  y <= (rangeValY) && scaleCountY <= scaleCountRangeValueOfY;
  y += scaleInceremnt, scaleCountY += incrementFactor) {

To stale rośnie i dzieje się 640 000 razy. Możesz powiedzieć, że tak jest, pisząc:

  // to draw scale lines on canvas
  // drawBlackMarkers(y, coordinateMeasurment);
  console.log(y);

i widząc wynik konsoli.

Więc pętla for robi bardzo niewiele, ponieważ większość z nich znajduje się za instrukcją switch, a kiedy robi to nawet drawBlackMarkerspoza tym, pokazuje prawdziwy koszt tej pętli. rangeValYwynosi 640 000, co oznacza, że ścieżka, którą musi skonstruować kontekst kanwy, jest ogromna.

Aby to naprawić, musisz znaleźć sposób na rozwiązanie tego problemu.

1 speciesUnknown Sep 18 2020 at 20:31

Robi to dużo niepotrzebnej pracy

Ekran nie ma 64000 pikseli wysokości. Chcesz obliczyć rzutnię i narysować tylko to, co jest w rzutni.

Twoja funkcja drawBlackMarkers nie jest winowajcą. Wcześniej system jest bardzo powolny, po prostu dodaje jeszcze jedną rzecz do narysowania. To była słoma, która złamała grzbiet wielbłąda.