Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
W
wangjin-front-end
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
张媛
wangjin-front-end
Commits
af7aa3e9
Commit
af7aa3e9
authored
Jul 19, 2021
by
张媛
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
切换到文档时清楚canvas
parent
690210fd
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
40 additions
and
53 deletions
+40
-53
manager.js
.storybook/manager.js
+2
-1
preview-body.html
.storybook/preview-body.html
+1
-42
createStage.ts
src/common/createStage.ts
+0
-2
Introduction.stories.mdx
src/docs/Introduction.stories.mdx
+12
-5
TotalCom.stories.tsx
src/docs/TotalCom.stories.tsx
+25
-3
No files found.
.storybook/manager.js
View file @
af7aa3e9
// .storybook/manager.js
import
{
addons
}
from
'@storybook/addons'
;
import
{
themes
}
from
'@storybook/theming'
;
addons
.
setConfig
({
isFullscreen
:
false
,
showNav
:
true
,
...
...
.storybook/preview-body.html
View file @
af7aa3e9
<!-- .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>
src/common/createStage.ts
View file @
af7aa3e9
...
...
@@ -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"
)
...
...
src/docs/Introduction.stories.mdx
View file @
af7aa3e9
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
src/docs/TotalCom.stories.tsx
View file @
af7aa3e9
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
({});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment