与main的比较

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+text-ex/

README.md

@@ -1,3 +1,80 @@
-# 中国制霸补全
+# 前端组第一次培训作业
+
+#### 前言：其实我在几天前已经写完了，但苦于颜色填充模块使用体验差，所以这几天就一直在修bug（悲）
+
+## 功能实现
+
+### 一.初始页面
+
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/a5ee59ed-dab1-4ee2-8890-abbb54dc8e74)
+
+
+### 二.生成图片
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/d0e62f91-82f4-4ded-8b5c-fd910de4e4fa)
+
+### 三.i18n
+下面是在简体中文和English时的界面
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/9ec3ae99-1f95-410c-bcfc-37507a844dcb)
+
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/091e8791-acdb-442d-a8af-80581a6b7d34)
+代码
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/8e9c250a-3232-4a7d-af04-6ff8834e1cb8)
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/f7315c5d-de4e-4f7a-b5cc-5f84096807dd)
+代码的写法我参考了i18next文档与考核文档中给出的github中的代码，还有一点是在csdn上看来的
+
+### 三.颜色填充
+这一块我是最后动手的，也花了很多时间，用了很多方法，但是使用起来很差，并且有写方法还有bug
+方法一（使用体验差）
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/1ee3f2c9-0e16-433f-bca1-38707e053625)
+方法二（这个有bug,但我还是想将它放上来，请大家能够一起帮我找找bug并修改）
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/451465e2-e068-40ac-9232-51fb1a4e3e51)
+
+## 已知问题
+### 一.颜色填充
+如果使用方法一，其需要点击我想填充的颜色之后再点击地区才能完成颜色填充
+如果使用方法二，所有被点击过的地区都会执行新的指令，也就是之前已被点击过并完成颜色填充时也会发生变化
+
+### 二.i18n
+当所有text标签字体font-size为30px时
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/cd4236df-0ac9-452d-a560-a952146d5f8a)
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/56b80c22-7a7a-47e1-ae5c-09962313a1a6)
+在使用english为页面语言时，“#等级”模块会出现如下的问题
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/3984d6f2-c5bf-4f27-b181-d159fbc15091)
+
+
+
+
+
+
+
+
+
+
+我检查了很久也没发现css和style里有什么问题，所以就改了这一块的字体大小
+
+
+
+
+
+
+![image](https://github.com/NCUHOME-Y/test-ex/assets/146162650/2602b2ce-fbdc-4604-9811-9f3211a535ae)
+
+### 三.pull request
+我在使我的分支能够create pull request使用了git pull origin main --allow-unrelated-histories命令符，
+所以我的分支会出现一些奇奇怪怪的东西，index文件夹里才是我的文件，以及package.json和package-lock.json
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-2023NCUHOME 新生最终考核项目

index/i18n.js

@@ -0,0 +1,46 @@
+//引入模块
+const i18next = window.i18next
+const i18nextBrowserLanguageDetector = window.i18nextBrowserLanguageDetector
+const jqueryI18next = window.jqueryI18next
+const TranslateBtn = document.getElementById("languageSwitcher")
+const everyElements = document.querySelectorAll("[data-i18n]")
+
+const updateContent = () => {
+    $('[data-i18n]').localize()
+}
+
+
+$(document).ready(async () => {
+    let response = await axios.get(`./i18n.json`)
+    let data = response.data
+    i18next
+        .init(
+            {
+                fallbackLng: '简体中文',
+                debug: true,
+                saveMissing: true,
+                resources: data
+            },
+            function (err, t) {
+                if (err) {
+                    console.error('Error initializing i18next:', err)
+                    return
+                }
+                jqueryI18next.init(i18next, $, { useOptionsAttr: true })
+                updateContent()
+            })
+
+
+    $('#languageSwitcher').change(function () {
+        var lang = $(this).val()
+        console.log(lang)
+        i18next.changeLanguage(lang, function (err, t) {
+            if (err) {
+                console.error('Error changing language:', err)
+                return
+            }
+            updateContent()
+        });
+    });
+})
+

index/i18n.json

@@ -0,0 +1,74 @@
+{
+  "English": {
+    "translation": {
+      "areaOpi": {
+        "title": "Area",
+        "data_level_5": "Lived Here",
+        "data_level_4": "Stayed Here",
+        "data_level_3": "Visited Here",
+        "data_level_2": "Stopped Here",
+        "data_level_1": "Passed Here",
+        "data_level_0": "Never Been Here"
+      },
+      "svg": {
+        "title": "China ex",
+        "sign": "By NCUHOME",
+        "score": "Score:",
+        "level_0": "Never Been Here",
+        "level_1": "Passed Here",
+        "level_2": "Stopped Here",
+        "level_3": "Visited Here",
+        "level_4": "Stayed Here",
+        "level_5": "Lived Here"
+      },
+      "imgModal": {
+        "title": "Generate Image",
+        "width": "Width",
+        "height": "Height",
+        "name": "Image Name",
+        "submit": "Generate Image",
+        "cancel": "Cancel"
+      },
+      "footer": {
+        "img": "Generate Image"
+      }
+    }
+  },
+  "简体中文": {
+    "translation": {
+      "areaOpi": {
+        "title": "地区",
+        "data_level_5": "居住过",
+        "data_level_4": "住宿过",
+        "data_level_3": "游玩过",
+        "data_level_2": "中转过",
+        "data_level_1": "路过",
+        "data_level_0": "没去过",
+        "pt": "分"
+      },
+      "svg": {
+        "title": "中国制霸",
+        "sign": "家园工作室出品",
+        "score": "分数:",
+        "level_0": "没去过",
+        "level_1": "路过1",
+        "level_2": "中转2",
+        "level_3": "游玩3",
+        "level_4": "住宿4",
+        "level_5": "居住5"
+      },
+      "imgModal": {
+        "title": "生成图片",
+        "width": "宽度",
+        "height": "高度",
+        "name": "图片名称",
+        "submit": "确认生成图片",
+        "cancel": "取消"
+      },
+      "footer": {
+        "img": "生成图片",
+        "lang": "设置语言"
+      }
+    }
+  }
+}

index/img.js

@@ -0,0 +1,45 @@
+/**
+ * @description: 调用该函数，实现svg转img并输出
+ * @param {Number} width 
+ * @param {Number} height 
+ * @param {String} imgName 
+ */
+const svgToImg = (width, height, imgName) => {
+  const svg = document.querySelector('svg')
+  const svgData = svg.outerHTML
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const ctx = canvas.getContext('2d')
+  const img = document.createElement('img')
+  img.setAttribute('src', 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgData))))
+  img.onload = () => {
+    ctx.drawImage(img, 0, 0)
+    const imgData = canvas.toDataURL('image/png')
+    const a = document.createElement('a')
+    a.setAttribute('href', imgData)
+    a.setAttribute('download', imgName)
+    a.click()
+  }
+}
+
+const clickBtn = document.getElementById("imgBtn")
+const clickOutPutBtn = document.getElementById("btnOutputImg")
+const setWidth = document.getElementById("imgWidth")
+const setHeight = document.getElementById("imgHeight")
+const setName = document.getElementById("imgName")
+const closeModal = document.getElementById("btnCloseModal")
+clickBtn.addEventListener("click", () => {
+  clickOutPutModal.style.display = "flex"
+
+})
+
+clickOutPutBtn.addEventListener("click",() => {
+  svgToImg(setWidth.value,setHeight.value,setName.value)
+})
+
+closeModal.addEventListener("click",() => {
+  clickOutPutModal.style.display = "none"
+})
+
+