Как сделать окно холста, изменяемое пользователем, также уменьшает или уменьшает размер окна браузера

Итак, на данный момент у меня есть холст, который может быть изменен пользователем. Теперь мне интересно, можно ли уменьшить масштаб холста до окна браузера при его изменении размера и по-прежнему позволить пользователю изменять размер холста, не нажимая на холст за пределами окна браузера. У меня есть код, который позволяет сделать это с помощью этого https://gist.github.com/zachstronaut/1184900, но есть две вещи, которые происходят: 1. Холст остановит изменение размера до определенной точки. 2. При изменении размера холста в небольших окнах браузера он иногда выходит за пределы окна браузера, и единственный способ вернуть его в масштабе с помощью браузера - немного изменить размер окна браузера. Я по-прежнему новичок в Javascript, поэтому я немного незнакома с тем, как работают некоторые вещи, или то, что я пытаюсь сделать, даже возможно. Заранее спасибо.Как сделать окно холста, изменяемое пользователем, также уменьшает или уменьшает размер окна браузера

<!doctype html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 

    <div class="hxw"> 
       <div class="height"> 
        <h3>Height</h3> 
         <select name="Height" id='height'> 
          <option value="100">100</option> 
          <option value="200">200</option> 
          <option value="300">300</option> 
          <option value="400">400</option> 
          <option value="500">500</option> 
          <option value="600">600</option> 
         </select> 
       </div> 
       <div class=width> 
        <h3>Width</h3> 
         <select name="Width" id='width'> 
          <option value="100">8.0</option> 
          <option value="200">8.5'</option> 
          <option value="300">9.0'</option> 
          <option value="400">9.5'</option> 
          <option value="960">10.0'</option> 
          <option value="1008">10.5'</option> 
         </select> 
       </div> 
      </div> 

    <div class = "container"> 
     <canvas id="canvas" style=" border: 1px solid #000;"> 
      Your browser does not support canvas, please upgrade your browser. 
     </canvas> 
    </div> 

<script> 
document.getElementById("canvas").style.marginLeft = "auto"; 
document.getElementById("canvas").style.marginRight = "auto"; 
canvas.style.display= 'block'; 
canvas.width = 100; 
canvas.height = 50; 
drawScreen(); 

formElement = document.getElementById("height"); 
formElement.addEventListener('change', heightChanged, true); 

formElement = document.getElementById("width"); 
formElement.addEventListener('change', widthChanged, false); 

function widthChanged(e) { 
    var target = e.target; 
    canvas.width = target.value; 
    drawScreen(); 
} 

function heightChanged(e) { 
    var target = e.target; 
    canvas.height = target.value; 
    drawScreen(); 
} 

function drawScreen() { 
} 


window.addEventListener(
'load', 
function() { 
var canvas = document.getElementsByTagName('canvas')[0]; 

fullscreenify(canvas); 
}, 
false 
); 

function fullscreenify(canvas) { 
var style = canvas.getAttribute('style') || ''; 
window.addEventListener('resize', function() {resize(canvas);}, false); 

resize(canvas); 


function resize(canvas) { 
var scale = {x: 1, y: 1}; 
scale.x = (window.innerWidth - 40)/canvas.width; 
scale.y = (window.innerHeight - 40)/canvas.height; 
if (scale.x < 1 || scale.y < 1) { 
scale = '1, 1'; 
} else if (scale.x < scale.y) { 
scale = scale.x + ', ' + scale.x; 
} else { 
scale = scale.y + ', ' + scale.y; 
} 
canvas.setAttribute('style', style + ' ' + '-ms-transform-origin: center top; -webkit-transform-origin: center top; -moz-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; -ms-transform: scale(' + scale + '); -webkit-transform: scale3d(' + scale + ', 1); -moz-transform: scale(' + scale + '); -o-transform: scale(' + scale + '); transform: scale(' + scale + ');'); 
} 
} 




</script> 
</body> 
</html>

источник

2015-01-19 Xavier Gilmore

Ну, я изменить положение холста к фиксированной и изменения размера() функция I вычет 133, потому что мой монитор 1920 * 1080, но в браузере 1920 * 947. Возможно, это работает.

<div class = "container"> 
<canvas id="canvas" style=" border: 1px solid #000;position: fixed ;top: 10;left: 10;z-index:-1"> 
</canvas> 
</div> 

<script> 
function widthChanged(e) { 
    var target = e.target; 
    canvas.width = target.value; 
//add the resize function every browser size change 
    fullscreenify(canvas); 
} 

function heightChanged(e) { 
    var target = e.target; 
    canvas.height = target.value; 
//add the resize function every browser size change 
    fullscreenify(canvas); 
} 

function resize(canvas) { 
var scale = {x: 1, y: 1}; 
scale.x = (window.innerWidth)/canvas.width; 
scale.y = (window.innerHeight - 133)/canvas.height; 
//I delete the data<1 Because your size is too big so I change that 
if (scale.x < scale.y) { 
scale = scale.x + ', ' + scale.x; 
} else { 
scale = scale.y + ', ' + scale.y; 
} 

canvas.setAttribute('style', style + ' ' + '-ms-transform-origin: center top; -webkit-transform-origin: center top; -moz-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; -ms-transform: scale(' + scale + '); -webkit-transform: scale3d(' + scale + ', 1); -moz-transform: scale(' + scale + '); -o-transform: scale(' + scale + '); transform: scale(' + scale + ');'); 

} 
</script>

источник

2015-01-19 21:42:32

Этот метод не слишком хорошо работает. Спасибо хоть. –

Как сделать окно холста, изменяемое пользователем, также уменьшает или уменьшает размер окна браузера

ответ

Смежные вопросы