0

ページにキャンバスといくつかのタブがあります: http://www.taffatech.com/Paint.html 現在、これらは手動サイズに設定されています。画面サイズに基づいてサイズを変更する方法を知りたいのですが、私の場合は問題なく動作しますが、小さな画面ではトリミングされます。

キャンバスを幅の 2/3、タブを 1/3、高さを画面全体の高さにしたいと思います。これは可能で、これを行う最善の方法は何ですか? CSS、div? jquery? jqueryを使用してキャンバスを画面全体のサイズにする方法は知っていますが、これが正しい方法かどうかわからないので、ここに尋ねに来ました! ありがとう！

4

1 に答える 1

0

これを試すことができます：

$("#canvas").css('width', 70 + '%');
$("#canvas").css('height', 100 + '%');
$("#toolbox").css('width', 30 + '%');
$("#toolbox").css('height', 100 + '%');

それを JavaScript コードの初期化関数にコピーします。必要に応じて、ウィンドウの「サイズ変更」イベント ハンドラを追加できます。

$(window).resize(function() {
    $("#canvas").css('width', 70 + '%');
    $("#canvas").css('height', 100 + '%');
    $("#toolbox").css('width', 30 + '%');
    $("#toolbox").css('height', 100 + '%');
});

ここで、「#canvas」と「#toolbox」はそれぞれキャンバスとツールボックス/ペインの ID です。

お役に立てば幸いです。

于 2013-12-30T00:26:15.500 に答える