test-whiteboard/libs/viewer.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  Viewer {
    constructor(dom,transformMode){
        this.root = dom;
        this.drawers = {};
        this.callbacks={};
        this.emitter= new EventEmitter();
        this.eventDic=[

            'action_drawLine',
            'action_deleteLine',

            'action_drawText',
            'action_deleteText',


            'action_loadImage',

            'notify_loadSuccess',
            'notify_loadError',
            'notify_waitLoading',
            'action_resetBox'

        ];
        this.transformMode = transformMode;
    }
    init () {
        var me = this;
        var container = this.container;
        var transform = new canvasTransform(container.canvas,this.transformMode);
        var lineDrawer = new LineDrawer(container.canvas,'view',transform);

        me.registerDrawer('line',lineDrawer);


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

        me.registerDrawer('text',textViewer);


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

        //设置zindex
        container.canvas.style.zIndex=100;
        container.imageElement.style.zIndex=99;

    }

    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){
        let canvasTransform = this.drawers['image'].canvasTransform;

        let lineTransform = this.drawers['line'].canvasTransform;


        switch(type)
        {
            case 1:
                //放大
                canvasTransform.scale(0);
                lineTransform.scale(0);
                break;
            case 2:
                //缩小
                canvasTransform.scale(1);
                lineTransform.scale(1);
                break;
            case 3:
                canvasTransform.rotate(0);
                lineTransform.rotate(0);
                break;
            case 4:
                canvasTransform.rotate(1);
                lineTransform.rotate(1);
                break;

            case 7:

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


    }
}