JavaScript Canvas, Skalierung zwischen zwei Punkten in Diagramm/Grafik?

Question

Also ich habe eine kleine Grafik-Anwendung mit JavaScript erstellt, um mir zu helfen, die Leinwand zu üben. Ich habe die letzten 10 Stunden damit verbracht, zwischen zwei Punkten auf der X-Achse zu skalieren und kann es nicht für das Leben von mir herausfinden. Ich habe gelernt, dass man skalieren muss, um> scale> translate übersetzen zu können. Dies funktioniert gut, wenn ich mit dem folgenden Typencode nach ganz links/rechts skaliere.

Mit diesem Code kann ich einfach ganz links in den Graphen hineinzoomen. Jetzt versuche ich, zwei Punkte in diesem Graphen auszuwählen und oben auf sie zu zoomen, damit sie gleichmäßig auf den Bildschirm passen. Die Y-Achse wird immer dieselbe sein.

Mein Gedanke war, den Mittelpunkt zwischen den beiden Punkten zu bekommen und an dieser Stelle heranzuzoomen, was meiner Meinung nach funktionieren sollte, aber ich kann es einfach nicht funktionieren lassen. Meine Grafikbreite ist 3010px und aufgeteilt in 5 Segmente von 602px. Ich möchte z. B. von x1 = 602 und x2 = 1806 zoomen, was den Mittelpunkt von 1204 hat. Gibt es eine Technik, um den Maßstab richtig zu berechnen?

rangeFinder(from, to) { 
    let points = this.state.points; 
    if (points.length === 0) { 
    return; 
    } 

    let ctx = this.getCanvasContext(); 
    let canvasWidth = this.getCanvasWidth(); 
    let canvasHeight = this.getCanvasHeight()/2; 
    let seconds = this.state.seconds; 
    let second = canvasWidth/seconds; 
    let scale = 1; 
    // My graph starts from zero, goes up to 5 and the values are to represent seconds. 
    // This gets the pixel value for the fromX value. 
    let fromX = from * second; 
    to = isNaN(to) ? 5 : to; 

    // Get the pixel value for the to location. 
    let toX = parseInt(to) * second; 
    let y = canvasHeight/2; 

    // get the midpoint between the two points. 
    let midpoint = fromX + ((toX - fromX)/2); 

    // This is where I really go wrong. I'm trying to calculate the scale amount 
    let zoom = canvasWidth - (toX - fromX); 
    let zoomPixel = (zoom/10)/1000; 
    let scaleAmount = scale + ((zoom/(canvasWidth/100))/100) + zoomPixel; 

    ctx.clearRect(0, 0, this.getCanvas().width, this.getCanvas().height); 
    this.setCanvas(); 

    // translate and scale. 
    ctx.translate(midpoint, y); 
    ctx.scale(scaleAmount, 1); 
    ctx.translate(-midpoint, -y); 

    this.resetCanvasLines(); 
    this.renderGraph(points); 

} 

Jede Hilfe wäre großartig, danke.

Answer 1

Skalierung = 5/3 = Gesamtbreite/Teilbreite. Nach der Skalierung sollte sich x = 602 zu 602 * 5/3 ~ 1000 verschoben haben. Das neue Bild mit -1000 übersetzen. Es besteht keine Notwendigkeit, den Mittelpunkt zu finden.