test-whiteboard/libs/speaker.js

https://gitlab.gridsum.com/gov_law_tech/FrontEnd/whiteboard

import  EventEmitter from './eventEmitter';

import  LineDrawer from './lineDrawer';
import  {TextDrawer} from './textDrawer';

import  ImageDrawer from './imageDrawer';
import  {canvasTransform} from 'canvas-transform';



export  default class Speaker{
    constructor(dom,transformMode){
        this.root = dom;
        this.drawers = {};
        this.callbacks={};
        this.emitter= new EventEmitter();
        this.eventDic=[
            'action_deleteLine',
            'action_drawLine',
            'notify_drawLine',
            'notify_deleteLine',

            'action_drawText',
            'action_deleteText',
            'notify_drawText',
            'notify_deleteText',

            'action_loadImage',
            'notify_loadSuccess',
            'notify_loadError',
            'notify_waitLoading',
            'action_resetBox'
        ];
        this.transformMode = transformMode;
        this.transform = null

    }
    init () {
        console.log('speaker init --')
        var me = this;
        var container = this.container;

        var transform = new canvasTransform(this.transformMode);
        this.transform = transform

        var lineDrawer = new LineDrawer(container.canvas,'speaker',transform);

        me.registerDrawer('line',lineDrawer);

        var textDrawer = new TextDrawer(container.textElement,container.canvas,transform);

        me.registerDrawer('text',textDrawer);


        var imageDraw = new  ImageDrawer(container.imageElement,this.transformMode);
        me.registerDrawer('image',imageDraw);
       



        //图片加载完毕，切换模式

        me.on('notify_loadSuccess',function () {

            me.changeMode('');
        });



    }
    changeMode (currentMode, changeMode = '') {

        for(var i in this.drawers)
        {
            if(i!=currentMode)
            {
                this.drawers[i].active(false);
            }
            else{
                this.drawers[i].active(true);

            }
        }

        if (changeMode) {
            this.transform.canMove = false
        } 


        
    }

    registerDrawer (mode,drawer) {
        this.drawers[mode] =drawer;
    }

    on (key,fn) {
        var me = this;

        var drawers=[];

        for(var d in me.drawers)
        {
            if( me.drawers[d].eventDic.indexOf(key)!=-1)
            {
                drawers.push(me.drawers[d]);
            }
        }

        if(drawers.length!=0)
        {
            for(var i=0;i<drawers.length;i++)
            {
                drawers[i].on(key,fn);
            }
        }
        else{
            me.emitter.on(key,fn);
        }
    }
    emit (key,args) {
        var me = this;
        var drawers=[];

        for(var d in me.drawers)
        {
            if( me.drawers[d].eventDic.indexOf(key)!=-1)
            {
                drawers.push(me.drawers[d]);
            }
        }

        if(drawers.length!=0)
        {
            for(var i=0;i<drawers.length;i++)
            {
                drawers[i].emit(key,args);
            }
        }
        else{
            me.emitter.emit(key,args);
        }
    }

    /***
     * 1放大 2 缩小 3 逆时针旋转 4 顺时针旋转 5 文字标注 6 划线标注 7 撤销上一步 8 切换页码
     * @param type
     */
   action(type){
        var me = this
       let canvasTransform = this.drawers['image'].canvasTransform;
       let lineTransform = this.drawers['line'].canvasTransform;
        console.log(typeof canvasTransform,JSON.stringify(canvasTransform))
        console.log(typeof lineTransform,JSON.stringify(lineTransform))

       switch(type)
       {
           case 1:
               //放大
               canvasTransform.scale(0);
               lineTransform.scale(0);
                // this.drawers['line'].reDrawLine()
               // lineTransform.drawCanvas(this.drawers['line'].canvas);

               break;
           case 2:
               //缩小
               canvasTransform.scale(1);
               lineTransform.scale(1);

                   // this.drawers['line'].reDrawLine()

               break;
           case 3:
               canvasTransform.rotate(0);
               lineTransform.rotate(0);
               // this.drawers['line'].reDrawLine()
               break;
           case 4:
               canvasTransform.rotate(1);
               lineTransform.rotate(1);
               // this.drawers['line'].reDrawLine()

               break;

           case 7:

               break;
           default:
               break;
       }
        //console.log(typeof canvasTransform,JSON.stringify(canvasTransform))
        //console.log(typeof lineTransform,JSON.stringify(lineTransform))

   }

    drawPaint(img){
        this.canvas = this.container.canvas;
        var context = canvas.getContext('2d');
        context.drawImage(img,0,0);

        //context.fillStyle = '#f00'
        //context.fillRect(100,250,100,100)

    }

}