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

Question

我有代码在每次点击 canvas 时画线。它显示鼠标移动时的行预览，并结束该行并在 mouse:down.4

时从相同位置开始新行

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

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

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

我的调整 fiddle，请注意最新行在对鼠标移动的反应中出现延迟。这是由于 mouse:move 中包含 canvas.renderAll()。 canvas 上的行越多，反应越小。: https://codepen.io/morrowsend/pen/EMeWpM

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

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

我找到了一个仅将动画与 canvas 结合使用的示例，但我希望在绘制线条后用户可以编辑线条（尚未实现）。看起来很顺利，但是 canvas 上还没有 man 对象，所以如果添加更多，它可能会像我的一样陷入困境： 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>

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

Rendering a line that follows the mouse eventually slows down with multiple lines on the canvas using Fabricjs

canvas

render

fabricjs

jquery-animate