0

I have a tricky question that might just have a simple solution, although I trully don't see it now.

So, I've been working around HTML5 element and, obviously, doing the interaction methodology in JavaScript.

One of the objectives of this work is to be able to use a mobile device [MD] (iOS or Android, phone or tablet) as a remote controller for an application that will be served by another machine (eg. a laptop or external display) and both will be showing the same thing on each of the screens on different scales.

So, I wanna have an event occur when the canvas is 80% filled (or in this case, "erased" (which I already have by calculating the total number of [initial] pixels) and each device has a different count since the screen sizes/resolutions are different.

This is the tricky part: How will I be able to "scale" the MD pixel count and mirror that to the bigger screen?

For concrete measures, how will I be able to implement the following example:

I draw a line on the MD that goes for 300px wide, and for simplicity, let's say that this represents 10% of the MD canvas (which on both the screens is in fullscreen). I want the external monitor (which has a higher resolution) to mirror this event but on an appropriate scale so that those 10% on the MD represent the same (scaled) 10% of "canvas real estate"

Just in case the text is too confusing, I'll leave the code bellow:

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 样式属性的 size 属性一样简单。例如，假设您填写 300 x 300 像素。显示器 A 上的正方形，它占据了 10% 的屏幕空间（我知道，大显示器）。然后你在监视器 B 上加载相同的页面，它的大小是监视器 A 的两倍。（真的很大的监视器，请耐心等待。这是一个例子。）自然它只会占用屏幕空间的 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;

这样，画布将始终占据屏幕的 10%，无论显示器宽度是 3000px 还是 6000px。为了清楚起见，我显然选择了非常冗长的变量名称，因此可以根据需要随意修改它们。

这样做的原因是您只是在修改画布的 CSS 属性，这只会影响它的呈现方式，而不是实际<canvas>数据。我偶然发现了这个小技巧，它让我发疯，直到我弄清楚它为什么这样做。现在它实际上派上了用场。:)

于 2012-09-05T02:48:09.783 回答