Este artigo apresenta principalmente uma maneira de obter o dimensionamento da tela definindo a matriz de transformação da tela.
O primeiro passo é ouvir o evento roda do mouse. Com base na rolagem do mouse e na transformação anterior, o zoom e a tradução do contexto são redefinidos.
deixe delta = this.deltaInst; > 0? 2: 1/2 }); deixe offsetX = data.x - delta._transform.translate[0]; delta._transform.translate[1]; delta._transform.translate[0] += -(dados.delta > 0? 1: -1/2)*offsetX; delta > 0? 1 : -1/2)*offsetY; delta.refreshAll();});
Supõe-se aqui que cada zoom é ampliado 2 vezes, mas também podem ser outras taxas de zoom.
O primeiro passo é multiplicar ou dividir a taxa de zoom atual por 2 de acordo com a direção da rolagem;
A segunda etapa é calcular a translação. A ideia básica é calcular a posição onde a tela pode ser transladada para obter o mesmo efeito ao dimensionar o ponto na tela para a posição central com base na nova posição do mouse.
Vamos dar uma olhada no código de atualizaçãoAll:
deixe ctx = this.context; deixe matriz = this.getTransformMatrix(); ctx.scale(...this._transform.scale); if (!Array.isArray(shapes)) { formas = [formas] } formas.forEach( (forma) => { forma.render(ctx });O código primeiro obtém uma matriz de mudança com base na escala de valor de escala e no valor de tradução calculado anteriormente e, em seguida, passa o valor correspondente na matriz para o método de transformação do contexto, realiza uma determinada transformação na tela e, em seguida, executa o escalonamento anterior Operações de desenho completamente consistentes produzirão o mesmo efeito após o dimensionamento ~~
No código acima, ctx.transform() também pode ser completamente substituído pelos métodos ctx.translate() e ctx.scale() Conforme mostrado na parte de comentários do código, os parâmetros são os valores calculados anteriormente.
O código completo pode ser encontrado no endereço do github: https://github.com/helloweilei/delta
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.