0

今は本当にわかりませんが、簡単な解決策があるかもしれないトリッキーな質問があります。

そのため、私は HTML5 要素に取り組んでおり、明らかに、JavaScript で対話方法論を行っています。

この作業の目的の 1 つは、モバイル デバイス [MD] (iOS または Android、電話またはタブレット) を、別のマシン (ラップトップまたは外部ディスプレイなど) によって提供されるアプリケーションのリモート コントローラーとして使用できるようにすることです。 ）両方とも、異なるスケールの各画面に同じものを表示します。

したがって、キャンバスが 80% 塗りつぶされた (またはこの場合は「消去された」([初期] ピクセルの総数を計算することによって既に持っている) ときにイベントが発生し、各デバイスのカウントが画面から異なるようにしたいサイズ/解像度が異なります。

これはトリッキーな部分です: MD ピクセル数を「スケーリング」し、それをより大きな画面にミラーリングするにはどうすればよいでしょうか?

具体的な対策として、次の例をどのように実装できますか。

MD に幅 300px の線を引きます。簡単にするために、これが MD キャンバスの 10% を表すとします (両方の画面でフルスクリーンになっています)。外部モニター (解像度が高い) でこのイベントをミラーリングする必要がありますが、MD の 10% が「キャンバス領域」の同じ (スケーリングされた) 10% を表すように、適切なスケールで行います。

テキストがわかりにくい場合に備えて、次のコードを残します。

function totalPix(x, y) {
    var total = x * y;
    var objective = (total * 80) / 100;
}

function canvasApp() {

//prevent from scrolling (no bouncing)
document.body.addEventListener('touchmove', function(event){
    event.preventDefault();
}, false);

if(!canvasSupport()) {
    alert("No canvas support on this device!");
    return;
} else if(!socketSupport) {
            alert("No websocket support on this device!");
        } else {

    //create canvas on every load (//TODO)
    var elemDiv = document.getElementById("content");
    var newElem = document.createElement("canvas");
    newElem.setAttribute("id", "frontscreen");
    elemDiv.appendChild(newElem);

    drawScreen();

    function drawScreen() {

        //Setup canvas
        var canvas = document.getElementById("frontscreen");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        totalPix(canvas.width, canvas.height);

        ctx = canvas.getContext("2d");

        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();

        //Foreach touchmove event, send position to server
        canvas.addEventListener('touchmove', function(event) {
            for (var i = 0; i<event.touches.length; i++) {
                var touch = event.touches[i];
                ctx.globalCompositeOperation = "destination-out";
                ctx.fillStyle = "white";
                ctx.beginPath();
                ctx.arc(touch.pageX, touch.pageY, 30, 0, 2*Math.PI, false);
                ctx.fill();
                ctx.stroke();
            }
        }, false); 
    window.onresize = function resizeCanvas() {drawScreen();};
    }
}
}
4

1 に答える 1

1

私の理解が正しければ、<canvas>要素の HTML スタイル プロパティのサイズ プロパティを変更するだけで済みます。たとえば、300 x 300 ピクセルを入力するとします。画面領域の 10% を占めるモニター A の四角形 (大きなモニターです)。次に、モニター A の 2 倍のサイズのモニター B に同じページをロードします (モニターが非常に大きいため、ここではご容赦ください。これは一例です)。当然、画面の領域の 5% しか占有しません。

その 300px が常にすべての画面で同じ割合のサイズを占有するようにしたい場合 (ただし、キャンバスでは 300px のまま)、次のようにすることができます。

var canvas = document.getElementById("mycanvas");
var heightAsPercent = 10;
var widthAsPercent = 10;
canvas.style.height = (heightAsPercent / 100) * screen.height;
canvas.style.width = (widthAsPercent / 100) * screen.width;

こうすることで、モニターの幅が 3000px であろうと 6000px であろうと、キャンバスは常に画面の 10% を占めます。明確にするために非常に冗長な変数名を選択したので、必要に応じて自由に変更してください。

これが機能する理由は、実際の<canvas>データではなく、キャンバスのレンダリング方法にのみ影響するキャンバスの CSS プロパティのみを変更しているためです。私は偶然この小さなトリックに出くわし、なぜこれを行っているのかを理解するまで気が狂いました。今では実際に重宝しています。:)

于 2012-09-05T02:48:09.783 に答える