Cet article présente principalement un moyen de réaliser la mise à l'échelle du canevas en définissant la matrice de transformation du canevas.
La première étape consiste à écouter l'événement wheel de la souris, en fonction du défilement de la souris et de la transformation précédente, le zoom et la traduction du contexte sont réinitialisés. Le code principal est le suivant :
let delta = this.deltaInst; delta.bind('zoom', (data) => { delta._transform.scale.forEach((s, i) => { delta._transform.scale[i] *= data.delta > 0? 2 : 1/2; }); laissez 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] -= (data. delta > 0 ? 1 : -1/2)*offsetY; delta.refreshAll();});On suppose ici que chaque zoom est agrandi 2 fois, mais il peut aussi s'agir d'autres taux de zoom.
La première étape consiste à multiplier ou diviser le taux de zoom actuel par 2 selon le sens de défilement ;
La deuxième étape consiste à calculer la translation. L'idée de base est de calculer la position où le canevas peut être traduit pour obtenir le même effet lors de la mise à l'échelle du point sur le canevas à la position centrale en fonction de la nouvelle position de la souris.
Jetons un coup d'œil au code rafraîchirAll :
let ctx = this.context; let matrice = this.getTransformMatrix(); ctx.transform(...matrix); ctx.scale(...this._transform.scale); if (!Array.isArray(shapes)) { formes = [formes] } formes.forEach( (forme) => { shape.render(ctx); ctx.restore();Le code obtient d'abord une matrice de changement basée sur l'échelle de valeur d'échelle et la valeur de traduction calculées précédemment, puis transmet la valeur correspondante dans la matrice à la méthode de transformation du contexte, effectue une transformation donnée sur le canevas, puis effectue la mise à l'échelle précédente. Des opérations de dessin complètement cohérentes produiront le même effet qu'après la mise à l'échelle ~~
Dans le code ci-dessus, ctx.transform() peut également être complètement remplacé par les méthodes ctx.translate() et ctx.scale() Comme indiqué dans la partie commentaire du code, les paramètres sont les valeurs calculées précédemment.
Le code complet peut être trouvé à l'adresse github : https://github.com/helloweilei/delta
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.