CODEWITHSUNDEEP
javascripthtmlcanvaskineticjsfabricjs
synthesizerpatel
synthesizerpatel

Reputation: 28036

HTML canvas responds to click+drag by creating an expanding-box selector

I've been learning a little bit about HTML Canvas and I've run into a behavior that seems to be cross-browser (Chrome, Firefox, Safari) - but seems unique to certain setups.

The issue is that in some cases when I perform a click-drag movement with the mouse, in addition to whatever event interaction that happens on the canvas - inexplicably an expanding-box is also drawn (like when you select multiple icons on your desktop).

I ran into this behavior with fabric.js and spun my wheels for a long time thinking it was something I did wrong (granted, it may still be) - but I switched over to kineticjs and the problem went away. But I'm seeing it in other places and I'm wondering how/if I can fix it without having to switch libraries.

I have some live examples as well:

I'm on OSX, but I'd be curious if windows users see the same behavior as well. (If anyone is feeling charitable with their time to take a look at the pages)

example

Upvotes: 2

Views: 1423

Answers (1)

kangax
kangax

Reputation: 39188

Blue selection box is a default behavior in Fabric (grouping objects), for interactive canvases (fabric.Canvas).

But you can disable it via canvas.selection = false.

Here's a quick example of drawing lines, without interfering selection box (see jsfiddle):

enter image description here

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

Upvotes: 1

Related Questions