Question

我正在制作一个基于网格的“绘画”游戏，其中有一个要绘制的区域（一个盒子）。在该盒子中，您还可以绘制其他盒子（通过更改其背景颜色）。我的问题是，如何使主框（绘图区域）恒定，以便例如在将尺寸从16x16更改为32x32时不改变其大小（当然，该区域内的正方形应该缩放以适合新的绘图区域）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Etch a sketch</title>
</head>
<body>
    <div class='main-container'>
        <div class="container"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

const container = document.querySelector('.container');
const mainContainer = document.querySelector('.main-container');
let size = 16;
mainContainer.style.display = 'grid';
mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
container.style.gridColumnStart = '2';
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(' + size + ', 1fr)';
container.style.gridTemplateRows = 'auto';
container.style.gridAutoColumns = '30px';
container.style.gridAutoRows = '30px';

let element;
for(let i = 0; i < size*size; i++) {
    let element = document.createElement('div');
    element.textContent = '';
    element.onmouseenter = function() {
        console.log('over');
        element.style.background = 'black';
    };
    element.style.border = '1px solid black';
    container.appendChild(element);
}

Answer 1

您需要确定大小

container.style.width = '100px'

Answer 2

给您的gridTemplateColumns一个固定的像素值。

container.style.gridTemplateColumns = 'repeat(' + size + ', 20px)';

https://jsfiddle.net/tLy3147s/

编辑：如果您希望绘图区域保持相同的大小并适合正方形比例，则需要根据所需正方形的数量来计算尺寸。现在，更改numSquares，一切都会调整。

const container = document.querySelector('.container');
const mainContainer = document.querySelector('.main-container');
const drawBox = 300;
const numSquares = 16;
let size = drawBox /  numSquares;

mainContainer.style.display = 'grid';
mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
container.style.gridColumnStart = '2';
container.style.width = drawBox + 'px';
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(' + numSquares + ', auto)';
container.style.gridTemplateRows = 'auto';
container.style.gridAutoColumns = size + 'px';
container.style.gridAutoRows = size + 'px';

let element;
for(let i = 0; i < numSquares*numSquares; i++) {
    let element = document.createElement('div');
    element.textContent = '';
    element.onmouseenter = function() {
        console.log('over');
        element.style.background = 'black';
    };
    element.style.border = '1px solid black';
    container.appendChild(element);

https://jsfiddle.net/v4gt2h3f/

如何在Javascript / CSS中制作尺寸固定的盒子？

2 个答案: