Как улучшить скорость рисования круга при перемещении мыши [JS / CANVAS] - PullRequest
Новая
       27

Как улучшить скорость рисования круга при перемещении мыши [JS / CANVAS]

1 голос
/ 18 июня 2019

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

Я обнаружил на github это повышение производительности на html-маске изображения мыши при перемещении холста

Я не могу использовать это решение, потому что мне нужен пиксельный цвет для рисования круга

Я показываю, что хочу

image

Некоторый код 

handlerMousemove: function(e) {
      canvasEevents.circleMousemove(e)
},

circleMousemove: function(e) {
     if(mousedown.allowBlur) {
          var x = (e.clientX - 200) / (zoomValue / 100)
          var y = (e.clientY - 38 - 25) / (zoomValue / 100)

         //circleBlur(x, y)
         circleBlurPixi(x, y)
     }
 },

function circleBlurPixi(x, y) {
    var graphics = new PIXI.Graphics();

    graphics.beginFill(0xe74c3c);
    graphics.drawCircle(x, y, 100);
    graphics.endFill();

    pixi_canvas.stage.addChild(graphics);
}

ОБНОВЛЕНИЕ: Result

Как вы можете видеть, есть двапервая линия - это когда я медленно перетаскиваю, а вторая - это проблема при быстром перетаскивании

Я просто хочу получить тот же результат при быстром перетаскивании

1 Ответ

0 голосов
/ 18 июня 2019

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

...