javascript - Drawing rectangles in web application that show screen position from windows -
javascript - Drawing rectangles in web application that show screen position from windows -
i have input string this:
{ (3200, 1080), (1280, 0) ; (1280, 1024), (0, 0) } which input c# programme takes coordinates of screens.
the numbers in brackets coordinates of lower right , upper left point , define rectangle. example:
(1280, 1024), (0, 0) means first screen has dimensions 1280 x 1024 , starts in upper left point (0,0). next sec screen upper left point @ coordinate (1280, 0) , lower right coordinate @ point (3200, 1080) - , form rectangle.
what have draw these screen in web application - nil fancy 2 different colored rectangles do. now, did little research , saw html5 canvas might way go, want hear think , maybe give me force in right direction. if give jsfiddle illustration appreciated!
you utilize divs position: absolute, detailed on this jsfiddle (jquery used sake of simplicity, same can accomplished without jquery).
edit (i added code if reason jsfiddle gets deleted!):
html:
<div id="screens"> <div id="screen0" class="screen"></div> <div id="screen1" class="screen"></div> </div> css:
#screens { position: relative } .screen {position: absolute } #screen0 { background: blue; } #screen1 { background: green; } js:
var originalscreens = [ { position: [0,0], dimensions: [1280,1024] }, { position: [1280,0], dimensions: [1090,1080] } ]; var scale = 0.1; for(var i=0; i<originalscreens.length; i++) { $('#screen' + i).css('left', (originalscreens[i].position[0] * scale) + 'px'); $('#screen' + i).css('top', (originalscreens[i].position[1] * scale) + 'px'); $('#screen' + i).css('width', (originalscreens[i].dimensions[0] * scale) + 'px'); $('#screen' + i).css('height', (originalscreens[i].dimensions[1] * scale) + 'px'); } javascript html css html5-canvas
Comments
Post a Comment