在 Web 应用程序中绘制矩形以显示窗口中的屏幕位置答案

【问题标题】：Drawing rectangles in web application that show screen position from windows在 Web 应用程序中绘制矩形以显示窗口中的屏幕位置
【发布时间】：2011-09-30 17:11:48
【问题描述】：

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

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

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

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

(1280, 1024), (0, 0)

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

我要做的就是在 Web 应用程序中绘制这些屏幕 - 没有什么花哨的，只是两个不同颜色的矩形会做。现在，我做了一些研究，发现 html5 画布可能是要走的路，但我想听听您的想法，也许可以推动我朝着正确的方向前进。如果您能提供一些 jsfiddle 示例，将不胜感激！

【问题讨论】：

你需要在矩形内部画一些东西吗？如果你不这样做，使用带有position:absolute 的 DIV 应该可以做到。
@bfavaretto：实际上不，矩形中不会有任何内容。我想知道你是否可以分享一些例子来说明你的意思？因为，我认为这种方式（使用 div）会更难 - 嗯，也许我错了 - thx，会尝试。
看看this jsFiddle
@bfavaretto：谢谢，把它放在评论中，这样我就可以将其标记为正确答案。
好的，把我的cmets编译为正确答案！

标签： javascript html css html5-canvas

【解决方案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');
}

【讨论】：