HTML-холст реагирует на щелчок + перетаскивание, создавая селектор расширяющегося окна

Question

Я немного изучил HTML-холст, и я столкнулся с поведением, которое похоже на кросс-браузер (Chrome, Firefox, Safari) - но кажется уникальным для определенных настроек.

Проблема в том, что в некоторых случаях, когда я выполняю перемещение щелчка мышью, в дополнение к любому взаимодействию событий, которое происходит на холсте, - необъяснимо, что также расширяется окно (например, когда вы выбираете несколько значков на вашем рабочем столе).

Я столкнулся с этим поведением с fabric.js и долго вращал колеса, думая, что это было что-то, что я сделал неправильно (предоставлено, это все еще может быть) - но я переключился на кинетику, и проблема исчезла. Но я вижу это в других местах, и мне интересно, как/если я могу исправить это, не переключая библиотеки.

У меня есть несколько живых примеров, а также:

• fabric.js: http://www.remix.net/matrix/index.broken.html - Щелчок перетаскивание вызывает поведение коробчатого выберите.

• kineticjs: http://www.remix.net/matrix/index.html - Перетаскивание нажатий отлично?

Я нахожусь на OSX, но мне было бы любопытно, если бы пользователи Windows увидели то же поведение. (Если кто-то чувствуют себя благотворительными со своим временем, чтобы посмотреть на страницах)

Answer 1

Синего окно выбора является поведением по умолчанию в ткани (группировка объектов), для интерактивных холстов (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; 
});