Changes between Initial Version and Version 1 of jsc3d/prikazno_okno

Timestamp:

Dec 18, 2013, 11:09:00 AM (10 years ago)

Author:

ptomsic

Comment:

--

jsc3d/prikazno_okno

@@ +1 @@
+== Prikaz kosa- nastavitev velikosti prikaznega okna ==
+
+Velikokrat 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.
+Ugodno je, da se prikaz modela prilagaja trenutni velikosti okna brskalnika. Tako nastavimo začetno širino in višino:
+{{{
+  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev zacetne sirine prikaznega okna -->
+  canvas.height = canvas.width/1.6;             <!-- nastavitev zacetne visine prikaznega okna -->
+}}}
+
+Kljub 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:
+{{{
+window.onresize = function() {
+  var canvas = document.getElementById('cv');
+  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev sirine prikaznega okna ob osvezitvi -->
+  canvas.height = canvas.width/1.6;             <!-- nastavitev visine prikaznega okna ob osvezitvi -->
+  viewer.ctx = canvas.getContext('2d');
+  viewer.canvasData = viewer.ctx.getImageData(0, 0, canvas.width, canvas.height);
+  viewer.frameWidth = canvas.width;             <!-- nastavitev sirine modelnega okna ob osvezitvi -->
+  viewer.frameHeight = canvas.height;           <!-- nastavitev sirine modelnega okna ob osvezitvi -->
+  viewer.generateBackground();                  <!-- ponovni izris ozadja -->
+  viewer.update();
+}
+}}}
+
+{{{
+#!html
+<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.min.js"></script>            <!-- Knjižnica jsc3d za prikaz na spletni strani -->
+<script src="/vaje/raw-attachment/wiki/jsc3d/jsc3d.touch.js"></script>          <!-- Knjižnica jsc3d za prikaz na tablicah -->
+<script type="text/javascript">
+var viewer = null;
+function onLoad7(){
+  var canvas = document.getElementById('cv7');   <!-- Ime elementa -->
+  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev zacetne sirine prikaznega okna -->
+  canvas.height = canvas.width/1.6;             <!-- nastavitev zacetne visine prikaznega okna -->
+  viewer = new JSC3D.Viewer(canvas);            <!-- Ime prikaznega okna -->
+  viewer.setParameter('SceneUrl', '/vaje/raw-attachment/wiki/jsc3d/elbow.STL'); <!-- Model za prikaz -->
+  viewer.init();
+  viewer.update();
+}      
+
+window.onload = function() {onLoad7();}  
+  
+window.onresize = function() {
+  var canvas = document.getElementById('cv7');
+  canvas.width = 0.9*window.innerWidth;         <!-- nastavitev sirine prikaznega okna ob osvezitvi -->
+  canvas.height = canvas.width/1.6;             <!-- nastavitev visine prikaznega okna ob osvezitvi -->
+  viewer.ctx = canvas.getContext('2d');
+  viewer.canvasData = viewer.ctx.getImageData(0, 0, canvas.width, canvas.height);
+  viewer.frameWidth = canvas.width;             <!-- nastavitev sirine modelnega okna ob osvezitvi -->
+  viewer.frameHeight = canvas.height;           <!-- nastavitev sirine modelnega okna ob osvezitvi -->
+  viewer.generateBackground();                  <!-- ponovni izris ozadja -->
+  viewer.update();
+}           
+      
+</script>  
+
+<div align="center">                            <!-- Parametri prikaznega okna -->
+<canvas id="cv7" width="1200" height="800"
+  style="background:lightgrey; border: 4px solid; float:center;" ></canvas>
+</div>
+}}}