Question

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

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

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

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

(1280, 1024), (0, 0)

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

我要做的就是在网络应用程序中绘制这些屏幕 - 没有什么可以只看到两个不同颜色的矩形。现在，我做了一些研究，看到html5画布可能是要走的路，但我想听听你的想法，也许会让我朝着正确的方向前进。如果你能给出一些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');
}

在Web应用程序中绘制矩形，从窗口显示屏幕位置

1 个答案: