新添加一些组件

.storybook/main.js

@@ -4,7 +4,6 @@ module.exports = {
     addons:[
         "@storybook/addon-links",
         "@storybook/addon-essentials",
-        "@storybook/addon-notes",
-      
+        '@storybook/addon-notes/register'
     ]
 };
\ No newline at end of file

src/canvasCom/danmuCom/codeCom.tsx

+import React from 'react';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
+const jsBeautify = require("js-beautify").html;
+
+interface Props {
+    code:string
+}
+
+const CodePanel =(args:Props) => {
+    return(
+        <div className = "code">
+            <CodeMirror value={args.code}
+            options = {{
+                mode:"javascript",
+                theme:"dracula",
+                lineNumbers: true,
+                lineWrapping: false,
+                indentWithTabs: true,
+                smartIndent: true,
+            }}
+            />
+        </div>
+    )
+}
+export const CodeCom = ()=>{
+    let useCode = getUseCodeStr();
+    let sourceCode = getSourceCode();
+    return (
+        <div className = "codeContainer">
+            <label className="title">组件使用代码：</label>
+            <CodePanel code ={useCode}/>
+            <label className="title">组件源码代码：</label>
+            <CodePanel code ={sourceCode}/>
+        </div>
+    )
+}
+//使用代码
+const getUseCodeStr = ()=>{
+    return `
+var list =[];
+for(let i= 0;i<20;i++){
+    list.push({
+        avatar: "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg",
+        nickName: "温**暖",
+        text: "免费权益融e购卡券"
+    })
+}
+var danmuara = new Danmu({ datalist: list, danmuwidth: props.danmuwidth, danmuheight: props.danmuheight, lines: props.lines, speed: props.speed, needAvatar: props.needAvatar })
+danmuara.x = 100;
+danmuara.y = 100;
+window.stage.addChild(danmuara)
+danmuara.showDame()
+    `
+}
+//源码
+const getSourceCode = ()=>{
+    return`
+export class Danmu extends FYGE.Container{
+    danmudata;
+    danmuwidth;
+    danmuheight;
+    // danmuList:FYGE.Container;
+    constructor(data?){
+        super()
+        this.danmudata = data;
+        for(let i = 0;i<this.danmudata.lines;i++ ){
+            this["danmuList"+i] = new FYGE.Container();
+            this["danmuList"+i].height = this.danmudata.danmuheight;
+            this["danmuList"+i].width = this.danmudata.danmuwidth;
+            this["danmuList"+i].x = 0;
+            this["danmuList"+i].y = (this.danmudata.danmuheight-this.danmudata.lines*30)/2*i
+            this.addChild(this["danmuList"+i])
+
+        }
+        let num = this.danmudata.datalist.length%this.danmudata.lines
+        let num2 = Math.floor(this.danmudata.datalist.length/this.danmudata.lines)
+        let index = 0;
+        for(let i = 0;i<this.danmudata.lines;i++ ){
+            
+            if(i<num){
+                for(let n = 0;n<num2+1;n++ ){
+                    
+                    this.creatItem(i,n,this.danmudata.datalist[index].text,this.danmudata.needAvatar,this.danmudata.datalist[i].avatar,this.danmudata.datalist[index].nickName)
+                    index++
+                }
+            }else{
+                for(let n = 0;n<num2;n++ ){
+                    this.creatItem(i,n,this.danmudata.datalist[index].text,this.danmudata.needAvatar,this.danmudata.datalist[i].avatar,this.danmudata.datalist[index].nickName)
+                    index++
+                }
+            }
+        }
+
+    }
+
+    showDame(){
+        for(let i = 0;i<this.danmudata.lines;i++ ){
+            for(let n =0;n<this["danmuList"+i].children.length;n++){
+                FYGE.Tween.get(this["danmuList"+i].children[n],{loop:true})
+                .set({x:750})
+                .wait(480/this.danmudata.speed[i]*n*15)
+                .to({x:-500},750/this.danmudata.speed[i]*15)
+                .wait(480/this.danmudata.speed[i]*(this["danmuList"+i].children.length-n-1)*15)
+            }
+        }
+    }
+    
+    creatItem(index,numindex,textlab,needAvatar,avatar?,nickName?){
+        var danmuCon:FYGE.Container = new FYGE.Container();
+        danmuCon.width = 200;
+        danmuCon.height = 30;
+        danmuCon.x = 500*numindex
+        this["danmuList"+index].addChild(danmuCon)
+
+        var danmuBg:FYGE.Graphics = new FYGE.Graphics();
+       
+        danmuBg.beginFill(0xb27149,0.8)
+        danmuBg.drawRoundedRect(0,0,327, 50,70);
+        danmuBg.alpha = 0.7;
+        danmuCon.addChild(danmuBg);
+
+        if(needAvatar){
+            var danmuAvatarBg:FYGE.Graphics = new FYGE.Graphics();
+            danmuAvatarBg.beginFill(0xffce5a);
+            danmuAvatarBg.drawCircle(0,0,22);
+            danmuAvatarBg.x = 28;
+            danmuAvatarBg.y = 25;
+            danmuCon.addChild(danmuAvatarBg);
+
+            var mask = new FYGE.Graphics();
+            mask.beginFill(0xffffff);
+            mask.drawCircle(0,0,22);
+            mask.x = 28;
+            mask.y = 25;
+            danmuCon.addChild(mask);
+
+            var danmuAvatar:FYGE.Sprite = new FYGE.Sprite();
+            danmuAvatar = FYGE.Sprite.fromUrl(avatar);
+            danmuAvatar.x = 6;
+            danmuAvatar.y = 3;
+            danmuAvatar.width = 44;
+            danmuAvatar.height = 44;
+            danmuCon.addChild(danmuAvatar)
+            danmuAvatar.mask = mask;
+        }
+        var nickNameLab:FYGE.TextField = new FYGE.TextField();
+        nickNameLab.position.set(68, 15);
+        nickNameLab.fillColor = "#ffd800";
+        nickNameLab.size = 20;
+        nickNameLab.text = nickName
+        danmuCon.addChild(nickNameLab)
+
+        var danmuLab:FYGE.TextField = new FYGE.TextField();
+        danmuLab.position.set(nickNameLab.textWidth+75, 15);
+        danmuLab.fillColor = "#ffffff";
+        danmuLab.size = 20;
+        danmuLab.text = textlab
+        danmuCon.addChild(danmuLab)
+    }
+
+
+}
+    `
+}
\ No newline at end of file

src/canvasCom/danmuCom/danmuCtrl.stories.tsx

+import React from 'react';
+import { DanmuCtrl } from './danmuCtrlCom';
+import { CodeCom } from "./codeCom"
+import {
+  Title,
+  Subtitle,
+  Description,
+  ArgsTable,
+  PRIMARY_STORY,
+} from '@storybook/addon-docs';
+import { clearStage } from '../../common/createStage';
+import noteText from "./notes.md"
+
+
+export default {
+  component: DanmuCtrl,
+  title: 'Canvas组件/弹幕',
+  //👇 Creates specific argTypes
+  parameters: { 
+    layout: 'centered',
+    docs: { 
+      page: () => {
+        clearStage();
+        return( <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <ArgsTable story={PRIMARY_STORY} />
+          <CodeCom></CodeCom>
+        </>)
+        },
+    },
+    notes: {noteText} 
+  },
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <DanmuCtrl {...args}/>;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: '弹幕',
+  danmuwidth:750, 
+  danmuheight:300, 
+  lines:3,
+  speed:[1, 2, 1.5], 
+  needAvatar:true, 
+};
+
+

src/canvasCom/danmuCom/danmuCtrlCom.tsx

+import React from 'react';
+import {Danmu} from "../../sourceCode/canvas/DanmuCtrl";
+import {createStage,isExistStage} from "../../common/createStage";
+interface propsType{
+    danmuwidth:number,
+    danmuheight:number,
+    lines:number,
+    speed:Array<number>,
+    needAvatar: boolean,
+}
+
+export const DanmuCtrl = (props:propsType)=>{
+    createStage();
+    window.stage.removeAllChildren();
+    isExistStage(()=>{
+        var list =[];
+        for(let i= 0;i<20;i++){
+            list.push({
+                avatar: "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg",
+                nickName: "温**暖",
+                text: "免费权益融e购卡券"
+            })
+        }
+        var danmuara = new Danmu({ datalist: list, danmuwidth: props.danmuwidth, danmuheight: props.danmuheight, lines: props.lines, speed: props.speed, needAvatar: props.needAvatar })
+        //@ts-ignore
+        danmuara.x = 100;
+        //@ts-ignore
+        danmuara.y = 100;
+        window.stage.addChild(danmuara)
+        danmuara.showDame()
+     
+    })
+    return (
+      <div></div>
+    )
+}

src/canvasCom/danmuCom/notes.md

+#### 注意事项
++ lines的大小和speed数组的长度须一致
\ No newline at end of file

src/canvasCom/progressBarSCom/codeCom.tsx

+import React from 'react';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
+const jsBeautify = require("js-beautify").html;
+
+interface Props {
+    code:string
+}
+
+const CodePanel =(args:Props) => {
+    return(
+        <div className = "code">
+            <CodeMirror value={args.code}
+            options = {{
+                mode:"javascript",
+                theme:"dracula",
+                lineNumbers: true,
+                lineWrapping: false,
+                indentWithTabs: true,
+                smartIndent: true,
+            }}
+            />
+        </div>
+    )
+}
+export const CodeCom = ()=>{
+    let useCode = getUseCodeStr();
+    let sourceCode = getSourceCode();
+    return (
+        <div className = "codeContainer">
+            <label className="title">组件使用代码：</label>
+            <CodePanel code ={useCode}/>
+            <label className="title">组件源码代码：</label>
+            <CodePanel code ={sourceCode}/>
+        </div>
+    )
+}
+//使用代码
+const getUseCodeStr = ()=>{
+    return `
+//进度条底图
+//@ts-ignore
+var proBg = window.stage.addChild(FYGE.Sprite.fromUrl("resource/loadWhiteBar.png"))
+proBg.position.set(100, 200);
+
+//进度文字展示
+//@ts-ignore
+var progressBarLabel = new FYGE.TextField();
+progressBarLabel.text = "0";
+progressBarLabel.size = 24;
+progressBarLabel.fillColor = "#ef9222"
+progressBarLabel.stroke = 2;
+progressBarLabel.strokeColor = "#ffffff"
+progressBarLabel.position.set( 450,20);
+proBg.addChild(progressBarLabel)
+
+//进度条
+//@ts-ignore
+var pro = window.stage.addChild(FYGE.Sprite.fromUrl("resource/loadYellowBar.png"));
+pro.position.set(112, 208)
+
+//进度条托管
+var progressBar = new ProgressBarS(pro ,null,(v)=>{
+    progressBarLabel.text = ((v * 100) >> 0)+"%"
+});
+
+//监听进度条前进信息
+//@ts-ignore
+window.stage.addEventListener(FYGE.Event.PROGRESS, (e)=>{
+    let pro = e.data;
+    //@ts-ignore
+    FYGE.Tween.get(progressBar)
+    .to({ value: pro }, 2000)
+}, window.stage);
+
+//触发进度条前进
+//@ts-ignore
+window.stage.dispatchEvent(FYGE.Event.PROGRESS, 1);
+    `
+}
+//源码
+const getSourceCode = ()=>{
+    return`
+    import { initWxConfig } from "../../module/tools/wxShare";
+
+    /**
+     * 传入文案和进度条图片
+     * 进度条图片位移，固定遮罩
+     * 貌似这样就不需要继承显示类了
+     */
+    export class ProgressBarS {
+        /**
+         * 0到1的进度
+         */
+        private _value = 0;
+        private upImage: FYGE.Sprite;
+        private progressTxt: FYGE.TextField;
+        private maxLength: number;
+        private oriX: number;
+        private callback:any;
+        constructor(upImage: FYGE.Sprite, txt?: FYGE.TextField, callback?:(v) => void) {
+            this.maxLength = upImage.width;//最大长度，直接取图片宽度
+    
+            this.upImage = upImage;
+    
+            this.progressTxt = txt;
+    
+            this.callback = callback;
+            this.oriX = upImage.x;
+            var delta = 0
+            //传入的也可能是帧动画，这样原点就有问题了
+            if (upImage instanceof FYGE.FrameAni) delta = 0.5
+            //给图片加个矩形遮罩
+            this.upImage.mask = this.upImage.parent.addChild(new FYGE.Graphics())
+                .beginFill(0xf8c862)
+                .drawRoundedRect(
+                    upImage.x - upImage.width * delta,
+                    upImage.y - upImage.height * delta,
+                    upImage.width,
+                    upImage.height,
+                    111
+                )
+                .endFill();
+    
+    
+            this.value = 0;
+        }
+    
+        get value() {
+            return this._value;
+        }
+        set value(v) {
+            if (v < 0) v = 0;
+            if (v > 1) v = 1;
+            console.log("sssss")
+            this._value = v;
+            if (this.progressTxt) this.progressTxt.text = ((v * 100) >> 0) + "%";
+            this.upImage.x = this.oriX - (1 - this._value) * this.maxLength;
+            this.callback?this.callback(v):null
+        }
+    }    
+    `
+}
\ No newline at end of file

src/canvasCom/progressBarSCom/progressBarS.stories.tsx

+import React from 'react';
+import { ProgressBarSCom } from './progressBarSCom';
+import { CodeCom } from "./codeCom"
+import {
+  Title,
+  Subtitle,
+  Description,
+  ArgsTable,
+  PRIMARY_STORY,
+} from '@storybook/addon-docs';
+import { clearStage } from '../../common/createStage';
+
+export default {
+  component: ProgressBarSCom,
+  title: 'Canvas组件/进度条',
+  //👇 Creates specific argTypes
+  parameters: { 
+    layout: 'centered',
+    docs: { 
+      page: () => {
+        clearStage();
+        return( <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <ArgsTable story={PRIMARY_STORY} />
+          <CodeCom></CodeCom>
+        </>)
+        },
+    } 
+  },
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = () => <ProgressBarSCom />;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+
+

src/canvasCom/progressBarSCom/progressBarSCom.tsx

+import React from 'react';
+import {ProgressBarS} from "../../sourceCode/canvas/ProgressBarS";
+import {createStage,isExistStage} from "../../common/createStage";
+
+export const ProgressBarSCom = ()=>{
+    createStage();
+    window.stage.removeAllChildren();
+    isExistStage(()=>{
+        //进度条底图
+        //@ts-ignore
+        var proBg = window.stage.addChild(FYGE.Sprite.fromUrl("resource/loadWhiteBar.png"))
+        proBg.position.set(100, 200);
+
+        //进度文字展示
+        //@ts-ignore
+        var progressBarLabel = new FYGE.TextField();
+        progressBarLabel.text = "0";
+        progressBarLabel.size = 24;
+        progressBarLabel.fillColor = "#ef9222"
+        progressBarLabel.stroke = 2;
+        progressBarLabel.strokeColor = "#ffffff"
+        progressBarLabel.position.set( 450,20);
+        proBg.addChild(progressBarLabel)
+
+        //进度条
+        //@ts-ignore
+        var pro = window.stage.addChild(FYGE.Sprite.fromUrl("resource/loadYellowBar.png"));
+        pro.position.set(112, 208)
+
+        //进度条托管
+        var progressBar = new ProgressBarS(pro ,null,(v)=>{
+            progressBarLabel.text = ((v * 100) >> 0)+"%"
+        });
+
+        //监听进度条前进信息
+        //@ts-ignore
+        window.stage.addEventListener(FYGE.Event.PROGRESS, (e)=>{
+            let pro = e.data;
+            //@ts-ignore
+            FYGE.Tween.get(progressBar)
+            .to({ value: pro }, 2000)
+        }, window.stage);
+
+        //触发进度条前进
+        //@ts-ignore
+        window.stage.dispatchEvent(FYGE.Event.PROGRESS, 1);
+     
+    })
+    return (
+      <div></div>
+    )
+}
\ No newline at end of file

src/docs/data/comData.ts

@@ -18,6 +18,16 @@ export const canvasData =[
         name:"丰富文本",
         imgUrl:"/resource/丰富文本.gif",
         href:"丰富文本"
+    },
+    {
+        name:"进度条",
+        imgUrl:"/resource/progressBarS.gif",
+        href:"进度条"
+    },
+    {
+        name:"弹幕",
+        imgUrl:"/resource/canvasDanmu.gif",
+        href:"弹幕"
     }
 ]
 export const reactData =[

src/sourceCode/canvas/DanmuCtrl.ts

+
+
+export class Danmu extends FYGE.Container{
+    danmudata;
+    danmuwidth;
+    danmuheight;
+    // danmuList:FYGE.Container;
+    constructor(data?){
+        super()
+        this.danmudata = data;
+        for(let i = 0;i<this.danmudata.lines;i++ ){
+            this["danmuList"+i] = new FYGE.Container();
+            this["danmuList"+i].height = this.danmudata.danmuheight;
+            this["danmuList"+i].width = this.danmudata.danmuwidth;
+            this["danmuList"+i].x = 0;
+            this["danmuList"+i].y = (this.danmudata.danmuheight-this.danmudata.lines*30)/2*i
+            this.addChild(this["danmuList"+i])
+
+        }
+        let num = this.danmudata.datalist.length%this.danmudata.lines
+        let num2 = Math.floor(this.danmudata.datalist.length/this.danmudata.lines)
+        let index = 0;
+        for(let i = 0;i<this.danmudata.lines;i++ ){
+            
+            if(i<num){
+                for(let n = 0;n<num2+1;n++ ){
+                    
+                    this.creatItem(i,n,this.danmudata.datalist[index].text,this.danmudata.needAvatar,this.danmudata.datalist[i].avatar,this.danmudata.datalist[index].nickName)
+                    index++
+                }
+            }else{
+                for(let n = 0;n<num2;n++ ){
+                    this.creatItem(i,n,this.danmudata.datalist[index].text,this.danmudata.needAvatar,this.danmudata.datalist[i].avatar,this.danmudata.datalist[index].nickName)
+                    index++
+                }
+            }
+        }
+
+    }
+
+    showDame(){
+        for(let i = 0;i<this.danmudata.lines;i++ ){
+            for(let n =0;n<this["danmuList"+i].children.length;n++){
+                FYGE.Tween.get(this["danmuList"+i].children[n],{loop:true})
+                .set({x:750})
+                .wait(480/this.danmudata.speed[i]*n*15)
+                .to({x:-500},750/this.danmudata.speed[i]*15)
+                .wait(480/this.danmudata.speed[i]*(this["danmuList"+i].children.length-n-1)*15)
+            }
+        }
+    }
+    
+    creatItem(index,numindex,textlab,needAvatar,avatar?,nickName?){
+        var danmuCon:FYGE.Container = new FYGE.Container();
+        danmuCon.width = 200;
+        danmuCon.height = 30;
+        danmuCon.x = 500*numindex
+        this["danmuList"+index].addChild(danmuCon)
+
+        var danmuBg:FYGE.Graphics = new FYGE.Graphics();
+       
+        danmuBg.beginFill(0xb27149,0.8)
+        danmuBg.drawRoundedRect(0,0,327, 50,70);
+        danmuBg.alpha = 0.7;
+        danmuCon.addChild(danmuBg);
+
+        if(needAvatar){
+            var danmuAvatarBg:FYGE.Graphics = new FYGE.Graphics();
+            danmuAvatarBg.beginFill(0xffce5a);
+            danmuAvatarBg.drawCircle(0,0,22);
+            danmuAvatarBg.x = 28;
+            danmuAvatarBg.y = 25;
+            danmuCon.addChild(danmuAvatarBg);
+
+            var mask = new FYGE.Graphics();
+            mask.beginFill(0xffffff);
+            mask.drawCircle(0,0,22);
+            mask.x = 28;
+            mask.y = 25;
+            danmuCon.addChild(mask);
+
+            var danmuAvatar:FYGE.Sprite = new FYGE.Sprite();
+            danmuAvatar = FYGE.Sprite.fromUrl(avatar);
+            danmuAvatar.x = 6;
+            danmuAvatar.y = 3;
+            danmuAvatar.width = 44;
+            danmuAvatar.height = 44;
+            danmuCon.addChild(danmuAvatar)
+            danmuAvatar.mask = mask;
+        }
+        var nickNameLab:FYGE.TextField = new FYGE.TextField();
+        nickNameLab.position.set(68, 15);
+        nickNameLab.fillColor = "#ffd800";
+        nickNameLab.size = 20;
+        nickNameLab.text = nickName
+        danmuCon.addChild(nickNameLab)
+
+        var danmuLab:FYGE.TextField = new FYGE.TextField();
+        danmuLab.position.set(nickNameLab.textWidth+75, 15);
+        danmuLab.fillColor = "#ffffff";
+        danmuLab.size = 20;
+        danmuLab.text = textlab
+        danmuCon.addChild(danmuLab)
+    }
+
+
+}
\ No newline at end of file

src/sourceCode/canvas/ProgressBarS.ts

+import { initWxConfig } from "../../module/tools/wxShare";
+
+/**
+ * 传入文案和进度条图片
+ * 进度条图片位移，固定遮罩
+ * 貌似这样就不需要继承显示类了
+ */
+export class ProgressBarS {
+    /**
+     * 0到1的进度
+     */
+    private _value = 0;
+    private upImage: FYGE.Sprite;
+    private progressTxt: FYGE.TextField;
+    private maxLength: number;
+    private oriX: number;
+    private callback:any;
+    constructor(upImage: FYGE.Sprite, txt?: FYGE.TextField, callback?:(v) => void) {
+        this.maxLength = upImage.width;//最大长度，直接取图片宽度
+
+        this.upImage = upImage;
+
+        this.progressTxt = txt;
+
+        this.callback = callback;
+        this.oriX = upImage.x;
+        var delta = 0
+        //传入的也可能是帧动画，这样原点就有问题了
+        if (upImage instanceof FYGE.FrameAni) delta = 0.5
+        //给图片加个矩形遮罩
+        this.upImage.mask = this.upImage.parent.addChild(new FYGE.Graphics())
+            .beginFill(0xf8c862)
+            .drawRoundedRect(
+                upImage.x - upImage.width * delta,
+                upImage.y - upImage.height * delta,
+                upImage.width,
+                upImage.height,
+                111
+            )
+            .endFill();
+
+
+        this.value = 0;
+    }
+
+    get value() {
+        return this._value;
+    }
+    set value(v) {
+        if (v < 0) v = 0;
+        if (v > 1) v = 1;
+        console.log("sssss")
+        this._value = v;
+        if (this.progressTxt) this.progressTxt.text = ((v * 100) >> 0) + "%";
+        this.upImage.x = this.oriX - (1 - this._value) * this.maxLength;
+        this.callback?this.callback(v):null
+    }
+}