이 문서에서는 주로 캔버스의 변환 행렬을 설정하여 캔버스 크기를 조정하는 방법을 소개합니다.
첫 번째 단계는 마우스 휠 이벤트를 수신하는 것입니다. 휠 이벤트에서 마우스 스크롤과 이전 변환을 기반으로 컨텍스트의 확대/축소 및 번역이 재설정됩니다.
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]; delta._transform.translate[1]; delta._transform.translate[0] += -(data.delta > 0? 1 : -1/2)*offsetX; delta._transform.translate[1] -= (데이터. 델타 > 0? 1 : -1/2)*offsetY delta.refreshAll();});여기서는 각 줌이 2배로 확대된다고 가정하지만 다른 줌 비율일 수도 있습니다.
첫 번째 단계는 스크롤 방향에 따라 현재 확대/축소 비율에 2를 곱하거나 나누는 것입니다.
두 번째 단계는 변환을 계산하는 것입니다. 기본 아이디어는 새 마우스 위치를 기준으로 캔버스의 점을 중앙 위치로 확대할 때 동일한 효과를 얻기 위해 캔버스를 변환할 수 있는 위치를 계산하는 것입니다.
RefreshAll 코드를 살펴보겠습니다.
let ctx = this.context; let 행렬 = this.getTransformMatrix(); ctx.transform(...matrix); //ctx.translate(...this._transform.translate); ctx.scale(...this._transform.scale); if (!Array.isArray(shapes)) { 모양 = [모양] } 모양.forEach( (모양) => { 모양.렌더(ctx); });코드는 먼저 앞서 계산한 scale 값 scale과 Translation 값을 기반으로 변경 행렬을 구한 후 행렬의 해당 값을 컨텍스트의 변환 메서드에 전달하고 캔버스에서 주어진 변환을 수행한 후 이전 스케일링을 수행합니다. 완전히 일관된 그리기 작업은 크기 조정 후와 동일한 효과를 생성합니다~~
위 코드에서 ctx.transform()은 코드의 주석 부분에서 볼 수 있듯이 ctx.translate() 및 ctx.scale() 메서드로 완전히 대체될 수도 있습니다.
전체 코드는 github 주소: https://github.com/helloweilei/delta에서 찾을 수 있습니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.