ygo-card 文档

$ npm i ygo-card -D --save

$ yarn add ygo-card

// commonjs
const { Card } = require('ygo-card');
// es module
import { Card } from 'ygo-card';

$ git clone https://github.com/ymssx/ygo-card

<canvas id="card"></canvas>
...
<script src="xxx/index.js"></script>

// canvas的dom节点
const canvas = document.getElementById('card');
// 卡片数据的描述
const data = { 
  name: '青眼的白龍',
  _id: '89631139',
  type: 'monster',
  type2: 'tc',
  type3: '',
  type4: '',
  attack: 3000,
  defend: 2500,
  level: 8,
  desc: '以高攻擊力著稱的傳說之龍。任何對手都能被粉碎，其破壞力不可估量。',
  race: '龍族',
  attribute: 'light' 
}

const card = new Card({ data, canvas, size: [400, 584] });
// render之后canvas会被渲染出卡图
card.render();

const card = new Card({ data, canvas, moldPath: './assets/mold' });

interface CardData {
  name: string;                          // card name
  _id: string;                           // card id
  type: 'monster' | 'spell' | 'trap';    // first type
  type2: type;                           // secend type 见下面注释①
  type3: type;                           // third type
  type4: type;                           // fourth type
  desc: string;                          // card describe
  attribute?: 'light' | 'dark' | 'fire' | 'water' | 'wind' | 'earth' | 'divine';
                                         // monster attribute
  race?: string;                         // monster race
  attack?: number;                       // monster attack
  defend?: number;                       // monster defend
  level?: number;                        // monster level

  link?: boolean[];                      // link monster arrows
  lb_desc?: string;                      // pendulum describe
  lb_number?: number;                    // pendulum number
}

const data = { 
  name: '幽鬼兔',
  type: 'monster',
  type2: 'xg', // 效果
  type3: 'tz', // 调整
  type4: '',
}

const data = { 
  name: '幽鬼兔',
  type: 'monster',
  type2: 'effect', // 效果
  type3: 'tuner', // 调整
  type4: '',
}

const Card = function ({
  data: CardData,                         // 卡片数据
  canvas: HTMLElement,                    // canvas对象
  size: number[],                         // 绘制尺寸，[宽, 高]
  moldPath: string = './mold',            // 模板资源路径
  lang: 'cn' | 'jp' | 'en' = 'cn',        // 语言 cn、jp、en
  config: object = defaultConfig,         // 配置信息。在这里指定你的自定义配置信息
  getPic: id => imgUrl,                   // 描述如何通过id获取卡图的函数
  fontLoaded: function = defaultEvent,    // 事件
  imageLoaded: function = defaultEvent,
  fontsLoaded: function = defaultEvent,
  imagesLoaded: function = defaultEvent,
  picLoaded: function = defaultEvents,
  loaded: function = defaultEvent,
  recover: boolean = false,               // 是否缓存配置与数据
  holo: boolean = true,                   // 是否显示防伪标志
  cardbagSwitch: boolean = false,         // 是否渲染卡包信息
  translate: boolean = false,             // 是否自动繁简转换,默认字体繁简同体，不需要打开
  verbose: boolean = false,               // 是否开启console
})

const card = new Card({ data, canvas, size = [813, 1185] })

<style>
#card {
  width: 80%;
}
</style>

<canvas id="card"></canvas>

// autoResize默认开启
const card = new Card({ data, canvas, autoResize: true })

card.fontLoaded = function(e) {
  console.log(e);
}

card.changeConfig(config);

await card.render();

const pic = document.getElementById('blueEyes');
card.feed(pic);

card.changeConfig(config);

card.feedData(data);

card.data.name = 'Blue Eyes';

card.save('青眼白龙', [1626, 2370]);

const card = new Card({
  picLoaded() {
    card.feedFlash(document.getElementById('flashImg'));
    card.data.flash = 0.5;
  },
})

const complexText = Card.complex('青眼白龙'); // 青眼白龍

const ygoproData = {
  "name": '元素英雄 羽翼侠',
  "desc": "拥有操纵风在天空飞舞之翼的元素英雄。以来自天空的一击羽翼击破来审判邪恶。",
  "id": 21844576,
  "atk": 1000,
  "def": 1000,
  "race": 1,
  "type": 17,
  "level": 3,
  "attribute": 8
}
// 来自YGOPro的数据，直接传入card.js会报错
const newData = Card.transData(ygoproData);
console.log(newData);

{
  name: '元素英雄 羽翼侠',
  desc: '拥有操纵风在天空飞舞之翼的元素英雄。以来自天空的一击羽翼击破来审判邪恶。',
  _id: '21844576',
  attack: 1000,
  defend: 1000,
  race: '战士族',
  type: 'monster',
  type2: 'tc',
  type3: '',
  type4: '',
  level: 3,
  attribute: 'wind'
}
// 可以被card.js理解的数据对象结构

import React, { useState, useEffect, useRef } from 'react';
import { Card } from 'ygo-card';

const YgoCard = ({ data, onCreated, onLoaded }) => {
  const [cardIns, setCardIns] = useState();
  const canvas = useRef(null);

  useEffect(() => {
    const newCardIns = = new Card({
      data,
      size: [813, 1185],
      canvas: canvas.current,
      moldPath: '/mold',
      fontsLoaded: onLoaded,
    });

    setCardIns(newCardIns);

    newCard.render();

    if (onCreated instanceof Function) {
      onCreated(newCard);
    }
  }, [canvas]);

  useEffect(() => {
    cardIns?.feedData(data);
  }, [data]);

  return (
    <canvas ref={canvas} />
  );
};

// 引用
const BlueEyes = () => <YgoCard data={ name: '青眼白龙', attack: 3000 } />;

$ npm i ygo-card-node -D --save

$ yarn add ygo-card-node

import { Card, getCard } from 'ygo-card-node';

const card = await getCard(
  data, // 卡片数据
  {
    size: size, // 尺寸
    moldPath: '/public/mold/', // mold文件夹的路径（重要）
    picPath: `/public/pics/500/${id}.jpg`, // 图片集的路径
  },
);

// getCard返回二进制图片数据