Question

我有一个棘手的问题可能只是一个简单的解决方案，尽管我现在还没有看到它。

所以，我一直在研究HTML5元素，显然，在JavaScript中使用交互方法。

这项工作的目标之一是能够使用移动设备[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();};
    }
}
}

Answer 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;

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

这样做的原因是你只修改画布的CSS属性，它只影响它的渲染方式，而不影响实际的<canvas>数据。我偶然发现了这个小技巧，它让我疯狂，直到我弄明白为什么这样做。现在它实际上派上用场了。：）

棘手的屏幕大小和缩放（在Javascript上）

1 个答案: