Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

wincard

Package Overview
Dependencies
Maintainers
1
Versions
179
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wincard

# use

  • 5.2.2
  • npm
  • Socket score

Version published
Weekly downloads
168
decreased by-42.27%
Maintainers
1
Weekly downloads
 
Created
Source

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;
};

FAQs

Package last updated on 08 Sep 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc