wincard

WinCard

use

main.js 中引用 WinCard：

import { createApp } from "vue";
import App from "./App.vue";

import WinCard from "wincard";
import "wincard/dist/wincard.css";

createApp(App)
    .use(WinCard)
    .mount("#app");

vue 中使用：

<!-- 素材页编辑 -->
<PPTEditor :slide="slide" @onSave="onSave" />

<!-- 预览 -->
<ScreenView :slide="slide" @pagePrev="pagePrev()" @pageNext="pageNext()" />

slide数据示例：

// 素材页
{
    id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
    type: "element",
    viewportRatio: 0.5625,
    elements: [
        {
            name: "形状1",
            type: "shape",
            id: "4cbRxp",
            left: 0,
            top: 200,
            width: 546,
            height: 362.5,
            viewBox: 200,
            path: "M 0 0 L 0 200 L 200 200 Z",
            fill: "#5b9bd5",
            fixedRatio: false,
            opacity: 0.7,
            rotate: 0
        },
        {
            name: "形状2",
            type: "shape",
            id: "ookHrf",
            left: 0,
            top: 0,
            width: 300,
            height: 320,
            viewBox: 200,
            path: "M 0 0 L 0 200 L 200 200 Z",
            fill: "#5b9bd5",
            fixedRatio: false,
            flipV: true,
            rotate: 0
        },
        {
            name: "文本1",
            type: "text",
            id: "idn7Mx",
            left: 355,
            top: 65.25,
            width: 585,
            height: 188,
            lineHeight: 1.2,
            content:
                "<p><strong><span style='font-size:  112px'>PPTIST</span></strong></p>",
            rotate: 0,
            defaultFontName: "Microsoft Yahei",
            defaultColor: "#333"
        },
        {
            name: "文本2",
            type: "text",
            id: "7stmVP",
            left: 355,
            top: 253.25,
            width: 585,
            height: 56,
            content:
                "<p><span style='font-size:  24px'>基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>",
            rotate: 0,
            defaultFontName: "Microsoft Yahei",
            defaultColor: "#333"
        },
        {
            name: "线条",
            type: "line",
            id: "FnpZs4",
            left: 361,
            top: 238,
            start: [0, 0],
            end: [549, 0],
            points: ["", ""],
            color: "#5b9bd5",
            style: "solid",
            width: 2
        }
    ],
    background: {
        type: "solid",
        color: "#ffffff"
    }
}

// 听写页
{
    id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
    type: "listen",
    viewportRatio: 0.5625,
    elements: [],
    listenWords: [
        {
            id: "39FED7308B47FE07436EC33844DE78F5",
            name: "苹果1",
            file: "TeachPageFile/EFF4D19486842BDF411839B61AE22B71.mp3",
            extention: "mp3",
            pageWordID: "39FFFC10573FB3AD0BC87C17A08E2AD5"
        },
        {
            name: "121212",
            id: "39FECC5CDF3022C43C032688958B16BF",
            file: "TeachPageFile/28D7326F7772879CDCF564A2A755B264.m4a",
            extention: "m4a",
            pageWordID: "39FFFC10574015C89FAEF9355BB5E7CB"
        },
        {
            name: "121212",
            id: "39FECC5CDF3022C43C032688958B16BF",
            file: "TeachPageFile/28D7326F7772879CDCF564A2A755B264.m4a",
            extention: "m4a",
            pageWordID: "39FFFC65054430D68B36F090A1875989"
        },
        {
            name: "测试",
            id: "39FEBCA9648BE111E08E1B4CD1C5104E",
            file: "TeachPageFile/814F94E1DBA66566099B0787FA7678D7.mp4",
            extention: "mp4",
            pageWordID: "39FFFC654B2BDC6027B84AE7E1021F3A"
        },
        {
            name: "敦实",
            id: "39FEBCA933D981CE5D2A348A65ABC0DB",
            file: "TeachPageFile/CA7DC5A89DD86B2DD66B8D996EAB67E3.mp3",
            extention: "mp3",
            pageWordID: "39FFFC654B2B2A9804F1F6914BF1D786"
        }
    ],
    background: {
        type: "solid",
        color: "#ffffff"
    }
}

// 跟读页
{
    id: "39FFFBBE2B08D1CFD8FCA24DE655B35B",
    type: "follow",
    viewportRatio: 0.5625,
    elements: [],
    follow: {
        src: "ElementFile/435F9C581336C2582C98A7708699585D.mp4"
    },
    background: {
        type: "solid",
        color: "#ffffff"
    }
}

【注】：支持数据导入和导出

5.0.0版本针对动画进行数据大调整，数据增加版本号

import { version } from "wincard";
// 获取插件支持数据版本号，与使用的slide数据的版本号进行比较，当不支持时，需要对相应的数据进行相应的处理
// 1.0.0，数据当中没有版本号的数据我们这里统称为1.0.0版本数据
// 针对1.0.0的数据，其中的步骤数据字段steps没有了，统一使用animations，事件的里的数据结构也进行的调整和anmaitions的数据结构保持一致
// 相关处理代码示例
export const dealAnimationData = (slide: Slide) => {
    if (slide.steps) {
        const steps = slide.steps;
        delete slide.steps;

        let animations: PPTAnimation[] = [];
        // 当步骤中存在进入与退出动画时，只管进入动画，舍弃退出动画
        steps.forEach(actions => {
            const _animation = getAnimations(actions || []);
            animations = animations.concat(_animation);
        });

        slide.animations = animations;
    }

    slide.elements.forEach(element => {
        element.actions = getAnimations((element.actions as unknown || []) as PPTElementAction[]);
    });

    return slide;
};

const getAnimations = (actions: PPTElementAction[]) => {
    const animations: PPTAnimation[] = [];
    actions.forEach((item, index) => {
        const type = item.inAni ? "in" : item.outAni ? "out" : "in";
        animations.push({
            id: createRandomCode(),
            elId: item.target,
            ani: (type === "in" ? item.inAni : item.outAni) || "",
            type,
            path: type === "in" ? item.inPath : item.outPath,
            duration: item.duration || 0,
            trigger: index === 0 ? "click" : "meantime"
        });
    });
    return animations;
};