canvas - 使用 Fabricjs 在 Canvas 上渲染一条跟随鼠标的线最终会变慢

Question

我有代码在每次点击 Canvas 时绘制线条。它显示鼠标移动时的行预览，并结束该行并在鼠标按下时从相同位置开始新行。4

我将两个示例代码拼凑在一起生成了这段代码。其中一个示例让我只要按住鼠标就可以简单地画线，这构成了应用程序的主要内容。奇怪的是，对于原始示例代码，无论我在 Canvas 上有多少行，新行总是在 mouse:move 上平滑移动。当我添加绘图时不必按住鼠标的功能时，由于某种原因，在我向 Canvas 添加更多线条后，可移动线条对鼠标的 react 变得非常缓慢。你可以在下面看到我的意思。第一个带有红线的 Canvas 是原始示例代码。第二个是我对一堆线条的调整。第三个是我的再次调整，我只是刷新页面并删除了所有行。只需在屏幕上显示几行，您就可以看到线路的 react 速度有多快。

mouse:move 代码在这两个方面几乎完全相同，所以我终究无法弄清楚为什么在添加了大约 50 个对象后我的调整速度如此之慢。

红线 fiddle ，注意鼠标移动时新线的 react 。:https://codepen.io/morrowsend/pen/YgBxvj?editors=0010

我的 tweak fiddle，请注意最新的行在对鼠标移动的 react 上有延迟。这是由于 mouse:move 中包含 canvas.renderAll()。 Canvas 上的线条越多， react 越少。:https://codepen.io/morrowsend/pen/EMeWpM

现在您可能会说“只需使用动画”，我试过了。我还不是很了解这些，但我尝试使用 Fabric 的 animate，但我不太喜欢。它最快可以达到 1 毫秒，但这并不是真正的 react ，并且在绘制几条线后它会给我一些伪像，有时新线会偏离鼠标。此外，它还为上一行设置动画，以便将端点移动到最新的行。更容易看到这种行为。在下图中，动画代码中已经有很多行，您可以看到它的表现很差。当我刷新并从干净的 Canvas 开始时，一开始似乎一切正常，但我得到的行越多，结果就越不正确:

这是我使用 Fabric 的内置动画制作的动画代码。 https://codepen.io/morrowsend/pen/YgBxvj?editors=0010

我找到了一个仅使用 animate with canvas 的示例，但我希望用户可以在绘制线条后对其进行编辑(尚未实现)。它看起来很流畅，但是 Canvas 上还没有人对象，所以如果添加更多，它可能会像我的一样陷入困境: html canvas a line following mouse相关 fiddle :http://jsfiddle.net/dFjodorov/XQpzU/5171/

即使屏幕上有几百个对象，我怎样才能流畅地动画绘制一条线？我觉得我已经尝试了很多事情都无济于事。

Answer 1

在鼠标移动处理程序上设置行的 x2 和 y2 值，无需使用动画。并在编辑模式下删除鼠标处理程序并在绘制模式下添加鼠标处理程序。

var canvas = new fabric.Canvas('c');

var isDown;

var point1;
var line = null;
var drawMode = true;

function addListener() {
  canvas.on('mouse:down', onMouseDown);
  canvas.on('mouse:dblclick', onDblClick);
  canvas.on('mouse:move', onMouseMove)
}

function removeListener() {
  canvas.off('mouse:down', onMouseDown);
  canvas.off('mouse:dblclick', onDblClick);
  canvas.off('mouse:move', onMouseMove)
}

function setSelectable(value) {
  canvas.forEachObject(function(object) {
    object.selectable = value;
    object.setCoords()
  })
  canvas.selection = value;
}

function onMouseDown(options) {
  isDown = true;
  var pointer = canvas.getPointer(options.e);
  var points = [pointer.x, pointer.y, pointer.x, pointer.y];
  line = new fabric.Line(points, {
    stroke: 'black',
    hasControls: false,
    hasBorders: false,
    lockMovementX: false,
    lockMovementY: false,
    hoverCursor: 'default',
    selectable: false
  });
  canvas.add(line);
};

function onDblClick() {
  //alert('dblclick')
  line.setCoords()
  isDown = false;
  line = null;
};

function onMouseMove(o) {
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({
    x2: pointer.x,
    y2: pointer.y
  });
  canvas.requestRenderAll();
}; //end mouse:move

document.addEventListener("keydown", function(event) {
  var keyPressed = event.keyCode;
  if (keyPressed === 27) { //escape key code
    edit();
  } //end if delete  
}); //end keydown


function draw() {
  drawMode = true
  addListener()
  setSelectable(false);
  // console.log(drawMode)
}


function edit() {
  // bool = false
  if (drawMode) {
    var canvas_objects = canvas._objects;
    var sel = canvas_objects[canvas_objects.length - 1]; //Get last object 
    canvas.remove(sel);
    drawMode = false;
  }
  removeListener();
  setSelectable(true);
}
var enableDraw = document.getElementById("drawEnabled");
enableDraw.addEventListener("click", draw);
var enableEdit = document.getElementById("editEnabled");
enableEdit.addEventListener("click", edit);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>
        
<button id="drawEnabled">Draw Mode</button>
<button id="editEnabled">Edit Mode</button>
<canvas id="c" width="500" height="500" style="border:1px solid #aaa"></canvas>