In diesem Artikel wird hauptsächlich eine Möglichkeit vorgestellt, eine Leinwandskalierung durch Festlegen der Transformationsmatrix der Leinwand zu erreichen.
Der erste Schritt besteht darin, das Mausradereignis abzuhören. Basierend auf dem Scrollen der Maus und der vorherigen Transformation werden der Zoom und die Übersetzung des Kontexts wie folgt zurückgesetzt.
let delta = this.deltaInst; delta.bind('zoom', (data) => { delta._transform.scale.forEach((s, i) => { delta._transform.scale[i] *= data.delta > 0? 2 : 1/2; }); let 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;Hierbei wird davon ausgegangen, dass jeder Zoom um das 2-fache vergrößert wird, es können aber auch andere Zoomverhältnisse sein.
Der erste Schritt besteht darin, das aktuelle Zoomverhältnis je nach Scrollrichtung mit 2 zu multiplizieren oder zu dividieren;
Der zweite Schritt besteht darin, die Übersetzung zu berechnen. Die Grundidee besteht darin, die Position zu berechnen, an der die Leinwand verschoben werden kann, um den gleichen Effekt zu erzielen, wenn der Punkt auf der Leinwand basierend auf der neuen Mausposition auf die Mittelposition skaliert wird.
Werfen wir einen Blick auf den RefreshAll-Code:
let ctx = this.context; let Matrix = this.getTransformMatrix(); ctx.transform(...this._transform.translate); ctx.scale(...this._transform.scale); if (!Array.isArray(shapes)) { Shapes = [Shapes] } Shapes.forEach( (Shape) => { shape.render(ctx); ctx.restore();Der Code erhält zunächst eine Änderungsmatrix basierend auf dem zuvor berechneten Skalenwert und dem Übersetzungswert, übergibt dann den entsprechenden Wert in der Matrix an die Transformationsmethode des Kontexts, führt eine bestimmte Transformation auf der Leinwand durch und führt dann die vorherige Skalierung durch Vollständig konsistente Zeichenvorgänge erzeugen den gleichen Effekt wie nach der Skalierung~~
Im obigen Code kann ctx.transform() auch vollständig durch die Methoden ctx.translate() und ctx.scale() ersetzt werden. Wie im Kommentarteil des Codes gezeigt, handelt es sich bei den Parametern um die zuvor berechneten Werte.
Den vollständigen Code finden Sie unter der Github-Adresse: https://github.com/helloweilei/delta
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.