Commit af7aa3e9 authored by 张媛's avatar 张媛

切换到文档时清楚canvas

parent 690210fd
// .storybook/manager.js
import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';
addons.setConfig({
isFullscreen: false,
showNav: true,
......
<!-- .storybook/preview-body.html -->
<!-- 渲染引擎 -->
<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2023z.minSpine.js" crossorigin="anonymous"></script>
<!-- <canvas id="canvas-container"></canvas> -->
<style>
html {
font-size: 15px;
}
</style>
<script>
window.FYGE = FYGE;
</script>
<script>
</script>
<!-- <script>
window.addEventListener("load", function () {
let canvas = document.getElementById("canvas-container")
canvas.style.height = document.body.clientHeight*(window.devicePixelRatio || 1)+"px";
canvas.style.width = document.body.clientWidth*(window.devicePixelRatio || 1)+"px";
console.log(window.devicePixelRatio)
console.log( document.body.clientWidth, document.body.clientHeight);
var stage = new FYGE.Stage(
canvas,
750,
1624,
750,
1624,
FYGE.RENDERER_TYPE.CANVAS,
false,
false
)
//点击事件绑定
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart",mouseEvent,false);
canvas.addEventListener("touchmove",mouseEvent,false);
canvas.addEventListener("touchend",mouseEvent,false);
canvas.addEventListener("click",mouseEvent,false);
function loop() {
stage.flush();
FYGE.Tween.flush();
requestAnimationFrame(loop);
}
loop();
window.stage = stage;
})
</script> -->
<script src="//yun.duiba.com.cn/db_games/libs0924/fyge2023z.minSpine.js" crossorigin="anonymous"></script>
......@@ -5,8 +5,6 @@ export const createStage = ()=>{
// const width = 750;
const scale = window.devicePixelRatio;
let canvas = document.getElementById("canvas-container");
if(!canvas){
canvas = document.createElement("canvas");
canvas.setAttribute("id","canvas-container")
......
import { Meta } from '@storybook/addon-docs';
import {clearStage} from "../common/createStage.ts";
<Source source={clearStage()}/>
<Meta title="Introduction"/>
# 组件库简介
Let's define a story for our `金币动效` component
## 背景
组件文档收录组件时,不能直观的看出此组件的真实运行效果,使用者无法针对现有的需求来判断是否命中组件,导致不用组件、或耗费时间去接入看效果。
针对此类场景,组件预览方案能解决此类问题
## 目标
+ 收录完整组件
+ 可预览组件真实运行效果
+ 组件源码下载、以及使用文档
+ 改变相应参数可事实观看效果
## 组件库简介
Let's define a story for our `金币动效` component
[Go to specific documentation page](?path=/docs/some--id)
![test image size](/resource/test.gif)
\ No newline at end of file
import React from 'react';
import {TotalCom} from "./totalCom";
import { clearStage } from '../common/createStage';
import {
Title,
Subtitle,
Description,
ArgsTable,
PRIMARY_STORY,
} from '@storybook/addon-docs';
window.addEventListener("hashchange", (e)=>{
console.log(e)
});
export default {
component: TotalCom,
title: '组件概览',
parameters:{
layout:"fullscreen"
layout:"fullscreen",
docs: {
page: () => {
clearStage();
return <>
<Title />
<Subtitle />
<Description />
<ArgsTable story={PRIMARY_STORY} />
</>
},
}
},
};
const Template = () => <TotalCom />;
export const componentsPreview = Template.bind({});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment