Динамическое изменение размеров графических карт? - PullRequest
Новая
       3

Динамическое изменение размеров графических карт?

3 голосов
/ 30 октября 2011

Надеюсь, вы сможете помочь с этой проблемой, которую я пытался решить.

Я нашел примеры на http://home.comcast.net/~urbanjost/semaphore.html очень классными и отлично работают для того, что мне нужно.

Единственная проблема заключается в том, что я хотел бы, чтобы координаты динамически изменялись в зависимости от размера окна. В настоящий момент он работает так, что загружает координаты по умолчанию (прекрасно работает для разрешений 1920x1080, но сильно выравнивается при 1024x768) и затем изменяет размер при изменении размера окна. сначала для небольших экранов, затем отобразите соответствующий код.

Вот мой JavaScript: 

<script type="text/javascript" >
//|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||    |||||||||||||||||||||||||||||||||||||||||
 GLOBAL_AREAS= new Array();
 GLOBAL_SUFFIX= "g";
 GLOBAL_WIDTH=-1;
 GLOBAL_HEIGHT=-1;
 GLOBAL_NEW_AREAS= new Array();

//---------------------------------------------------------------------------
 function setglobal(){
    // place original AREA coordinate strings into a global array, called first time setXY is called
    var arrayAreas = document.body.getElementsByTagName("AREA" );
    GLOBAL_WIDTH= document.getElementById("tclteam_s1" ).width; // get original width
    GLOBAL_HEIGHT= document.getElementById("tclteam_s1" ).height; // get original height
    for(var i = 0; i < arrayAreas.length; i++) {
       GLOBAL_AREAS[i]= arrayAreas[i].coords;
    }
    document.body.onresize=setXY('tclteam_s1',XSIZE(),YSIZE());
    // alert("GLOBAL_AREAS" + GLOBAL_AREAS );
 }
//---------------------------------------------------------------------------

 function setXY(elementid,newwidth,newheight){
    if (GLOBAL_WIDTH == -1 ){
       setglobal();
    }
    document.getElementById(elementid).width=newwidth;
    document.getElementById(elementid).height=newheight;
    scaleArea();
 }
//---------------------------------------------------------------------------

 function XSIZE(){ // get browser window.innerWidth , dealing with ie
    var myWidth = 1;
    if( typeof( window.innerWidth ) == 'number' ) {
       //Non-IE
       myWidth = window.innerWidth;
    } else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
       //IE 6+ in 'standards compliant mode'
       myWidth = document.documentElement.clientWidth;
    } else if( document.body && ( document.body.clientWidth ) ) {
       //IE 4 compatible
       myWidth = document.body.clientWidth;
    }
    return myWidth;
 }
//---------------------------------------------------------------------------

 function YSIZE(){ // get browser window.innerHeight, dealing with ie
    var myHeight = 1;
    if( typeof( window.innerHeight ) == 'number' ) {
       //Non-IE
       myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientHeight ) ) {
       //IE 6+ in 'standards compliant mode'
       myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientHeight ) ) {
       //IE 4 compatible
       myHeight = document.body.clientHeight;
    }
    return myHeight;
 }

//---------------------------------------------------------------------------
 function scaleArea() { // using values stored at load, recalculate new values for the     current size
    var arrayAreas = document.body.getElementsByTagName("AREA" );
    message = " "
    for(var i = 0; i < arrayAreas.length; i++) {
       ii=i+1;
       rescaleX= document.getElementById("tclteam_s1" ).width/GLOBAL_WIDTH ;
       rescaleY= document.getElementById("tclteam_s1" ).height/GLOBAL_HEIGHT ;
       sarray=GLOBAL_AREAS[i].split("," ); // convert coordinates to a numeric array assuming comma-delimited values
       var rarray =new Array();
       for(var j = 0; j < sarray.length; j += 2) {
          rarray[j]=parseInt(sarray[j])*rescaleX; // rescale the values
          rarray[j]=Math.round(rarray[j]);
          rarray[j+1]=parseInt(sarray[j+1])*rescaleY; // rescale the values
          rarray[j+1]=Math.round(rarray[j+1]);
       }
       message = message + rarray.join("," ) + '\n';
       arrayAreas[i].coords=rarray.join("," ); // put the values back into a string
       GLOBAL_NEW_AREAS[i]= arrayAreas[i].coords;
    }
    // alert(rescaleX + " " + rescaleY + "\n" + GLOBAL_WIDTH + " " + GLOBAL_HEIGHT + "\n" + " GLOBAL_AREAS" + GLOBAL_AREAS + "\nSCALED AREAS" + message);
 }
//||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</script>

Следующий скрипт здесь определяет размер окна браузера. Так что я надеюсь включить это в вышеприведенное, чтобы карта изображения сначала динамически изменяла размер от размера окна браузера: 

<script type="text/javascript">
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}
</script>

Есть ли способ закодировать это так, чтобы он сначала считывал размер окна браузера (используя код выше), а затем соответственно загружал карту изображений?

...