Changes between Initial Version and Version 1 of jsc3d/prikazno_okno


Ignore:
Timestamp:
Dec 18, 2013, 11:09:00 AM (7 years ago)
Author:
ptomsic
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • jsc3d/prikazno_okno

    v1 v1  
     1== Prikaz kosa- nastavitev velikosti prikaznega okna ==
     2
     3Velikokrat nastanejo problemi z velikostjo prikaznega okna, ker si lahko spletno stran ogledujemo na večih različnih napravah, ki nimajo enake resolucije (PC, prenosnik, tablica, telefon). Problem se še bolj zaplete ko začnemo spreminjati velikost odprtega okna brskalnika.
     4Ugodno je, da se prikaz modela prilagaja trenutni velikosti okna brskalnika. Tako nastavimo začetno širino in višino:
     5{{{
     6  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev zacetne sirine prikaznega okna -->
     7  canvas.height = canvas.width/1.6;             <!-- nastavitev zacetne visine prikaznega okna -->
     8}}}
     9
     10Kljub nastavitvi velikosti prikaznega okna pa se le ta ne prilagaja spremembi velikosti brskalnika, ali pa rotaciji zaslona na tabličnih računalnikih/ mobitelih. Potrebno je napraviti še funkcijo za osveževanje prikaza:
     11{{{
     12window.onresize = function() {
     13  var canvas = document.getElementById('cv');
     14  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev sirine prikaznega okna ob osvezitvi -->
     15  canvas.height = canvas.width/1.6;             <!-- nastavitev visine prikaznega okna ob osvezitvi -->
     16  viewer.ctx = canvas.getContext('2d');
     17  viewer.canvasData = viewer.ctx.getImageData(0, 0, canvas.width, canvas.height);
     18  viewer.frameWidth = canvas.width;             <!-- nastavitev sirine modelnega okna ob osvezitvi -->
     19  viewer.frameHeight = canvas.height;           <!-- nastavitev sirine modelnega okna ob osvezitvi -->
     20  viewer.generateBackground();                  <!-- ponovni izris ozadja -->
     21  viewer.update();
     22}
     23}}}
     24
     25{{{
     26#!html
     27<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
     28<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
     29<script type="text/javascript">
     30var viewer = null;
     31function onLoad7(){
     32  var canvas = document.getElementById('cv7');   <!-- Ime elementa -->
     33  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev zacetne sirine prikaznega okna -->
     34  canvas.height = canvas.width/1.6;             <!-- nastavitev zacetne visine prikaznega okna -->
     35  viewer = new JSC3D.Viewer(canvas);            <!-- Ime prikaznega okna -->
     36  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
     37  viewer.init();
     38  viewer.update();
     39}     
     40
     41window.onload = function() {onLoad7();} 
     42 
     43window.onresize = function() {
     44  var canvas = document.getElementById('cv7');
     45  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev sirine prikaznega okna ob osvezitvi -->
     46  canvas.height = canvas.width/1.6;             <!-- nastavitev visine prikaznega okna ob osvezitvi -->
     47  viewer.ctx = canvas.getContext('2d');
     48  viewer.canvasData = viewer.ctx.getImageData(0, 0, canvas.width, canvas.height);
     49  viewer.frameWidth = canvas.width;             <!-- nastavitev sirine modelnega okna ob osvezitvi -->
     50  viewer.frameHeight = canvas.height;           <!-- nastavitev sirine modelnega okna ob osvezitvi -->
     51  viewer.generateBackground();                  <!-- ponovni izris ozadja -->
     52  viewer.update();
     53}           
     54     
     55</script> 
     56
     57<div align="center">                            <!-- Parametri prikaznega okna -->
     58<canvas id="cv7" width="1200" height="800"
     59  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
     60</div>
     61}}}