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