В этой статье в основном описывается способ масштабирования холста путем установки матрицы преобразования холста.
Первым шагом является прослушивание события колеса мыши, на основе прокрутки мыши и предыдущего преобразования, масштабирование и перевод контекста сбрасываются. Основной код выглядит следующим образом:
let delta = this.deltaInst; delta.bind('zoom', (data) => { delta._transform.scale.forEach((s, i) => { delta._transform.scale[i] *= data.delta > 0? 2: 1/2; }); пусть offsetX = data.x - delta._transform.translate[0]; пусть offsetY = data.y - delta._transform.translate[1]; delta._transform.translate[0] += -(data.delta > 0? 1: -1/2)*offsetX; delta._transform.translate[1] -= (data. дельта > 0? 1: -1/2)*offsetY; delta.refreshAll();});Здесь предполагается, что каждый масштаб увеличивается в 2 раза, но могут быть и другие коэффициенты масштабирования.
Первый шаг — умножить или разделить текущий коэффициент масштабирования на 2 в зависимости от направления прокрутки;
Второй шаг — вычислить перемещение. Основная идея — вычислить положение, в котором холст можно переместить, чтобы добиться того же эффекта при масштабировании точки на холсте до центрального положения на основе нового положения мыши.
Давайте посмотрим на код replaceAll:
пусть ctx = this.context; пусть матрица = this.getTransformMatrix(); ctx.transform(...matrix); //ctx.translate(...this._transform.translate); ctx.scale(...this._transform.scale); if (!Array.isArray(shapes)) { shape = [shapes]; } shape.forEach( (shape) => { shape.render(ctx); ctx.restore();Код сначала получает матрицу изменения на основе шкалы значения масштаба и значения перевода, вычисленных ранее, а затем передает соответствующее значение в матрице методу преобразования контекста, выполняет заданное преобразование на холсте, а затем выполняет предыдущее масштабирование. полностью последовательные операции рисования будут давать тот же эффект, что и после масштабирования~~
В приведенном выше коде ctx.transform() также можно полностью заменить методами ctx.translate() и ctx.scale(). Как показано в части комментария кода, параметрами являются значения, рассчитанные ранее.
Полный код можно найти по адресу github: https://github.com/helloweilei/delta.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.