# wallet-connect **Repository Path**: crazy_czy/wallet-connect ## Basic Information - **Project Name**: wallet-connect - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-11-12 - **Last Updated**: 2024-11-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README npm install npm run serve 画布在页面中位置固定，画布中需要有固定数量的格子来表示最多7000*3000个格子，根据滚轮缩放控制放大缩小来控制每个格子代表多少个格子，缩放的时候必须让格子始终在画布内，并且可以拖动格子的位置，拖动到边界的时候就不能在拖了，给每个格子中做一个随机颜色标记 个数 倍数 个数 70 10 7 70 70 1 10 开始横向有70个 放大十倍 可见7个 往可见7个里面 每个加了10个子格子 也就是 70个 此时放大了70倍 剩下1个 1个里面有10个 10个里面加10个 个数 70 放大 10倍 7 10 页面一次性渲染2100万条数据太卡，因此我不能一次渲染那么多格子 所以我的方案是： 临界值：（容器可视区域仅有7个格子的宽度时） 初始化用： 70*30 = 2,100 个一级格子 每个一级格子内包含10000条数据，每个一级格子内应该能通过缩放功能的放大，放大到临界值展示10*10 = 100个二级格子 放大到临界值用：2100*100 = 210,000 个二级格子 每个二级格子内包含100 条数据，每个二级格子内应该能通过缩放功能的放大，放大到临界值展示10*10 = 100个三级格子 放大到临界值用：210000*100 = 21,000,000 个三级格子 每个三级格子包含1条数据，用户可以选中该座标并且给它上色 样式布局： 设计一个画布在页面中位置固定，宽度为页面的80%（80%必须是可以调整的变量，后续要防止因为修改宽度造成的bug）， 画布内初始画x轴70个格子，y轴30个格子 合计2100个格子,每个格子表示 每个格子的宽度为：画布宽度/70 每个格子的高度为：每个格子的宽度 每个格子都有自己固定的颜色不会随着后续的操作改变 每个格子都要有文案文案用灰色底白色字 画布的高度为：1个格子的高度*30 画布上下左右居中 一级格子内要写：含10000条数据， 二级格子内要写：含100条数据， 三级格子要写：该格子的（x,y）轴座标。如：第一个格子（0，0） ，第二个格（0，1）以此类推 文案在格子内上下左右居中 缩放能力： 画布内的格子可以整体放大缩小 初始缩放比例为1 放大/缩小步长为1（此处步长必须为变量可调整，因为我不知道这个步长是否应该固定，或者是否应该为1，是否会因为放大比例过大的时候缩放效率变低） 最小缩放比例不能小于初始缩放比例 放大的时候以鼠标所在格子为原点放大 当放大到容器可视区域内横向只有5个格子的宽度时， 开始为鼠标所在格子往上下左右4个方向数5个格子，称之为周遭格子（其中5个格子要设置为可调整的变量，后续因为改变这个变量而导致的其他数，都要随着它的改变而改变） 为周遭盒子添加子格子，子格子默认是x*10个格子（此处必须为变量且可调整，因为我不知道可视区域有几个盒子比较合理） 如果上下左右的周遭格子不足5个时，则不需要添加。 放大后超出画布的部份隐藏，展示滚动条，可以通过拖动滚动条查看超出画布的格子 滚动条滚动时需要判断即将出现的格子的周照格子是否包含子格子，没有包含子格子的要添加子格子 滚动条远离周遭格子的格子需要删除子格子 以此优化性能 拖动能力： 所有的格子都可以在画布上通过长按鼠标移动而整体拖动，或者跟随笔记本触控板两指滑动而拖动 当格子的边缘与画布边缘重合时则不能继续拖动 拖动时与滚动条的判断逻辑一致 问题： 1. 数据加载与呈现： * 2100万条数据是否已经预先生成并存在，还是需要在系统中动态生成？ * 数据呈现的颜色是如何定义的？是否提供了具体的颜色值？ 2. 格子缩放与显示： * 您提到的缩放功能是希望用户可以通过鼠标滚轮进行缩放吗？ * 在不同缩放级别下是否有不同的显示策略，比如文字、颜色等？ 3. 性能考量： * 考虑到浏览器的性能限制，您是否对渲染性能有具体的要求或限制？ * 您提到的“周遭格子”需要动态加载子格子，这个过程是否需要平滑过渡（如动画效果）？ 4. 交互细节： * 是否需要额外的交互功能，例如点击某个格子后的事件（除了上色）？ * 用户如何上色？是通过点击还是其他方式？ * 在缩放和拖动过程中，是否有对异步操作或延迟响应的容忍度？ 5. 多设备适配： * 您是否需要考虑在移动设备上的使用效果（如触摸缩放、拖动）？ 6. 画布调整： * 画布的宽度为页面的80%，这部分是通过CSS媒体查询动态调整，还是通过其他逻辑？ 请您根据以上问题进行解答，这样我能更准确地帮您设计和实现这一功能。 以上回答的回答： 2100条数据根据后端返回的数据来渲染，你可以自己定义后端应该返回什么数据格式来适配你的前端展示与性能方面的需求 数据呈现的颜色与后端返回的颜色为准，目前假定说固定颜色值 缩放功能说通过鼠标滚轮进行的 不同缩放级别下 一级格子内要写：含10000条数据， 二级格子内要写：含100条数据， 三级格子要写：该格子的（x,y）轴座标。如：第一个格子（0，0） ，第二个格（0，1）以此类推 渲染性能要求首次加载在5s内 二次渲染希望控制在2s内 周遭格子需要平滑过渡 最好用户无感知 可以用渐现效果 交互细节，点击格子最好预留弹窗事件 用户可以通过点击一个颜色选择器来为格子添加颜色，或者输入色值添加颜色 缩放和拖动停止后可以有异步卡顿2s时间 不考虑移动端 目前只需要pc端 包括鼠标和笔记本的触控板适配即可 画布宽度我可能会根据最后加入页面的位置进行调整 以上回答如果还有不清晰的地方继续提问 感谢您提供详细的回答，让我对需求有了更清晰的了解。根据您的描述，我可能还需要一些细节信息，以确保开发的方案能够完美契合您的需求： 1. 后端数据格式： * 您提到后端返回的数据格式可以自定义。是否需要包括每条数据的坐标、颜色以及其他可能的属性？例如：json复制[ * {"id": 1, "color": "#FF5733", "coordinate": [0, 0]}, * {"id": 2, "color": "#33FF57", "coordinate": [0, 1]}, * ... * ] * 2. 首次加载和二次渲染： * 您的目标是首次加载在5秒内完成，二次渲染在2秒内完成。是否有特定的技术栈偏好（如Vuex、Vue Router、Axios等）来帮助管理状态和网络请求？ 3. 颜色选择器设计： * 用户可以通过颜色选择器为格子添加颜色，是否有特定的UI设计要求？例如，您是否希望使用现有的颜色选择组件库（如Vue Color）？ 4. 平滑过渡效果： * 对于周遭格子的平滑过渡效果，是否有具体的动画持续时间或效果偏好？例如，渐隐、淡入淡出等。 5. 弹窗设计： * 预留的点击弹窗事件中，弹窗的主要内容是什么？例如，显示当前格子信息、编辑功能等。 如果这些问题都得到解答，我会根据这些信息开始规划和设计代码结构。请随时告诉我更多的细节或偏好，以便于我们一起实现这个复杂的功能。 后端数据格式都是可以调整的，目前总的格子数有2100w条，每个格子都可以填充颜色，按照实际情况来说应该不会一次性返回2100w条 Å入参 { "tiles": [ { "x": 0, "y": 0 } ], "zoom": 0 } { startPoint: ‘0,0’, endPoint:’7,0’, zoom:0 } 返回 { "ok": true, "code": 0, "Date": [ { "x": 8, "y": 8, "color": "#01503F" }, { "x": 56, "y": 8, "color": "#02175D" }, { "x": 88, "y": 24, "color": "#00CBEC" }, { "x": 120, "y": 72, "color": "#003220" }, { "x": 88, "y": 72, "color": "#006951" }, { "x": 88, "y": 120, "color": "#0086DC" }, { "x": 88, "y": 104, "color": "#025804" }, { "x": 120, "y": 24, "color": "#00027B" }, { "x": 8, "y": 88, "color": "#01DD65" }, { "x": 8, "y": 104, "color": "#0188D3" }, { "x": 40, "y": 88, "color": "#003AD6" }, { "x": 24, "y": 24, "color": "#009DCA" }, { "x": 24, "y": 56, "color": "#017583" }, { "x": 104, "y": 72, "color": "#002D87" }, { "x": 88, "y": 8, "color": "#00128A" }, { "x": 72, "y": 88, "color": "#0093B3" }, { "x": 8, "y": 24, "color": "#013440" }, { "x": 8, "y": 40, "color": "#0215AD" }, { "x": 40, "y": 8, "color": "#015856" }, { "x": 24, "y": 72, "color": "#0028D0" }, { "x": 40, "y": 40, "color": "#028649" }, { "x": 24, "y": 104, "color": "#01273E" }, { "x": 72, "y": 24, "color": "#013717" }, { "x": 72, "y": 120, "color": "#0155B1" }, { "x": 88, "y": 56, "color": "#005B8E" }, { "x": 72, "y": 72, "color": "#048FDC" }, { "x": 40, "y": 72, "color": "#007312" }, { "x": 104, "y": 40, "color": "#0017E7" }, { "x": 40, "y": 56, "color": "#00807D" }, { "x": 120, "y": 120, "color": "#0185AA" }, { "x": 8, "y": 120, "color": "#00BC2B" }, { "x": 56, "y": 120, "color": "#00C4E8" }, { "x": 104, "y": 8, "color": "#001B0F" }, { "x": 88, "y": 88, "color": "#006044" }, { "x": 72, "y": 56, "color": "#0030F2" }, { "x": 40, "y": 120, "color": "#008A87" }, { "x": 56, "y": 56, "color": "#01221F" }, { "x": 104, "y": 56, "color": "#0088D4" }, { "x": 56, "y": 88, "color": "#025F7F" }, { "x": 120, "y": 8, "color": "#007255" }, { "x": 104, "y": 88, "color": "#026D1F" }, { "x": 40, "y": 24, "color": "#00F237" }, { "x": 24, "y": 120, "color": "#003437" }, { "x": 72, "y": 104, "color": "#0150AF" }, { "x": 72, "y": 40, "color": "#03E29B" }, { "x": 8, "y": 72, "color": "#01FFBB" }, { "x": 56, "y": 104, "color": "#010FA3" }, { "x": 88, "y": 40, "color": "#001961" }, { "x": 24, "y": 8, "color": "#00838B" }, { "x": 72, "y": 8, "color": "#002D67" }, { "x": 120, "y": 56, "color": "#018708" }, { "x": 56, "y": 40, "color": "#00A7A1" }, { "x": 56, "y": 72, "color": "#03536E" }, { "x": 104, "y": 24, "color": "#00A649" }, { "x": 104, "y": 120, "color": "#001899" }, { "x": 120, "y": 40, "color": "#006D08" }, { "x": 104, "y": 104, "color": "#015DE0" }, { "x": 40, "y": 104, "color": "#0551D5" }, { "x": 8, "y": 56, "color": "#000DFB" }, { "x": 56, "y": 24, "color": "#00D111" }, { "x": 24, "y": 88, "color": "#018A8D" }, { "x": 24, "y": 40, "color": "#010DC7" }, { "x": 120, "y": 104, "color": "#00D8EB" }, { "x": 120, "y": 88, "color": "#00D6CA" } ] } Vuex、Vue Router、Axios 都可以 颜色组件目前已经有了 你这边只需要留个参数让我随时添加颜色值即可 过度效果淡入淡出就可以了 显示当前格子信息 画布初始状态显示70*30个母格子，每个格子里面有10个子格子 格子可以根据鼠标滚轮放大缩小， 放大的时候以鼠标所有格子为中心，显示母格子内的子格子，并且出现滚动条， 缩小的时候显示母格子 每个格子在初始化的时候给一个随机颜色数值，缩放和拖动的时候颜色不变 根据以上需求设计画布缩放比例 缩放的时候必须让格子始终在画布内， 可以拖动画布内的格子，拖动到边界的时候就不能在拖了 缩放的时候，目标缩放对应格子保持在画布中心 70代表700条数据