主页 / 问题 / 1250647
Accepted
Sevastopol'
Asked:2022-03-02 19:44:18 +0000 UTC2022-03-02 19:44:18 +0000 UTC

坐标（像素）网格（标尺）

  • 772

我对@CbIPoK2513的工作很感兴趣，他使用 CSS 技术创建了一个坐标网格，使用绝对测量单位 - 像素 (px)。

这是他对如何制作自适应坐标网格的答案的第一部分：

body {
  
  --wM: 1px;        /* Толщина линии */
  --xM: 10px;       /* Отступ по ширине */
  --yM: 10px;       /* Отступ по высоте */
  --cM: #ccc;       /* Цвет линии */
  
  --wB: 1px;        /* Толщина линии */
  --xB: 100px;      /* Отступ по ширине */
  --yB: 100px;      /* Отступ по высоте */
  --cB: #333; /* Цвет линии */
  
  background-position: -1px 0;
  background-image:
    linear-gradient(90deg, var(--cB) var(--wB), transparent var(--wB)),
    linear-gradient(0deg, var(--cB) var(--wB), transparent var(--wB)),
    linear-gradient(90deg, var(--cM) var(--wM), transparent var(--wM)),
    linear-gradient(0deg, var(--cM) var(--wM), transparent var(--wM));
  background-size: 
    var(--xB) 100%, 100% var(--yB),
    var(--xM) 100%, 100% var(--yM);
}

#block {
  width: 150px;
  height: 150px;
  border: 1px solid red;
  box-sizing: border-box;
  position: absolute;
  left: 100px;
  top: 50px;
}
<div id="block"></div> <!-- Для примера -->

作者：@CbIPoK2513

为方便起见，在调试和布局网页的各种设计元素时，使用这样的坐标网格作为背景（基板），以及展示这些元素的透明度。例如，@UModeL 贡献者在他的工作（答案）中使用了他自己在位图编辑器中绘制的图像。以下是此类用法的示例：

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: url("https://isstatic.askoverflow.dev/m9NKc.png") 0% 0% no-repeat #eee;
}

问题：是否有其他选项可以使用问号中指示的任何其他方式和技术创建类似的坐标网格？

javascript

3 个回答

  1. 我尝试使用 HTML + CSS 和 JavaScript 创建这样的坐标网格。这就是我所做的：

    // Ширина окна
document.getElementById('width').innerHTML = window.innerWidth;
// Высота окна
document.getElementById('height').innerHTML = window.innerHeight;

// Ширину окна делим на 10 пикселей (размер ячейки) и получаем количество ячеек по горизонтали
var num_w = innerWidth / 10;
// Высоту окна делим на 10 пикселей (размер ячейки) и получаем количество ячеек по вертикали
var num_h = innerHeight / 10;

// Выводим результаты в консоль
console.log('Ш:',num_w,'~','В:',num_h);

// Выводим общее количество ячеек на экран
document.getElementById('pixel').innerHTML = ("<div class='row'>" + "<div class='cell'></div>".repeat(num_w) + "</div>").repeat(num_h);
    /*Общие стили*/
* {box-sizing: border-box; margin: 0; padding: 0;}
body {width: 100%; height: 100vh; overflow: hidden;}

/*Координатная сетка*/
#pixel {display: table;}
.row {display: table-row; height: 10px;}
.cell {display: table-cell; border-right: 1px solid black; border-bottom: 1px solid black; width: 10px; height: 10px;}

/*Окно с размерами*/
.info {position: fixed; top: 50px; left: 0; border: none; background: black; color: white; width: 200px; height: 100px;}
.info p {padding: 7px 7px 0 7px; font-size: 12px; font-family: monospace;}
    <!--Координатная сетка-->
<div id="pixel"></div>

<!--Окно с размерами-->
<div class="info">
<p>Ширина окна: <b id="width"></b>px</p>
<p>Высота окна: <b id="height"></b>px</p>
<p></p>
<p>Ширина этого блока - <b>200</b>px</p>
<p>Высота этого блока - <b>100</b>px</p>
</div>

    但是，这种解决方案有两个缺点：

    1. 如果窗口宽度不是十的倍数，则网格不会完全填满其整个工作区域（水平和垂直）并且不会超出其限制，而是被切断，在右侧和底部留下空白空间. 显然，有必要以某种方式始终向上舍入屏幕尺寸。
    2. 当改变（缩放，risize）窗口的大小时，坐标网格不会重绘。

    我建议最终确定这个解决方案并给出一个独立的答案。也欢迎任何其他个人答案。

    • 4
  2. Best Answer

    JavaScript + 画布：

    function createBackgroundGrid() {
    let context = document.getElementById("background-grid").getContext("2d");
    const LINE_TYPES = 3;
    const beginPos = [0.5, 50.5, 0.5];
    const step     = [10,  100,  100];
    const style    = ["rgb(210,210,210)", "rgb(150,150,150)", "rgb(0,0,0)"];
    
    function handler() {
        context.canvas.width  = document.documentElement.clientWidth;
        context.canvas.height = document.documentElement.clientHeight;
        
        context.fillStyle = "rgb(245, 245, 245)";
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
        
        for (let lineType = 0; lineType < LINE_TYPES; ++lineType)
            for (let dir = 0; dir < 2; ++dir) {
                context.beginPath()
                context.strokeStyle = style[lineType];
                let index = beginPos[lineType];
                if (dir == 0)
                    while (index < context.canvas.width) {
                        context.moveTo(index, 0);
                        context.lineTo(index, context.canvas.height);
                        index += step[lineType];
                    }
                else
                    while (index < context.canvas.height) {
                        context.moveTo(0, index);
                        context.lineTo(context.canvas.width, index);
                        index += step[lineType];
                    }
                context.stroke();
            }
        
        const colShift = 5, rowShift = 10;
        
        context.fillStyle = "blue";
        let col = 0;
        while (col + colShift < context.canvas.width) {
            context.fillText(col, col + colShift, 0 + rowShift);
            col += step[step.length - 1];
        }
        
        context.fillStyle = "red";
        let row = 0 + step[step.length - 1];
        while (row + rowShift < context.canvas.height) {
            context.fillText(row, 0 + colShift, row + rowShift);
            row += step[step.length - 1];
        }
    }
    handler();
    window.addEventListener("resize", () => requestAnimationFrame(handler));
}

createBackgroundGrid();
    #background-grid {
    position: fixed;
    left: 0px;
    top: 0px;
}
    <canvas id = "background-grid"></canvas>

    • 3

  3. 我想补充@Sevastopol 的回答：

    我还要注意这里的第三个减号 - 该部分的每个单元格都是一个元素，并且有很多元素，这会加载页面，这很好。

    我还想补充一点，您可以使用 CSS 以编号的形式向该网格添加“地标”，假设每 100 个像素：

    // Ширину окна делим на 10 пикселей (размер ячейки) и получаем количество ячеек по горизонтали
var num_w = innerWidth / 10;
// Высоту окна делим на 10 пикселей (размер ячейки) и получаем количество ячеек по вертикали
var num_h = innerHeight / 10;

// Выводим общее количество ячеек на экран
document.getElementById('pixel').innerHTML = ("<div class='row'>" + "<div class='cell'></div>".repeat(num_w) + "</div>").repeat(num_h);
    /*Общие стили*/
* {box-sizing: border-box; margin: 0; padding: 0;}
body {width: 100%; height: 100vh; overflow: hidden;}


/*Координатная сетка*/
#pixel {
  display: flex;
  flex-direction: column;
  counter-reset: X, Y;
}

.row {
  display: flex;
  flex-direction: row;
  height: 10px;
}

.cell {
  display: block;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 10px;
  height: 10px;
}


/* "Ориентиры" по высоте */
.row:nth-child(10n+10) {
  counter-increment: Y;
  position: relative;
}

.row:nth-child(10n+10) .cell {
  border-bottom-color: #333;
}

.row:nth-child(10n+10)::before {
  content: counter(Y)'00';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 100%;
}

/* "Ориентиры" по ширине */
.row .cell:nth-child(10n+10) {
  border-right-color: #333;
}

.row:first-child .cell:nth-child(10n+10) {
  counter-increment: X;
  position: relative;
}

.row:first-child .cell:nth-child(10n+10)::before {
  content: counter(X)'00';
  display: inline-block;
  position: absolute;
  left: 100%;
  top: 0;
}

/* блок для теста */
#test {
  width: 150px;
  height: 100px;
  border: 2px solid red;
  position: absolute;
  left: 50px;
  top: 50px;
  box-sizing: border-box;
}
    <!--Координатная сетка-->
<div id="pixel"></div>

<!--Блок для теста--->
<div id="test"></div>

    减去：

    当改变（缩放、增大）窗口大小时，坐标网格不会重绘。

    可以解决：

    function Render() {
  var num_w = innerWidth / 10;
  var num_h = innerHeight / 10;

  document.getElementById('pixel').innerHTML = ('<div class="row">'+'<div class="cell"></div>'.repeat(num_w)+'</div>').repeat(num_h);
} Render();

window.addEventListener('resize', Render);
    /*Общие стили*/
* {box-sizing: border-box; margin: 0; padding: 0;}
body {width: 100%; height: 100vh; overflow: hidden;}


/*Координатная сетка*/
#pixel {
  display: flex;
  flex-direction: column;
  counter-reset: X, Y;
}

.row {
  display: flex;
  flex-direction: row;
  height: 10px;
}

.cell {
  display: block;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  width: 10px;
  height: 10px;
}


/* "Ориентиры" по высоте */
.row:nth-child(10n+10) {
  counter-increment: Y;
  position: relative;
}

.row:nth-child(10n+10) .cell {
  border-bottom-color: #333;
}

.row:nth-child(10n+10)::before {
  content: counter(Y)'00';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 100%;
}

/* "Ориентиры" по ширине */
.row .cell:nth-child(10n+10) {
  border-right-color: #333;
}

.row:first-child .cell:nth-child(10n+10) {
  counter-increment: X;
  position: relative;
}

.row:first-child .cell:nth-child(10n+10)::before {
  content: counter(X)'00';
  display: inline-block;
  position: absolute;
  left: 100%;
  top: 0;
}

/* блок для теста */
#test {
  width: 150px;
  height: 100px;
  border: 2px solid red;
  position: absolute;
  left: 50px;
  top: 50px;
  box-sizing: border-box;
}
    <!--Координатная сетка-->
<div id="pixel"></div>

<!--Блок для теста--->
<div id="test"></div>

    • 2

相关问题