Vẽ canvas rất chậm

Sep 13 2020

Tôi muốn hiển thị tỷ lệ với các dấu hiệu đang hoạt động tốt. Trên hết, tôi cũng muốn hiển thị vị trí chuột trong thang đo với chỉ báo màu đỏ.

Vì vậy, tôi vẽ canvas khi chạy ứng dụng và sau đó tôi vẽ lại toàn bộ canvas khi vị trí chuột bị thay đổi.

Tôi mới sử dụng canvas và không hiểu mã của mình có gì sai. Tôi đã cố gắng giải quyết nó nhưng không may mắn.

Vấn đề có thể là trong chức năng này,

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

Tôi đang gặp một vòng lặp for lớn có nghĩa là có rất nhiều lần lặp phải trải qua và trong vòng lặp đó, tôi gọi hàm drawBlackMarkers nhiều lần như hình dưới đây.

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);      
    }
  }

Làm ơn kiểm tra cái này : http://jsfiddle.net/3v5nt7fe/1/

Vấn đề là nếu tôi nhận xét cuộc gọi hàm drawBlackMarkers , cập nhật phối hợp chuột rất nhanh nhưng nếu tôi bỏ ghi chú, thì phải mất quá nhiều thời gian để cập nhật vị trí.

Tôi thực sự cần giúp đỡ để giải quyết vấn đề này.

Trả lời

5 SimonSarris Sep 16 2020 at 12:26

Nó không phải là drawBlackMarkerschính nó, nó là thế này:

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

Điều này không ngừng tăng lên và xảy ra 640.000 lần. Bạn có thể cho biết đó là trường hợp bằng cách viết:

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

và xem kết quả bảng điều khiển.

Vì vậy, vòng lặp for đó thực hiện rất ít, bởi vì hầu hết nó nằm sau một câu lệnh switch, và khi nó thực hiện điều này đơn giản drawBlackMarkersbên ngoài nó cho thấy chi phí thực của vòng lặp đó. rangeValYlà 640.000, có nghĩa là đường dẫn mà ngữ cảnh canvas phải tạo là rất lớn.

Vì vậy, để khắc phục điều này, bạn phải tìm cách cải thiện vấn đề đó.

1 speciesUnknown Sep 18 2020 at 20:31

Điều này đang làm rất nhiều công việc không cần thiết

Màn hình không có chiều cao 64000 pixel. Bạn muốn tính toán khung nhìn và chỉ vẽ những gì có trong khung nhìn.

Hàm drawBlackMarkers của bạn không phải là thủ phạm. Hệ thống trước đó rất chậm, nó chỉ đơn giản là thêm một thứ nữa cần được vẽ. Chính rơm đã làm gãy lưng lạc đà.

Bằng cách giảm độ dài của những gì bạn đang vẽ, bạn có thể rất dễ dàng tránh được các chu kỳ CPU bị lãng phí.