棘手的屏幕尺寸和縮放比例（使用Javascript）

我有一個棘手的問題，可能只是一個簡單的解決方案，雖然我現在真的沒有看到它。棘手的屏幕尺寸和縮放比例（使用Javascript）

所以，我一直在圍繞着HTML5元素，顯然是在JavaScript中進行交互方法。

這項工作的目標之一是能夠使用移動設備[MD]（iOS或Android，手機或平板電腦）作爲將由另一臺機器提供服務的應用程序（例如a筆記本電腦或外接顯示器），兩者將在不同尺度的每個屏幕上顯示相同的內容。因此，當畫布填滿80％（或者在這種情況下，「擦除」（我已經通過計算[初始]像素的總數）並且每個設備具有不同的顏色時，我想要發生事件算上因爲屏幕尺寸/分辨率不同

這是棘手的部分。我將如何能夠「規模」的MD像素數和鏡像該到更大的屏幕

採取具體措施，怎麼樣？我將能夠實現以下示例：

我在MD上畫了一條線，寬度爲300px，爲了簡單起見，假設這代表MD畫布的10％（兩個屏幕都是全屏顯示）。我希望外部顯示器（具有更高分辨率）能夠反映此事件，但尺寸適當，以便MD上的這些10％代表「縮放比例」的10％「畫布不動產」

Just in案文是太混亂了，我會留下波紋管代碼：

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();}; 
    } 
} 
}

來源

2012-09-05 Zed_Blade

如果我理解正確的話，這是因爲改變你的<canvas>元素的HTML樣式屬性的大小屬性一樣簡單。例如，假設您填寫300 x 300像素。顯示器A佔據屏幕房地產的10％（我知道，大屏幕）。然後你在顯示器B上加載相同的頁面，這是顯示器A的兩倍大小。（真的是真的很大的顯示器，只是在這裏忍着，這是一個例子）。當然，它只佔據屏幕房地產的5％。

如果你想要的是300到始終佔據所有屏幕尺寸相同的百分比（但仍是在畫布上300像素），你可以做這樣的事情：

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;

通過這種方式，將Canvas 總是佔據屏幕的10％，無論顯示器寬度是3000px還是6000px。我明顯選擇了非常詳細的變量名稱，因此可以根據需要隨意修改它們。

其原因是您只修改畫布的CSS屬性，它隻影響它的呈現方式，而不是實際的<canvas>數據。我偶然發現了這個小竅門，它讓我瘋狂，直到我明白爲什麼它這樣做。現在它實際上派上用場了。 :)

來源

2012-09-05 02:48:09

我不需要畫布來縮放，因爲它已經做了任何屏幕尺寸。我想要的是在screenA上繪製的每個「對象」都被縮放並轉換爲screenB。請參閱[鏈接]上的示例（https://dl.dropbox.com/u/3543277/raspadinha/index.html），並將其用於移動設備和PC瀏覽器，以查看是否有幫助:) –

棘手的屏幕尺寸和縮放比例（使用Javascript）

回答

相關問題