时间戳

首页 > 解决方案 > 画布绘制很慢

javascript - 画布绘制很慢

问题描述

我想用工作正常的标记显示比例。最重要的是，我还想用红色指示器在比例尺中显示鼠标位置。

因此，我在运行应用程序时绘制画布，然后在更改鼠标位置时重新绘制整个画布。

我是画布新手，不明白我的代码有什么问题。我一直在尝试解决它，但没有运气。

问题可能出在这个功能上，

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

我有一个大的 for 循环意味着要经历如此多的迭代，在那个循环中我多次调用drawBlackMarkers函数，如下所示。

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

请检查：http: //jsfiddle.net/3v5nt7fe/1/

问题是如果我评论drawBlackMarkers函数调用，鼠标坐标更新非常快，但如果我取消评论，更新位置需要很长时间。

我真的需要帮助来解决这个问题。

标签： javascripthtmlcanvashtml5-canvas

解决方案

这不是它drawBlackMarkers本身，它是这样的：

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

这不断增加并发生 640,000 次。你可以这样写：

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

并查看控制台结果。

所以 for 循环做的很少，因为它大部分都在 switch 语句后面，当它做这个简单的事情时，drawBlackMarkers它显示了该循环的真实成本。rangeValY是 640,000，这意味着画布上下文必须构建的路径是巨大的。

所以要解决这个问题，你必须找到一种方法来改善这个问题。

推荐阅读