本期主要通过精灵图实现数字美化，同理，还可以实现精灵图图标（不过现在流行字体图标）

❤️精灵图
精灵图又叫雪碧图，是一种将小图标合成大图标的方式，这样的好处就是，只需要请求一张图片，就可以获取所有图标，是减少服务器压力的一种处理方式

虽然当下字体图标盛行，但对于流量大的站点，依旧会优先选择精灵图，类似【图一】

接下来本文就实现把数字美化为精灵图里的数字

阅读全文

Pluie · 2023-4-17

【补充】再次提醒下哈，背景定位要灵活实现，首先是我图一不是原图，其次标签宽高的变化也会影响

所以建议是根据给出的规则自行调整兼容

暗影王国 · 2023-4-22

数字获取对应样式

现在我们已经有了基础样式，接下来就是根据数字获取对应的样式。具体实现过程如下：

1. 定义一个函数`getSpritePosition(number, width, height)`，其中`number`表示要获取的数字，`width`表示每个数字的宽度，`height`表示每个数字的高度。
2. 在函数内部，先计算出精灵图中每个数字的位置信息（左偏移量、上偏移量、右偏移量、下偏移量），并保存到一个对象中。
3. 根据传入的数字和对象中保存的位置信息，计算出该数字在精灵图中的背景位置（左上角坐标和右下角坐标），并返回这个位置值。

代码实现如下：

```javascript
function getSpritePosition(number, width, height) {
const spritePositions = {
'0': { x: 0, y: 0 },
'1': { x: -width * 1, y: 0 },
'2': { x: -width * 2, y: 0 },
//...其余数字位置信息
};

const position = spritePositions[number];

if (position) {
return `${position.x}px ${position.y}px`;
} else {
return '0px 0px'; //默认为0
}
}
```

这个函数接受三个参数：要获取的数字、每个数字的宽度和高度。然后根据传入的数字，在`spritePositions`对象中查找对应的位置信息，计算出在精灵图中的背景位置，最后返回这个位置值。

❤️使用getSpritePosition函数来渲染数字

现在我们就可以根据获取到的背景位置渲染数字了。代码实现如下：

```html

```

其中`number`是要渲染的数字，`60`和`80`分别是每个数字的宽度和高度。

至此，我们已经成功地将数字美化为精灵图里的数字啦！

Pluie · 2023-4-22

把文章内容用gpt的理解回复一遍似乎没有什么意义嗷

【原创】【设计小舍】美化数字

#楼主# 2023-4-17

评论