2

我一直在学习一些关于 HTML Canvas 的知识，并且遇到了一种似乎是跨浏览器（Chrome、Firefox、Safari）的行为——但对于某些设置来说似乎是独一无二的。

问题是，在某些情况下，当我使用鼠标执行单击拖动移动时，除了画布上发生的任何事件交互之外 - 还莫名其妙地绘制了一个扩展框（例如当您在桌面上选择多个图标时） .

我在使用fabric.js时遇到了这种行为并旋转了很长时间，认为这是我做错的事情（当然，它可能仍然是）——但我切换到了 kineticjs，问题就消失了。但我在其他地方看到它，我想知道如何/是否可以在不必切换库的情况下修复它。

我也有一些活生生的例子：

  • fabric.js：http ://www.remix.net/matrix/index.broken.html - 点击拖动调用框选行为。

  • kineticjs：http ://www.remix.net/matrix/index.html - 点击拖动工作正常吗？

我在 OSX 上，但如果 Windows 用户也看到相同的行为，我会很好奇。（如果有人愿意花时间看看这些页面）

例子

4

1 回答 1

1

蓝色选择框是 Fabric（对象分组）中的默认行为，用于交互式画布 ( fabric.Canvas)。

但是您可以通过 禁用它canvas.selection = false。

这是一个绘制线条的快速示例，没有干扰选择框（请参阅jsfiddle）：

在此处输入图像描述

var canvas = new fabric.Canvas('c', { selection: false });

var line, isDown;

canvas.on('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  var points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red'
  });
  canvas.add(line);
});

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

canvas.on('mouse:up', function(o){
  isDown = false;
});
于 2013-05-26T01:14:48.553 回答