update

kooriookami · Aug 1, 2023 · 8e68cd6 · 8e68cd6
1 parent 824a528
commit 8e68cd6
Show file tree

Hide file tree

Showing 11 changed files with 260 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,35 @@
 # 游戏王卡片 Yugioh Card
 
 一个使用 Canvas 渲染游戏王卡片的工具。
+
+目前有 5 种卡片：
+
+- 游戏王
+- 超速决斗
+- 游戏王卡背
+- 场地中心卡
+- 游戏王 2 期
+
+## 在线演示
+
+[在线演示](https://kooriookami.github.io/yugioh-card/)
+
+## 使用说明
+
+```npm i yugioh-card```
+
+```js
+  import { YugiohCard } from 'yugioh-card';
+
+  const card = new YugiohCard({
+    view: '', // div 容器
+    data: {
+      ... // 参数见 packages/yugioh-card/src/yugioh-card/index.js => this.defaultData
+    },
+    resourcePath: 'src/assets/yugioh-card', // 静态资源路径
+  });
+```
+
+## 示例代码
+
+[示例代码](src/components/YugiohCard.vue)
diff --git a/docs/assets/blue-eyes-6a425603.jpg b/docs/assets/blue-eyes-6a425603.jpg
diff --git a/docs/assets/blue-eyes-old-7608f0af.jpg b/docs/assets/blue-eyes-old-7608f0af.jpg
diff --git a/docs/assets/field-center-6794f4c2.jpg b/docs/assets/field-center-6794f4c2.jpg
diff --git a/docs/assets/index-4e96d3f9.css b/docs/assets/index-4e96d3f9.css
diff --git a/docs/assets/index-6f0a59f8.js b/docs/assets/index-6f0a59f8.js
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="zh-cmn-Hans">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Yugioh Card</title>
+    <script type="module" crossorigin src="./assets/index-6f0a59f8.js"></script>
+    <link rel="stylesheet" href="./assets/index-4e96d3f9.css">
+  </head>
+  <body>
+    <div id="app"></div>
+
+  </body>
+</html>
diff --git a/docs/vite.svg b/docs/vite.svg
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-cmn-Hans">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>Yugioh Card</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/YugiohCard.vue b/src/components/YugiohCard.vue
@@ -44,6 +44,10 @@
             />
           </el-form-item>
         </el-form>
+
+        <div class="button-group">
+          <el-button type="primary" @click="exportImage">导出图片</el-button>
+        </div>
       </div>
     </div>
   </div>
@@ -108,7 +112,6 @@
         form.data = yugiohDemo;
         Card = YugiohCard;
     }
-    form.data.scale = 0.2;
     cardLeaf.value = new Card({
       view: card.value,
       data: form.data,
@@ -117,6 +120,10 @@
     jsonData.value = form.data;
   }
 
+  function exportImage() {
+    cardLeaf.value.leafer.export('卡片.png');
+  }
+
   watch(() => jsonData.value, () => {
     try {
       form.data = JSON.parse(jsonData.value);
@@ -186,12 +193,11 @@
       .form-main {
         padding: 20px;
 
-        ::v-deep(.el-form) {
-          .el-form-item {
-            .tip {
-              margin-left: 10px;
-              color: var(--normal-color);
-            }
+        .button-group {
+          margin-top: 20px;
+
+          .el-button {
+            width: 100%;
           }
         }
       }

diff --git a/vite.config.js b/vite.config.js
@@ -22,7 +22,7 @@ function editPackageJson() {
 
 const buildLib = {
   lib: {
-    entry: path.resolve(__dirname, 'packages/yugioh-card-card'),
+    entry: path.resolve(__dirname, 'packages/yugioh-card'),
     name: 'YugiohCard',
     fileName: format => {
       if (format === 'es') {
@@ -35,9 +35,9 @@ const buildLib = {
     plugins: [
       copy({
         targets: [
-          { src: 'packages/yugioh-card-card/LICENSE', dest: 'dist' },
-          { src: 'packages/yugioh-card-card/README.md', dest: 'dist' },
-          { src: 'packages/yugioh-card-card/package.json', dest: 'dist' },
+          { src: 'packages/yugioh-card/LICENSE', dest: 'dist' },
+          { src: 'packages/yugioh-card/README.md', dest: 'dist' },
+          { src: 'packages/yugioh-card/package.json', dest: 'dist' },
         ],
         hook: 'writeBundle',
       }),