hallo,
ja, ich schon wieder. Nochmals Danke für die Hinweise. Auch an hellbringer, ich hatte tatsächlich ein falsches Bild von header
()Nun etwas neues. Es geht um das Canvas Element. Ich hab da meine besagte Anwendung. Um Größenänderungen des Browsers (resize durch user) habe ich meine Styles angepasst (@media screen).
Nur bei dem Canvas Container geht das so einfach nicht. Das heißt, man kann den schon ändern, aber dadurch ändert sich nicht die Größe des Inhaltes. Und selbst wenn, würde mir das nichts nutzen, weil ich den genauen Faktor der Größenanpassung benötige. Also habe ich den onResize Event benutzt und starte damit ein Javascript. Dieses liest die tatsächliche Größe das Containers aus, in dem sich das Canvas befindet, berechnet auf Grund der Daten und der zu zeigenden Bildgröße einen Faktor und legt eine neue Größe für das Canvas fest. Über Ajax starte ich dann eine Funktion, die mir das Canvas mit Inhalt richtig anpasst. Damit das aber nicht bei jedem Pixel passiert, was viel zu aufwändig wäre, begrenze ich das auf eine Schrittweite von 200px
PHP-Code:
if(aktuelle_Größe % 200 == 0)
Bisher habe ich das:
PHP-Code:
function changeCanvasSize(session, token, cm_key){ // werte für die Session, für die Berechnung unwichtig
changeSize = getMaxValues(); // gibt mir die aktuelle Höhe und Breite
//useSizeWidth, useSizeHeight, useSizeWidthTemp, useSizeHeightTemp sind als globale Variablen außerhalb der Funktion definiert
if(changeSize[0] % 10 == 0 || changeSize[1] % 10 == 0){
if(changeSize[0] % 200 == 0 || changeSize[1] % 100 == 0){
useSizeWidth = Math.round(changeSize[0]);
useSizeHeight = Math.round(changeSize[1]);
//console.log("width ",Math.round(useSizeWidth), " / ", "height ", Math.round(useSizeHeight));
if((useSizeWidthTemp != useSizeWidth && useSizeWidth > 800 && useSizeWidth < 1400) || (useSizeHeightTemp != useSizeHeight && useSizeHeight > 400 && useSizeHeight < 800)){
useSizeWidthTemp = useSizeWidth;
useSizeHeightTemp = useSizeHeight;
var url = "mein_script.php?actionName=resizeCanvas&resizeWidth=" + changeSize[0] + "&resizeHeight=" + changeSize[1] + "&cm_key=" + cm_key + "&sessionId=" + session + "&token=" + token;
// mein_script.php berechnet auf Grundlage der verfügbaren Größe und der Größe des anzuzeigenden Bildes im Canvas (aus Datenbank) die neue Größe des Canvas
if(!xmlhttp3){
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp3 = new XMLHttpRequest();
}else{ // code for IE6, IE5
xmlhttp3 = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp3.arguments = "Error_setNewSize";
xmlhttp3.onload = function(){
if (xmlhttp3.readyState == 4) {
//alert(url);
alert("--> " + xmlhttp3.responseText); //wenn ich den Browser langsam ändere, erhalte ich hier richtige Werte.
dataAllObj = JSON.parse(xmlhttp3.responseText); //wenn ich den Browser schnell ändere, passiert hier gar nichts
var dataAllObj3 = JSON.parse(xmlhttp3.responseText);
//alert(dataAllObj3[3]);
var dataAll = ajaxResponse(dataAllObj[3]);
//alert(dataAll[0][0] + " / " + dataAll[0][1]);
var newData = new Array(Math.round(dataAll[0][0]),Math.round(dataAll[0][1]));
toolGoToCanvas("startMat", "resizeCanvas", JSON.stringify(newData), 0); //startet Javascript Funktion zur Anpassung des Canvas mit Inhalt
}
}
xmlhttp3.onerror = xmlhttp3Error; //die Funktion existiert
xmlhttp3.open("POST", url, true);
xmlhttp3.send(null);
return false;
}
}
}
}
Kommentar