2

私は、ユーザーが携帯電話やタブレットでキャンバスに描画できる WebApp に取り組んでいます。私の問題は、キャンバスのサイズを CSS でパーセンテージ値として指定すると、TouchDraw-Script ( http://www.codeproject.com/Articles/355230/HTML-5-Canvas-A-Simple-Paint-Program -Touch-and-Mou ) が正しく動作しなくなりました。それ以外は完璧なので、これは悲しいことです。

だから私は次のようにスクリプトでキャンバスの幅と高さを直接指定することを考えました:

sigCanvas.setAttribute('width', '320');
sigCanvas.setAttribute('height', '480');

もちろん、さまざまな画面解像度に対処する必要があるため、パーセンテージ値が最適です。コードでパーセンテージ値を使用する方法はありますか? これを引き起こす

sigCanvas.setAttribute('width', '90%');

動かない。前もって感謝します！

4

1 に答える 1

3

わかりましたので、次のようにウィンドウのサイズ変更イベントにアタッチすることで、必要なことを実行できます。

$(window).resize(callbackFunc);

これを機能させるために行った変更を次に示します。

jsFiddle を参照してください

$(document).ready(function () {
    initialize();

    updateSize();
});

$(window).resize(updateSize);

function updateSize() {
    var sigCanvas = document.getElementById("canvasSignature");
    var xOffset = 100;
    var yOffset = 100; // header height
    sigCanvas.setAttribute('width', window.innerWidth - xOffset);
    sigCanvas.setAttribute('height', window.innerHeight - yOffset);
}

xOffsetとはyOffsetニーズに合わせてカスタマイズできます。ウィンドウの幅と高さを差し引く必要があります。そうしないと、キャンバスがページからはみ出してしまいます。また、サイズが正しいサイズに調整されるように、ページの読み込み時に必ず実行してください。

于 2013-03-05T10:00:25.420 に答える