添加大转盘组件

src/canvasCom/dazhuanpanCom/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 `
+const dazhuanpan = new Dazhuanpan(pros.bgImg, pros.innerImg, pros.beginBtnImg,pros.pointImg,pros.prizePosition,pros.prizeList,()=>{
+console.log("大转盘转动结束后的回调")
+});
+//@ts-ignore
+dazhuanpan.position.set(300,100)
+//设置旋转部分的位置
+dazhuanpan.setRotatePartPosition(70,70)
+//设置指针的位置
+dazhuanpan.setPointerPosition(250,0);
+//设置开始抽奖按钮的位置
+dazhuanpan.setBeginBtnPosition(220,220);
+//设置抽中的奖品；
+dazhuanpan.setHitPrize(pros.prizeId);
+window.stage.addChild(dazhuanpan);
+    `
+}
+//源码
+const getSourceCode = ()=>{
+    return`
+    //@ts-ignore
+export class Dazhuanpan extends FYGE.Container{
+    dzpBg:FYGE.Sprite;
+    rotatePart:FYGE.Sprite;
+    pointer:FYGE.Sprite;
+    beginBtn:FYGE.Sprite;
+    prizeList:any;
+    roatteTween:any;
+    prizeId:any;
+    callback:any;
+    prizePosition:Array<number>;
+    constructor(bgImg,innerImg,beginBtnImg,pointImg,prizePosition,prizeList,callback?){
+        super();
+        this.dzpBg = FYGE.Sprite.fromUrl(bgImg);
+        this.addChild(this.dzpBg);
+
+        this.rotatePart = FYGE.Sprite.fromUrl(innerImg);
+        this.dzpBg.addChild(this.rotatePart);
+
+        this.pointer = FYGE.Sprite.fromUrl(pointImg);
+        this.dzpBg.addChild(this.pointer);
+
+        this.beginBtn = FYGE.Sprite.fromUrl(beginBtnImg);
+        this.dzpBg.addChild(this.beginBtn);
+
+        this.prizePosition = prizePosition;
+        this.prizeList = prizeList;
+        this.addPrizeOnDzp(prizeList);
+
+        this.callback = callback;
+        this.beginBtn.addEventListener(FYGE.MouseEvent.CLICK,()=>{
+            this.beginRotateDzp() 
+        },this)
+
+    }
+    setRotatePartPosition(x,y){
+        this.rotatePart.position.set(x,y);
+    }
+    setPointerPosition(x,y){
+        this.pointer.position.set(x,y);
+    }
+    setBeginBtnPosition(x,y){
+        this.beginBtn.position.set(x,y);
+    }
+    setHitPrize(prizeId){
+        this.prizeId = prizeId;
+    }
+    addPrizeOnDzp(prizeList){
+        let len = prizeList.length;
+        let deg = 360/len;
+        prizeList.forEach((el, index) => {
+            let prize = FYGE.Sprite.fromUrl(el.icon);
+            prize.width = 84;
+            prize.height = 53;
+            let prizeContainer = new FYGE.Container();
+            prizeContainer.addChild(prize);
+            prizeContainer.position.set(this.prizePosition[0],this.prizePosition[1]);
+            prizeContainer.anchorX = 41;
+            prizeContainer.anchorY = 145;
+
+            let prizeName = new FYGE.TextField();
+            prizeName.textWidth = 150;
+            prizeName.textAlign = FYGE.TEXT_ALIGN.CENTER;
+            prizeName.text = el.name;
+            prizeName.size = 22;
+            prizeName.fillColor = "#ffffff";
+            prizeName.stroke = 2;
+            prizeName.strokeColor = "#eb9e51";
+            prizeName.position.set(this.prizePosition[0]-35, this.prizePosition[1]-35);
+            prizeName.anchorX = 75;
+            prizeName.anchorY = 181;
+
+            prizeContainer.rotation = 360 - index * deg;
+            prizeName.rotation = 360- index * deg
+            
+            this.rotatePart.addChild(prizeContainer);
+            this.rotatePart.addChild(prizeName)
+        })
+    }
+    resetDzp(){
+        this.rotatePart.rotation = 0;
+    }
+    beginRotateDzp(){
+        var index = null;
+        this.prizeList.forEach((el, i) => {
+            if (el.prizeId === this.prizeId) {
+                index = i;
+            }
+        });
+
+        if (index === null) {
+            console.log("抽奖异常");
+            return;
+        }
+        let len = this.prizeList.length;
+        let deg = 360/len;
+        let rotateDeg = index * deg;
+        this.beginBtn.mouseEnable = false;
+        this.beginBtn.mouseChildren = false;
+        this.rotatePart.rotation = 0;
+        this.rotatePart.anchorX = 226;
+        this.rotatePart.anchorY = 227;
+        this.roatteTween = FYGE.Tween.get(this.rotatePart)
+            .to({ rotation: 180 }, 200)
+            .to({ rotation: 360 }, 300)
+            .to({ rotation: 540 }, 400)
+            .to({ rotation: 720 }, 500)
+            .to({ rotation: 900 }, 900)
+            .to({ rotation: 1080 }, 2000)
+            .to({ rotation: 1080 + deg }, 4000 * rotateDeg / 180)
+            .call(() => {
+                this.beginBtn.mouseEnable = true;
+                this.beginBtn.mouseChildren = true;
+                this.callback && this.callback();
+            })
+    }
+}
+    `
+}
\ No newline at end of file

src/canvasCom/dazhuanpanCom/dazhuanpan.stories.tsx

+import React from 'react';
+import { DazhuanpanCom } from './dazhuanpanCom';
+import { CodeCom } from './codeCom';
+import {
+  Title,
+  Subtitle,
+  Description,
+  ArgsTable,
+  PRIMARY_STORY,
+} from '@storybook/addon-docs';
+import { clearStage } from '../../common/createStage';
+
+
+export default {
+  component: DazhuanpanCom,
+  title: 'Canvas组件/大转盘',
+  //👇 Creates specific argTypes
+  parameters: { 
+    layout: 'centered',
+    docs: { 
+      page: () => {
+        clearStage();
+        return( <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <ArgsTable story={PRIMARY_STORY} />
+          <CodeCom></CodeCom>
+        </>)
+      },
+    } 
+  },
+  
+};
+const goldCoinReceiveAniCallback =(goldCode)=>{
+
+}
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <DazhuanpanCom {...args} />;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: '大转盘',
+  bgImg:"resource/dazhuanpan/dazhuanpanBg.png",
+  innerImg:"resource/dazhuanpan/innerPart.png",
+  beginBtnImg:"resource/dazhuanpan/beginBtn.png",
+  pointImg:"resource/dazhuanpan/dazhuanpanPointer.png",
+  prizeId:"sss_13",
+  prizePosition:[185,80],
+  prizeList:[{
+    icon: "//yun.dui88.com/projectxh5/coupon-250-250.png",
+    id: "oe8dff3af",
+    index: 1,
+    name: "f优惠券",
+    prizeId: "sss_15",
+    prizeType: 2,
+    refId: "88661",
+    refType: "coupon",
+  },{
+    icon: "//yun.dui88.com/projectxh5/coupon-250-250.png",
+    id: "o184c36c3",
+    index: 2,
+    name: "e优惠券",
+    prizeId: "sss_15",
+    prizeType: 2,
+    refId: "88661",
+    refType: "coupon",
+    sendCount: 1,
+  },{
+    degree: "10",
+    icon: "//yun.dui88.com/projectxh5/alipay-250-250.png",
+    id: "ofd8cb484",
+    index: 3,
+    name: "d支付宝10",
+    prizeId: "sss_14",
+    prizeType: 2,
+    refId: "53",
+    refType: "alipay",
+    sendCount: 1,
+  },{
+    degree: "10",
+    icon: "//yun.dui88.com/projectxh5/alipay-250-250.png",
+    id: "of98c438d",
+    index: 4,
+    name: "c支付宝10",
+    prizeId: "sss_13",
+    prizeType: 2,
+    refId: "53",
+    refType: "alipay",
+    sendCount: 1,
+  },{
+    degree: "10",
+    icon: "//yun.dui88.com/projectxh5/phonebill-250-250.png",
+    id: "o527ff73c",
+    index: 5,
+    name: "b话费",
+    prizeId: "sss_12",
+    prizeType: 2,
+    refId: "1",
+    refType: "phonebill",
+    sendCount: 1,
+  },{
+    degree: "10",
+    icon: "//yun.dui88.com/projectxh5/phonebill-250-250.png",
+    id: "of623b9e0",
+    index: 6,
+    name: "a话费",
+    prizeId: "sss_11",
+    prizeType: 2,
+    refId: "1",
+    refType: "phonebill",
+    sendCount: 1,
+  }
+]
+};
+

src/canvasCom/dazhuanpanCom/dazhuanpanCom.tsx

+import React from 'react';
+import { Dazhuanpan } from "../../sourceCode/canvas/dazhuanpan";
+import {createStage,isExistStage} from "../../common/createStage"
+import { useEffect } from 'react';
+interface propsType {
+    /**大转盘背景 */
+    bgImg:string,
+    /**大转盘转动区域 */
+    innerImg:string,
+    /**启动转盘按钮*/
+    beginBtnImg:string;
+    /**大转盘指针 */
+    pointImg:string,
+    /**奖品位置 */
+    prizePosition:Array<number>
+    /**大转盘奖品列表 */
+    prizeList:Array<object>,
+    /**大转盘抽奖后的回调 */
+    callback:any,
+    /**中奖ID */
+    prizeId:any,
+  }
+export const DazhuanpanCom = (pros:propsType)=>{
+    createStage()
+    isExistStage(()=>{
+      window.stage.removeAllChildren();
+      const dazhuanpan = new Dazhuanpan(pros.bgImg, pros.innerImg, pros.beginBtnImg,pros.pointImg,pros.prizePosition,pros.prizeList,()=>{
+        console.log("大转盘转动结束后的回调")
+      });
+      //@ts-ignore
+      dazhuanpan.position.set(300,100)
+      //设置旋转部分的位置
+      dazhuanpan.setRotatePartPosition(70,70)
+      //设置指针的位置
+      dazhuanpan.setPointerPosition(250,0);
+      //设置开始抽奖按钮的位置
+      dazhuanpan.setBeginBtnPosition(220,220);
+
+      //设置抽中的奖品；
+      dazhuanpan.setHitPrize(pros.prizeId);
+
+      window.stage.addChild(dazhuanpan);
+    })
+    return (
+      <div></div>
+    )
+}
\ No newline at end of file

src/common/createStage.ts

@@ -30,10 +30,16 @@ export const createStage = ()=>{
     
     //点击事件绑定
     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);
+
+    canvas.addEventListener("mousedown",mouseEvent,false);
+    canvas.addEventListener("mousemove",mouseEvent,false);
+    canvas.addEventListener("mouseup",mouseEvent,false);
+
+    // canvas.addEventListener("click",mouseEvent,false);
     function loop() { 
         stage.flush();
         window.FYGE.Tween.flush();

src/docs/data/comData.ts

@@ -28,6 +28,11 @@ export const canvasData =[
         name:"弹幕",
         imgUrl:"/resource/canvasDanmu.gif",
         href:"弹幕"
+    },
+    {
+        name:"大转盘",
+        imgUrl:"/resource/canvasDazhuanpan.gif",
+        href:"大转盘"
     }
 ]
 export const reactData =[

src/sourceCode/canvas/dazhuanpan.ts

+//@ts-ignore
+export class Dazhuanpan extends FYGE.Container{
+    dzpBg:FYGE.Sprite;
+    rotatePart:FYGE.Sprite;
+    pointer:FYGE.Sprite;
+    beginBtn:FYGE.Sprite;
+    prizeList:any;
+    roatteTween:any;
+    prizeId:any;
+    callback:any;
+    prizePosition:Array<number>;
+    constructor(bgImg,innerImg,beginBtnImg,pointImg,prizePosition,prizeList,callback?){
+        super();
+        this.dzpBg = FYGE.Sprite.fromUrl(bgImg);
+        this.addChild(this.dzpBg);
+
+        this.rotatePart = FYGE.Sprite.fromUrl(innerImg);
+        this.dzpBg.addChild(this.rotatePart);
+
+        this.pointer = FYGE.Sprite.fromUrl(pointImg);
+        this.dzpBg.addChild(this.pointer);
+
+        this.beginBtn = FYGE.Sprite.fromUrl(beginBtnImg);
+        this.dzpBg.addChild(this.beginBtn);
+
+        this.prizePosition = prizePosition;
+        this.prizeList = prizeList;
+        this.addPrizeOnDzp(prizeList);
+
+        this.callback = callback;
+        this.beginBtn.addEventListener(FYGE.MouseEvent.CLICK,()=>{
+           this.beginRotateDzp() 
+        },this)
+
+    }
+    setRotatePartPosition(x,y){
+        this.rotatePart.position.set(x,y);
+    }
+    setPointerPosition(x,y){
+        this.pointer.position.set(x,y);
+    }
+    setBeginBtnPosition(x,y){
+        this.beginBtn.position.set(x,y);
+    }
+    setHitPrize(prizeId){
+        this.prizeId = prizeId;
+    }
+    addPrizeOnDzp(prizeList){
+        let len = prizeList.length;
+        let deg = 360/len;
+        prizeList.forEach((el, index) => {
+            let prize = FYGE.Sprite.fromUrl(el.icon);
+            prize.width = 84;
+            prize.height = 53;
+            let prizeContainer = new FYGE.Container();
+            prizeContainer.addChild(prize);
+            prizeContainer.position.set(this.prizePosition[0],this.prizePosition[1]);
+            prizeContainer.anchorX = 41;
+            prizeContainer.anchorY = 145;
+
+            let prizeName = new FYGE.TextField();
+            prizeName.textWidth = 150;
+            prizeName.textAlign = FYGE.TEXT_ALIGN.CENTER;
+            prizeName.text = el.name;
+            prizeName.size = 22;
+            prizeName.fillColor = "#ffffff";
+            prizeName.stroke = 2;
+            prizeName.strokeColor = "#eb9e51";
+            prizeName.position.set(this.prizePosition[0]-35, this.prizePosition[1]-35);
+            prizeName.anchorX = 75;
+            prizeName.anchorY = 181;
+
+            prizeContainer.rotation = 360 - index * deg;
+            prizeName.rotation = 360- index * deg
+         
+            this.rotatePart.addChild(prizeContainer);
+            this.rotatePart.addChild(prizeName)
+        })
+    }
+    resetDzp(){
+        this.rotatePart.rotation = 0;
+    }
+    beginRotateDzp(){
+        var index = null;
+        this.prizeList.forEach((el, i) => {
+            if (el.prizeId === this.prizeId) {
+                index = i;
+            }
+        });
+
+        if (index === null) {
+            console.log("抽奖异常");
+            return;
+        }
+        let len = this.prizeList.length;
+        let deg = 360/len;
+        let rotateDeg = index * deg;
+        this.beginBtn.mouseEnable = false;
+        this.beginBtn.mouseChildren = false;
+        this.rotatePart.rotation = 0;
+        this.rotatePart.anchorX = 226;
+        this.rotatePart.anchorY = 227;
+        this.roatteTween = FYGE.Tween.get(this.rotatePart)
+            .to({ rotation: 180 }, 200)
+            .to({ rotation: 360 }, 300)
+            .to({ rotation: 540 }, 400)
+            .to({ rotation: 720 }, 500)
+            .to({ rotation: 900 }, 900)
+            .to({ rotation: 1080 }, 2000)
+            .to({ rotation: 1080 + deg }, 4000 * rotateDeg / 180)
+            .call(() => {
+                this.beginBtn.mouseEnable = true;
+                this.beginBtn.mouseChildren = true;
+                this.callback && this.callback();
+            })
+    }
+}
\ No newline at end of file