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

Popular posts from this blog

iphone - Dismissing a UIAlertView -

c# - Can ProtoBuf-Net deserialize to a flat class? -

javascript - Change element in each JQuery tab to dynamically generated colors -