javascript - 在 Web 应用程序中绘制矩形以显示来自窗口的屏幕位置

Question

我有一个这样的输入字符串:

{ (3200, 1080), (1280, 0) ; (1280, 1024), (0, 0) }

这基本上是我从我的 c# 程序中获得的输入，它采用我的屏幕坐标。

括号中的数字是右下角和左上角的坐标，定义一个矩形。例如:

(1280, 1024), (0, 0) 

表示第一个屏幕的尺寸为 1280 x 1024，并从左上角点 (0,0) 开始。旁边是第二个屏幕，左上角坐标为 (1280, 0)，右下角坐标为 (3200, 1080) - 它们形成一个矩形。

我要做的是在网络应用程序中绘制这些屏幕 - 没有什么特别的，只是两个不同颜色的矩形就可以了。现在，我做了一些研究，发现 html5 canvas 可能是可行的方法，但我想听听您的想法，也许能插入我朝着正确的方向前进。如果您能提供一些 jsfiddle 示例，我们将不胜感激!

Answer 1

您可以只使用带有 position: absolute 的 DIV，详见 this jsFiddle (为了简单起见使用 jQuery，但不用 jQuery 也可以轻松完成同样的操作)。

编辑(如果由于某种原因你的 jsfiddle 被删除，我只是添加了代码!):

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');
}