CSS像素艺术生成器

最近，我读了一篇介绍如何创建带有框阴影的 CSS 像素图的文章。我觉得这个想法很酷——而且我觉得用 JavaScript 制作一个生成器，让你能够使用这种效果从浏览器导出像素图也挺有意思的。在 Codepen 的演示（如下所示）中，你可以绘制你的像素作品，然后点击“生成 CSS”即可生成 CSS 格式的像素图，你可以将其复制到你的网页中。

工作原理

正如文章中所述，我们使用放大的盒子阴影来充当屏幕上的像素。我们可以放大或缩小它们，以使像素画变得更大或更小。
由于每个盒子阴影都是 1px x 1px，因此我们可以创建一个像素画，其中每个“像素”都是 1x1。如果我们想要每个像素都是 20x20，我们只需使用 transform 将其缩放 20 倍即可：

transform: scale(20);

为了达到我们想要的效果，我们使用 JavaScript 创建一个 UI，以便绘制像素艺术作品。UI 的代码可以在 Codepen 上找到，或者你也可以在下面找到：

JavaScript 概述

为了实现这一切，我们必须使用 Javascript。第一步是使用一个简单的循环生成一个像素网格：

let config = {
    width: 40,
    height: 40,
    color: 'white',
    drawing: true,
    eraser: false
}
let events = {
    mousedown: false
}
document.getElementById('pixel-art-area').style.width = `calc(${(0.825 * config.width)}rem + ${(config.height * 2)}px)`;
document.getElementById('pixel-art-area').style.height = `calc(${(0.825 * config.height)}rem + ${(config.width * 2)}px)`;
document.getElementById('pixel-art-options').style.width = `calc(${(0.825 * config.width)}rem + ${(config.height * 2)}px)`;
for(let i = 0; i < config.width; ++i) {
    for(let j = 0; j < config.height; ++j) {
        let createEl = document.createElement('div');
        createEl.classList.add('pixel');
        createEl.setAttribute('data-x-coordinate', j);
        createEl.setAttribute('data-y-coordinate', i);
        document.getElementById('pixel-art-area').appendChild(createEl);
    }
}

这最终会创建大约 40x40 像素，或 1600 个新的 HTML 元素。您可以轻松扩展此尺寸以进行更大规模的实验，但 40x40 像素的尺寸已经足够了。

跟踪用户鼠标移动

然后，我们可以使用三个事件来跟踪用户的鼠标移动：pointerdown、pointermove 和 pointerup。由于我们必须将其应用于所有像素，因此我们使用循环遍历每个像素来添加事件。
然后，如果用户继续按住鼠标，我们可以使用 e.target 来跟踪他们位于哪个像素上，该事件返回当前在 pointermove 时悬停的 HTML 实体。如果他们使用了橡皮擦，我们可以在这里考虑到这一点。

document.querySelectorAll('.pixel').forEach(function(item) {
    item.addEventListener('pointerdown', function(e) {
        if(config.eraser === true) {
            item.setAttribute('data-color', null);
            item.style.background = `#101532`;
        } else {
            item.setAttribute('data-color', config.color);
            item.style.background = `${config.color}`;
        }
        events.mousedown = true;
    });
});
document.getElementById('pixel-art-area').addEventListener('pointermove', function(e) {
    if(config.drawing === true && events.mousedown === true || config.eraser === true && events.mousedown === true) {
        if(e.target.matches('.pixel')) {
            if(config.eraser === true) {
                e.target.setAttribute('data-color', null);
                e.target.style.background = `#101532`;
            } else {
                e.target.setAttribute('data-color', config.color);
                e.target.style.background = `${config.color}`;
            }
        }
    }
});
document.body.addEventListener('pointerup', function(e) {
    events.mousedown = false;
});

最后，我们在颜色和橡皮擦上设置了一些事件，以便我们可以跟踪正在选择的工具和颜色：

[ 'click', 'input' ].forEach(function(item) {
    document.querySelector('.color-picker').addEventListener(item, function() {
        config.color = this.value;
        document.querySelectorAll('.colors > div').forEach(function(i) {
            i.classList.remove('current');
        });
        this.classList.add('current');
        config.eraser = false;
        document.querySelector('.eraser').classList.remove('current');
    });
});

document.querySelectorAll('.colors > div').forEach(function(item) {
    item.addEventListener('click', function(e) {
        document.querySelector('.color-picker').classList.remove('current');
        document.querySelectorAll('.colors > div').forEach(function(i) {
            i.classList.remove('current');
        })
        item.classList.add('current');
        config.eraser = false;
        config.color = `${item.getAttribute('data-color')}`;
        document.querySelector('.eraser').classList.remove('current');
    })
});

结论

当我看到原文时，我觉得仅用 CSS 就能创作像素画真的很酷——但如果能创建一种导出像素画作品的方法就更酷了——而且只需一点点 JavaScript 代码就没那么难了。以下是一些有用的源代码链接：

文章来源：https://dev.to/smpnjn/css-pixel-art-generator-5d1