游戏王卡片 Yugioh Card

前言

我曾在 3 年前制作了一个游戏王卡片生成器的网站，当时用的技术是 dom + css 渲染卡片。在不同浏览器渲染的结果差异挺大（需要精确到像素级）。其实一开始我有考虑过 Canvas 去实现，奈何当时遇到的问题比较多，也没啥经验。文本渲染需要处理非常复杂的情况，最终还是觉得 dom 实现比较简单。

3 年过去了，我想应该考虑用 Canvas 重构一下，就当练练手。正巧遇到了 Leafer UI 这个库，让我有了行动力。

项目展示

左侧是卡片，右侧是调试工具。直接修改右侧的 JSON 数据就能动态渲染了。具体的数据内容不是本文的重点，感兴趣的小伙伴可以自行研究。

开发流程

我设计每个卡片拥有自己的属性，且能够动态改变卡片内容，于是就采用了面向对象的思想，使用类的实现方式。

目前项目包含 5 种卡片，每个卡片都有基础属性与方法是重复的，重复地复制粘贴不是一个好方法，我自然地想到了类的继承。我定义了一个 Card 类，每个卡片都需要继承它，它基础结构如下：

class Card {
  constructor(data = {}) {

    this.leafer = null; // Leafer 实例
    this.cardWidth = 100; // 卡片宽度，需要重写
    this.cardHeight = 100;  // 卡片高度，需要重写
    this.key = 0; // 类似与 vue 中的 key，用于强制重新渲染
    this.data = {}; // 卡片数据
    this.defaultData = {}; // 默认卡片数据，需要重写
    
    this.view = data.view; // 渲染容器
    this.resourcePath = data.resourcePath; // 静态资源路径
    
    loadCSS(); // 加载字体样式
  }
  setData() { ... } // 更新数据
  loadFont() { ... } // 加载字体
  initData() { ... } // 初始化数据
  initLeafer() { ... } // 初始化 Leafer
  initDraw() { ... } // 绘制卡片，需要重写
  updateScale() { ... } // 更新 Leafer 的尺寸
}

接着我们定义一个 YugiohCard 子类：

class YugiohCard extends Card {
  constructor(data = {}) {

    super(data); // 把参数传递给父类
    // 以下是 Leafer 子元素
    this.cardLeaf = null;
    this.nameLeaf = null;
    // 此处省略，根据卡片内容而定
    this.defaultData = {}; // 卡片默认值
    this.initData(data); // 初始化数据
    this.initLeafer(); // 初始化 Leafer
    this.initDraw(); // 初始化绘制
    this.loadFont(); // 加载字体
  }

  initDraw() {
    this.drawCard();
    this.drawName();
    // 以下省略
    this.updateScale(); // 更新卡片尺寸
  }

  drawCard() { ... } // 绘制卡片背景
  drawName() { ... } // 绘制卡名
}

在 Canvas 中加载字体可以用 webfontloader 等库，由于卡片包含的字体数量过多，不适合一次性加载。于是我采用引入 css 动态加载字体的方式。对于 dom 很容易，字体触发加载后页面文本会自动更新。但是在 Canvas 中第一次渲染时，字体还没加载完成，等字体加载完后 Canvas 又结束渲染了。所以正确的动态加载流程是这样的：

一个使用 Leafer UI 实现的游戏王卡片渲染工具

游戏王卡片 Yugioh Card

前言

项目展示

开发流程

总结

项目地址