canvas测试

.storybook/addons.ts

-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';
-import '@storybook/addon-notes/register';
-import 'storybook-readme/register';
\ No newline at end of file

.storybook/main.js

+
 module.exports = {
     stories: ['../src/**/*.stories.tsx'],
+    addons:[
+        "@storybook/addon-essentials",
+        "@storybook/addon-info"
+    ]
 };
\ No newline at end of file

.storybook/manager.js

+// .storybook/manager.js
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  enableShortcuts: true,
+  isToolshown: true,
+  theme: themes.dark,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  sidebar: {
+    showRoots: false,
+    collapsedRoots: ['other'],
+  },
+  toolbar: {
+    title: { hidden: false, },
+    zoom: { hidden: false, },
+    eject: { hidden: false, },
+    copy: { hidden: false, },
+    fullscreen: { hidden: false, },
+  },
+});
\ No newline at end of file

.storybook/preview-body.html

+<!--  .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>
+   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,
+        document.body.clientWidth,
+        document.body.clientHeight,
+        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>
+

.storybook/preview.js

+import { themes } from '@storybook/theming';
+const customViewports = {
+    kindleFire2: {
+      name: 'Kindle Fire 2',
+      styles: {
+        width: '600px',
+        height: '963px',
+      },
+    },
+    kindleFireHD: {
+      name: 'Kindle Fire HD',
+      styles: {
+        width: '750px',
+        height: '1624px',
+      },
+    },
+  };
+export const parameters = {
+    layout: 'fullscreen',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+        theme: themes.dark,
+    },
+    viewport: { viewports: customViewports },
+  };
\ No newline at end of file

package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@babel/core": "^7.14.6",
     "@storybook/addon-actions": "^6.3.2",
+    "@storybook/addon-essentials": "^6.3.2",
     "@storybook/addon-links": "^6.3.2",
     "@storybook/addon-notes": "^5.3.21",
     "@storybook/addons": "^6.3.2",
@@ -26,6 +27,7 @@
   },
   "dependencies": {
     "@storybook/addon-docs": "^6.3.2",
+    "@storybook/addon-info": "^5.3.21",
     "@storybook/preset-ant-design": "^0.0.2",
     "antd": "^4.16.6",
     "babel-preset-react-app": "^10.0.0",

src/canvasCom/canvasTestCom/PolygonSystemCom.tsx

+import React from 'react';
+import "./canvasTestCom.less";
+import {PolygonAxiosSystem} from "./polygonAxiosSystem";
+interface TestProps {
+    /**设置主题色 */
+    label?: string;
+    /**设置标题 */
+    test?: string;
+  }
+
+export const CanvasTestCom = (pros:TestProps)=>{
+    const polygonAxiosSystem = new PolygonAxiosSystem(
+        100, //坐标系统原点在弹窗中的x坐标
+        200, //坐标系统原点在弹窗中的y坐标
+        3, //3个坐标轴
+        3, //3个坐标节点
+        30, //坐标系统的单位长度,一个刻度多长。
+        90 //坐标系统顺时针旋转多少度，原坐标系统基准轴水平向右，也是drawShape传的第一个数值所在的坐标轴。
+    );
+    stage.addChild(polygonAxiosSystem);
+    polygonAxiosSystem.updateData(50 + "," + 50 + "," + 50);
+    return (
+      <div></div>
+    )
+}
\ No newline at end of file

src/canvasCom/goldCoinCom/goldCoinAni.ts

+export class GoldCoinAni extends FYGE.Container {
+    start: any;
+    end: any;
+    imgUrl: string; //金币的图标。
+    isMinus: boolean; //true为向上凸，false为向下凹。
+    startCallback: any; //第一个金币动效结束后的回调函数
+    endCallback: any; //最后一个金币动效结束后的回调函数
+    callback:any;
+    lineCoords: any; //根据起始点计算出来的贝赛曲线坐标。
+    curvature: number; //0-1之间，0代表直线，1代表最弯
+    goldNum: number; //动效上面金币个数。
+    time: number;//动效完成时间。
+    coordNum:any;//坐标串个数
+    /**
+     * 
+     * @param start 动效起点,[120,30]
+     * @param end 动效终点,[120,30]
+     * @param imgUrl 动效图片
+     * @param startCallback 第一个金币动效结束时的回调
+     * @param endCallback 最后一个金币动效完成时的回调
+     * @param isMinus  true为向上凸，false为向下凹。
+     * @param curvature 0-1之间，0代表直线，1代表最弯
+     * @param goldNum 动效上面金币个数
+     * @param time 动效完成时间
+     * @param coordNum 路线上的坐标串个数
+     */
+    constructor(
+        start,
+        end,
+        imgUrl,
+        callback?: (start,end) => void,
+        isMinus = false,
+        curvature = 0.8,
+        goldNum = 10,
+        time = 500,
+        coordNum = 50,
+    ) {
+        super();
+        this.start = start;
+        this.end = end;
+        this.imgUrl = imgUrl;
+        this.curvature = curvature;
+        this.isMinus = isMinus;
+        this.goldNum = goldNum;
+        this.callback = callback;
+        this.coordNum = goldNum > coordNum? goldNum:coordNum;
+        this.time = Math.floor( time / this.coordNum );
+        this.initUi();
+    }
+    initUi() {}
+
+    /**
+     * 重设起点和终点
+     * @param start [120,30]
+     * @param end [120,30]
+     */
+    triggerAni(start = null, end = null) {
+        if(start)this.start = start;
+        if(end) this.end = end;
+        this.lineCoords = this.getBeiSaiCoords(this.start, this.end);
+        this._produceGoldCoinAni(this.createNewGoldCoin,(goldCodeNum)=>{
+            this.callback && this.callback(goldCodeNum)
+        });
+    }
+    createNewGoldCoin = (goldNum) => {
+        this._produceGoldCoinAni(() => {},(goldCodeNum) => {this.callback && this.callback(goldCodeNum)},goldNum);
+    }
+    /**
+     *
+     * @param createNewGoldCoin 金币移动时的回调函数。
+     * @param callback 到达终点位置后的回调函数
+     * @param goldCodeNum 产生的金币编号。
+     */
+    _produceGoldCoinAni(
+        createNewGoldCoin?: (goldNum: number) => void,
+        callback?: (goldCodeNum) => void,
+        goldCodeNum = 1
+    ) {
+        let coin = FYGE.Sprite.fromUrl(this.imgUrl);
+        this.addChild(coin);
+        coin["goldCodeNum"] = goldCodeNum;
+        let index = 0;
+        let timer = null;
+        let x = Math.floor(this.lineCoords.length/this.goldNum);
+        var loop = () => {
+            timer && clearTimeout(timer);
+            if (index === this.lineCoords.length) {
+                callback && callback( coin["goldCodeNum"] );
+                this.removeChild(coin);
+                return;
+            }
+            coin.position.set(
+                this.lineCoords[index][0],
+                this.lineCoords[index][1]
+            );
+            if( goldCodeNum < this.goldNum && ((index+1)% x === 0) ){
+                goldCodeNum ++;
+                createNewGoldCoin && createNewGoldCoin(goldCodeNum);
+            }
+            index = index + 1;
+            timer = this.setTimeoutSelf(() => {
+                loop();
+            }, this.time);
+        };
+        loop();
+    }
+    setTimeoutSelf(cb, interval) { // 实现setTimeout功能
+        let now = Date.now
+        let stime = now()
+        let etime = stime
+        let loop = () => {
+            var timeoutTimer = requestAnimationFrame(loop)
+            etime = now()
+            if (etime - stime >= interval) {
+                cb()
+                cancelAnimationFrame(timeoutTimer)
+            }
+        }
+        loop()
+    }
+    /**
+     * 输入起点终点坐标，得到贝塞曲线坐标
+     * @param start
+     * @param end
+     */
+    getBeiSaiCoords(start, end) {
+        let x1 = start[0];
+        let y1 = start[1];
+        let x2 = end[0];
+        let y2 = end[1];
+        let x3 = (x1 + x2) / 2 + (y1 - y2) * this.curvature;
+        let y3 = (y1 + y2) / 2 + (x2 - x1) * this.curvature;
+        if (this.isMinus) {
+            x3 = (x1 + x2) / 2 - (y1 - y2) * this.curvature;
+            y3 = (y1 + y2) / 2 - (x2 - x1) * this.curvature;
+        }
+        let coords = [];
+        let speed =Number(1/this.coordNum);
+        for (let t = 0; t <= 1; t += speed) {
+            var x = quadraticBezier(x1, x3, x2, t);
+            var y = quadraticBezier(y1, y3, y2, t);
+            coords.push([x, y]);
+        }
+        function quadraticBezier(p1, p3, p2, t) {
+            var k = 1 - t;
+            return k * k * p1 + 2 * (1 - t) * t * p3 + t * t * p2;
+        }
+        return coords;
+    }
+}
\ No newline at end of file

src/canvasCom/goldCoinCom/goldCoinCom.tsx

+import React from 'react';
+import "./canvasTestCom.less";
+import {GoldCoinAni} from "./goldCoinAni";
+interface TestProps {
+    /**设置主题色 */
+    label?: string;
+    /**设置标题 */
+    test?: string;
+  }
+const goldCoinReceiveAniCallback =(goldCode)=>{
+    console.log(goldCode);
+}
+export const GoldCoinCom = (pros:TestProps)=>{
+    const goldCoinAni = new GoldCoinAni([150, 200], [516, 200], "../../asserts/homeGoldIconImg.png", goldCoinReceiveAniCallback.bind(this), true, 0.2, 10, 400);
+    stage.addChild(goldCoinAni);
+    goldCoinAni.triggerAni();
+    return (
+      <div></div>
+    )
+}
\ No newline at end of file

src/canvasStories/goldCoin.stories1.tsx

+import React from 'react';
+import { GoldCoinCom } from '../canvasCom/goldCoinCom/GoldCoinCom.tsx';
+export default {
+  component: GoldCoinCom,
+  title: 'Canvas组件/GoldCoin',
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <GoldCoinCom {...args} />;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+
+Primary.args = {
+  primary: true,
+  label: 'GoldCoin',
+};
+

src/canvasStories/polygonAxiosSystem.stories.tsx

+import React from 'react';
+import { PolygonSystemCom } from '../canvasCom/canvasTestCom/PolygonSystemCom.tsx';
+export default {
+  component: CanvasTestCom,
+  title: 'Canvas组件/Button',
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <CanvasTestCom {...args} />;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+

src/components/testSpan/testSpan.tsx → src/reactCom/testSpan/testSpan.tsx

 import React from 'react';
 import "./testSpan.less";
-export const TestSpan = (obj)=>{
+interface TestProps {
+    /**设置主题色 */
+    label?: string;
+    /**设置标题 */
+    test?: string;
+  }
+export const TestSpan = (pros:TestProps)=>{
     return (
         <span className="testButton">
             <span className = "testButton-inner">
             </span>
-            {obj.label}
+            {pros.label}
+            <span>
+                {pros.test}
+            </span>
         </span>
     )
 }
\ No newline at end of file

src/stories/Button.stories.tsx → src/reactStories/Button.stories.tsx

@@ -2,9 +2,16 @@ import React from 'react';
 import { Button } from '@storybook/react/demo';
 export default {
   component: Button,
-  title: 'Components/Button',
+  title: 'React组件/Button',
+  //👇 Creates specific argTypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  args: {
+    //👇 Now all Button stories will be primary.
+    primary: true,
+  },
 };
-
 //👇 We create a “template” of how args map to rendering
 const Template = (args) => <Button {...args} />;
 

src/stories/danma..stories.tsx → src/reactStories/Danma.stories.tsx

 import React from 'react';
-import { Danma } from "../components/danma/danma";
-import DanmaItem from '../components/danma/danmaItem';
+import { Danma } from "../reactCom/danma/danma";
+import DanmaItem from '../reactCom/danma/danmaItem';
 
 export default {
   component: Danma,
-  title: 'Components/Danma',
+  title: 'React组件/Danma',
 };
 let danmaAvatars = ["//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
   , "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
@@ -83,3 +83,6 @@ Primary.args = {
   primary: false,
   label: 'Danma',
 };
+Primary.parameters = {
+  layout: 'centered',
+};
\ No newline at end of file

src/stories/TestSpan.stories.tsx → src/reactStories/TestSpan.stories.tsx

 import React from 'react';
-import { TestSpan } from "../components/testSpan/testSpan";
+import { TestSpan } from "../reactCom/testSpan/testSpan";
 export default {
   component: TestSpan,
-  title: 'Components/TestSpan',
+  title: 'React组件/TestSpan',
+  argTypes: {
+    variant: {
+      options: ['TestSpan', 'Default'],
+      control: { label: 'radio' }
+    }
+  }
 };
 
 //👇 We create a “template” of how args map to rendering
@@ -11,13 +17,17 @@ const Template = (args) => <TestSpan {...args} />;
 //👇 Each story then reuses that template
 export const Primary = Template.bind({});
 
+
 Primary.args = {
-  primary: false,
+  primary: true,
   label: 'TestSpan',
 };
+Primary.parameters = {
+  layout: 'centered',
+};
 export const Default = Template.bind({});
 
 Default.args = {
-  primary: false,
-  label: 'TestSpan-Default',
+  primary: true,
+  label: 'Default',
 };
\ No newline at end of file