Area di disegno HTML5 ridimensionata al genitore

Voglio ridimensionare l'elemento canvas in modo che se si adatti al suo genitore, sia che si tratti di <body> ("schermo intero") o di alcuni <div> per esempio. Questo è il mio tentativo:Area di disegno HTML5 ridimensionata al genitore

// called at each frame 
function update() { 
    var canvasNode = document.getElementById('mycanvas'); 
    canvasNode.width = canvasNode.parentNode.clientWidth; 
    canvasNode.height = canvasNode.parentNode.clientHeight; 
}

Per qualche motivo, la tela non smette di crescere! Forse client* non sono i parametri giusti?

vedere il codice in azione qui: http://jsfiddle.net/ARKVD/24/

fonte

2011-12-24 Giovanni Funchal

Se la tela è alta 155 px, il corpo è alto 160 px, il che fa sì che la tela continui a crescere di '5px' ogni volta (il corpo sembra essere' 5px' avanti ogni volta che la tela cresce). Non ho idea del perché, dato che hai impostato tutti i margini/paddings su '0px'. (Questo è su Chrome.) – pimvdb

Grazie, su Linux/Firefox, vedo offset 4px o 3px (a seconda che la mia finestra sia ingrandita o meno) ... annoying! –

La cosa strana è che se la tela è impostata su un'altezza di '0px', il corpo è '20px' alto. Il corpo crolla solo a '0px' se la tela viene effettivamente rimossa. – pimvdb

La cosa più semplice da fare è tenere sempre la tela nella sua div.

L'unica cosa che sarà mai in questo div è la tela.

Quindi è possibile utilizzare il CSS per ridimensionare il div come desiderato. Lo vuoi grande come il corpo? Dare il div width: 100%.

allora si può sempre fare buon diritto:

canvas.width = theDiv.clientWidth; 
canvas.height = theDiv.clientHeight;

Se si esegue questa operazione non dovrete preoccuparvi di problemi strani che si sta attualmente affrontando quando il corpo è la controllante diretta del div.

fonte

2011-12-24 19:01:30

Puoi spiegare perché non funziona con il corpo (cioè perché hai bisogno DIV)? –

Se vuoi che sia grande quanto il corpo con un div lo rende più facile perché puoi specificare larghezza e altezza con CSS (come larghezza del 100% e così via). La larghezza del 100% non lo rende necessariamente grande quanto il 'clientWidth 'del corpo. Invece lo rende grande quanto il "blocco contenitore" come viene chiamato nelle specifiche CSS, che è diverso (più piccolo) del clientWidth e Altezza del corpo. Inizia con questo: http://jsfiddle.net/9FyNZ/ –

Grazie! Questo ha risolto un problema molto fastidioso che stavo avendo. – Brad

Ho riscontrato lo stesso problema e l'unico modo in cui sono riuscito a ovviare è stato impostare l'altezza della tela su parentHeight - 1. Si stava utilizzando CEF. In this violino ho dovuto impostare a parentHeight - 5.

canvasNode.height = div.clientHeight - 5;

fonte

2014-09-29 10:04:45 Sam

È possibile risolvere il problema rompendo la dipendenza circolare tra il nodo genitore e il nodo figlio. L'allocazione delle dimensioni degli elementi DOM deve essere propagata solo dall'alto verso il basso (dal genitore al figlio). È possibile assicurarsi che l'elemento figlio (tela) non influenza la dimensione del genitore impostando

canvasNode.style.position = 'absolute';

Questo lo mette nel proprio flusso di documento che è indipendente dal genitore.

fonte

2017-07-25 21:19:05 Imran

ho scoperto che l'approccio più pulita è semplicemente "ricordare" l'elemento canvas quanto grande dovrebbe essere su di ridimensionamento:

window.onresize = function() { 
    canvas.style.width = '100%'; 
    canvas.height = canvas.width * .75; 
}

L'impostazione in questo caso l'altezza è lì per mantenere semplicemente un 4 : 3 rapporto. Ovviamente puoi farlo anche al 100% se lo desideri.

fonte

2017-11-09 23:24:07

Area di disegno HTML5 ridimensionata al genitore

risposta

Problemi correlati