83 lines
2.6 KiB
Markdown
83 lines
2.6 KiB
Markdown
# 添加规则方格子四个角点
|
||
|
||
## 实现目标
|
||
|
||
在画布上添加有规则的点，类似方格子但只展示四个角上的点，支持缩放、拖动交互，并适配亮色和暗色主题。
|
||
|
||
## 实现步骤
|
||
|
||
### 1. 修改.scene-container的背景样式
|
||
|
||
* 将当前的随机装饰点替换为规则的方格子四个角点
|
||
|
||
* 使用CSS radial-gradient创建点效果
|
||
|
||
* 通过多个渐变层组合实现四个角的点
|
||
|
||
* 设置合适的background-size控制方格大小
|
||
|
||
### 2. 适配亮色主题
|
||
|
||
* 为亮色主题设置合适的点颜色和大小
|
||
|
||
* 确保点与背景对比度适中
|
||
|
||
### 3. 适配暗色主题
|
||
|
||
* 为暗色主题单独设置点颜色
|
||
|
||
* 保持与暗色背景的良好对比度
|
||
|
||
### 4. 确保交互兼容性
|
||
|
||
* 点网格应随画布缩放和拖动保持正确位置
|
||
|
||
* 不影响现有卡片元素的交互
|
||
|
||
## 技术实现
|
||
|
||
通过修改CSS样式，使用多个radial-gradient层和background-position属性来创建规则的方格子四个角点。具体实现如下：
|
||
|
||
```css
|
||
/* 亮色主题 */
|
||
.scene-container {
|
||
background:
|
||
/* 背景渐变 */
|
||
radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(243, 244, 246, 0.9) 100%),
|
||
/* 方格子四个角点 */
|
||
radial-gradient(circle at 0 0, rgba(107, 70, 193, 0.3) 2px, transparent 3px),
|
||
radial-gradient(circle at 100% 0, rgba(107, 70, 193, 0.3) 2px, transparent 3px),
|
||
radial-gradient(circle at 0 100%, rgba(107, 70, 193, 0.3) 2px, transparent 3px),
|
||
radial-gradient(circle at 100% 100%, rgba(107, 70, 193, 0.3) 2px, transparent 3px);
|
||
background-size: 100% 100%, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
|
||
background-position: center center, 0 0, 0 0, 0 0, 0 0;
|
||
}
|
||
|
||
/* 暗色主题 */
|
||
html.dark .scene-container {
|
||
background:
|
||
/* 背景渐变 */
|
||
radial-gradient(ellipse at center, rgba(31, 41, 55, 0.9) 0%, rgba(17, 24, 39, 0.9) 100%),
|
||
/* 方格子四个角点 */
|
||
radial-gradient(circle at 0 0, rgba(167, 139, 250, 0.4) 2px, transparent 3px),
|
||
radial-gradient(circle at 100% 0, rgba(167, 139, 250, 0.4) 2px, transparent 3px),
|
||
radial-gradient(circle at 0 100%, rgba(167, 139, 250, 0.4) 2px, transparent 3px),
|
||
radial-gradient(circle at 100% 100%, rgba(167, 139, 250, 0.4) 2px, transparent 3px);
|
||
background-size: 100% 100%, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
|
||
background-position: center center, 0 0, 0 0, 0 0, 0 0;
|
||
}
|
||
```
|
||
|
||
## 预期效果
|
||
|
||
* 画布上出现规则排列的方格子，每个方格的四个角上有一个点
|
||
|
||
* 方格大小为50px x 50px，点大小为2px
|
||
|
||
* 点的颜色适配当前主题
|
||
|
||
* 缩放和拖动画布时，点网格保持正确的位置关系
|
||
|
||
* 不影响现有卡片元素的交互
|
||
|