Изменить мой прямоугольник создания инструмента на html5 холст без использования цикла

Question

Вот мой полный код на jsfiddle: https://jsfiddle.net/6u7bLkwc/14/

Перед тем как выставить свою проблему, вы можете создать треугольники на изображении, как это:

• Нажмите на изображении, затем перетащите указатель мыши, чтобы создать его.

В чем проблема с моим кодом?

Когда я использую этот скрипт, у меня есть много лагов на моем ПК ... особенно для больших изображений!

Что я хочу?

Попробуйте использовать мой скрипт без цикла для предотвращения лаг.

Издание приходит из этой части коды:

function draw() { 
    ctx.drawImage(imageObj, 0, 0); 
    shapes.forEach(function(shape) { 
     var hue = Math.floor(Math.random() * 360); 

     ctx.fillStyle = shape.getColor(); 
     ctx.fillRect(shape.x, shape.y, shape.width, shape.height); 
    }); 

    if (isMouseDown) { 
     ctx.fillStyle = color; 
     ctx.fillRect(mouseDownX, mouseDownY, mouseX - mouseDownX, mouseY - mouseDownY); 
    } 
} 

Именно эта линия:

ctx.drawImage(imageObj, 0, 0); 

Эта линия используется для нанесения фонового изображения на холст ... так как я хочу использовать этот сценарий для больших изображений (вроде 500ko и выше) и цикл его много раз !!! это создаст собственную атаку DDOSING для моего компьютера.

Почему бы не использовать эту линию вне функции рисования?

Потому что, когда я использую его снаружи, а мышь навешивает созданный прямоугольник ... я вижу черный фон ... но вот это я вижу свою фотографию. (Мышь наведите прямоугольник, сделайте его прозрачным).

Любое исправление или любая идея о том, как его исправить? любой другой подход?

Answer 1

Причина, по которой вы используете lag i в основном из-за этой функции;

can.addEventListener('mousemove', function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    if (isMouseDown) return; 
    var hoveredAlready = false; 
    for (var i = shapes.length - 1; i > -1; i--) { 
     var shape = shapes[i]; 
     if (mouseX < shape.getLeft() || mouseY < shape.getTop() 
      || mouseX > shape.getRight() 
      || mouseY > shape.getBottom() 
      || hoveredAlready) { 
      console.log(shape); 
      shape.unHover(); 
     } else { 
      shape.hover(); 
      hoveredAlready = true; 
     } 
    } 
}); 

Позволяя изображение для колебались в вашем примере с одним exsitsing прямоугольника это хорошо, но как только вы должны сказать, как 4, и они перекрывают друг друга эта функция вызывается примерно 100 раз меньше, чем второй, так для некоторых пользователей они будут испытывать отставание.

мне удалось воспроизвести проблему при попытке отладки это:

удаление также функции в то время как он делает перерыв функциональности приложений делает удалить отставание.

Некоторые вещи, которые я бы рассматривал, чтобы работать и устранять отставание, более эффективно сортировать границы, чтобы вы знали, когда пользовательский курсор находится в пределах границ и настраивается для включения и выключения изображения, или вы собираетесь получить действительно боковые прямоугольники, рассмотрите, как ваша прозрачность может повлиять на несколько объектов на разных уровнях, а также подумайте о том, чтобы минимизировать сумму, которую вы пишете на консоль, так как это увеличивает накладные расходы.