1

次のような入力文字列があります。 

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

これは基本的に、画面の座標を取得する C# プログラムから取得した入力です。

括弧内の数値は、右下点と左上点の座標であり、長方形を定義します。例えば：

(1280, 1024), (0, 0)

は、最初の画面のサイズが 1280 x 1024 で、左上の点 (0,0) から始まることを意味します。その隣には、左上の点が座標 (1280, 0) にあり、右下の座標が点 (3200, 1080) にある 2 番目の画面があり、それらは長方形を形成します。

私がしなければならないことは、これらの画面を Web アプリケーションで描画することです。2 つの異なる色の四角形だけでは何もできません。さて、少し調査を行ったところ、html5 キャンバスが適している可能性があることがわかりましたが、あなたの意見を聞きたいので、正しい方向に向けてプッシュしてください. jsfiddle の例を挙げていただければ幸いです。

4

1 に答える 1

1

この jsFiddleposition: absoluteで詳しく説明されているように、DIV を で使用することもできます(簡単にするために 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 に答える