1

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

{ (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 示例，将不胜感激！

4

1 回答 1

1

您可以只使用带有 的 DIV position: absolute，如本 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');
}
于 2011-07-07T19:35:42.633 回答