Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
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"
}
}
【注】:支持数据导入和导出
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
The npm package wincard receives a total of 246 weekly downloads. As such, wincard popularity was classified as not popular.
We found that wincard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.