test-whiteboard/libs/textDrawer.js

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

import Mixin from './mixin';
import EventEmitter from './eventEmitter';

import Stroke from './stroke';

import WhiteboardText from './whiteboardText';
import math from "mathjs";


class TextDataStore {
  constructor() {
    this.data = [];
    this.maxId = 1;

  }

  addData(line) {
    this.data.push(line);
    this.maxId++;
  }

  getNextId() {
    return this.maxId;
  }

  deleteData(id) {
    this.data = this.data.filter(function (item) {
      return item.id != id;
    });
  }
}

export class TextDrawer extends Mixin(EventEmitter) {
  constructor(root, canvas, canvasTransform, isView) {
    super();
    var me = this;

    this.root = root;
    this.isView = isView;


    this.canvas = canvas;
    this.context = canvas.getContext('2d');

    console.log('txt constructor --')
    // var grd=this.context.createLinearGradient(0,0,175,50);
    // grd.addColorStop(0,"#FFFF00");
    // grd.addColorStop(1,"#0000FF");
    // this.context.fillStyle=grd;
    // this.context.fillRect(300,0,200,100);


    this.canvasTransform = canvasTransform;


    var cacheCanvas = document.createElement('canvas');
    var cacheContext = cacheCanvas.getContext('2d');

    cacheCanvas.width = this.canvas.width;
    cacheCanvas.height = this.canvas.height;

    this.cacheCanvas = cacheCanvas;

    this.cacheContext = cacheContext;


    this.canDraw = false;
    this.hasInit = false;
    this.emitter = new EventEmitter();
    this.eventDic = [
      'action_drawText',
      'action_deleteText',

      'notify_drawText',
      'notify_deleteText'
    ];
    this.lastData = {};


    var rootText = document.createElement('div');
    rootText.id = 'text-container';
    rootText.style = 'width:100%;height:100%;position:absolute;top:0px;left:0px;';
    this.dataStore = new TextDataStore();

    var  me = this;
    this.on('action_drawText', function (data) {
      me.draw(data);
    });


    if (this.isView) {
      return;
    }

    var element = document.createElement('input');


    element.style = 'position:absolute;z-index:9999;display:none;';


    element.addEventListener('blur', function () {
      element.style.display = 'none';
      me.emit('notify_drawText', me.lastData);

      me.draw(me.lastData);
    });


    element.addEventListener('keyup', function () {
      var content = element.value;
      // 绘制
      var position = {
        x: element.offsetLeft,
        y: element.offsetTop
      };

      position.y += element.getBoundingClientRect().height / 2;


      //使用矩阵 自动计算新的坐标
      var reverseMatrix = me.calReverseMatrix()
      var newCoord = me.matrixMultiCoor(reverseMatrix, [position.x, position.y])
      position.x = newCoord[0];
      position.y = newCoord[1];


      var id = me.dataStore.getNextId();

      var stroke = new Stroke('red', '30px');


      var model = new WhiteboardText(id, content, position.x, position.y, stroke);
      me.lastData = model;
      me.dataStore.addData(model)
      me.canvasTransform.textStore = me.dataStore

    });

    var bound = root.getBoundingClientRect();

    root.appendChild(element);
    this.inputElement = element;
    root.append(rootText);
    this.rootText = rootText;
  }

  init() {
    var me = this;

    if (this.isView) {
      return;
    }

    me.root.addEventListener('click', function (e) {

      var position = {
        x: e.offsetX,
        y: e.offsetY
      };

      if (!me.canDraw) {
        return;
      }
      me.inputElement.value = '';


      var element = me.inputElement;

      element.style.top = position.y + 'px';
      element.style.left = position.x + 'px';
      element.style.display = 'block';
      element.focus();

      me.emit('notify_beginDrawText');


    });

    this.canDraw = true;


  }

  draw(data) {
    //绘制前先保存

    this.context.font = '20px Arial'
    this.context.fillText(data.content, data.x, data.y);
    // this.canvasTransform.drawCanvas(this.canvas);


    /**
     let cacheCanvas = this.cacheCanvas;
     this.context.putImageData(this.cacheContext.getImageData(0,0,cacheCanvas.width,cacheCanvas.height),0,0);
     this.canvasTransform.backup(this.canvas);
     **/

  }


  // 计算逆矩阵
  calReverseMatrix() {
    var me = this
    var matrix = me.canvasTransform.matrix
    var oriMat = math.matrix([
      [1, 0, 0],
      [0, 1, 0],
      [0, 0, 1]
    ])
    var curMat = math.matrix([
      [matrix[0], matrix[2], matrix[4]],
      [matrix[1], matrix[3], matrix[5]],
      [0, 0, 1]
    ])
    var revMat = math.divide(oriMat, curMat)
    var revMatData = revMat._data
    // if(Math.abs(degR) == 90 || Math.abs(degR) == 270)
    if (revMatData[0][2] == 0) {
      if (matrix[4] != 0) {
        revMatData[0][2] = revMatData[1][2] / matrix[4] * matrix[5] * -1
      }
      else {
        revMatData[0][2] = 0
      }
    }
    var reverseMatrix = [revMatData[0][0], revMatData[1][0], revMatData[0][1], revMatData[1][1], revMatData[0][2], revMatData[1][2]]

    return reverseMatrix
  }

  // 计算逆矩阵的坐标
  matrixMultiCoor(matrix1, coord) {
    var x = 0, y = 0

    x = matrix1[0] * coord[0] + matrix1[2] * coord[1] + matrix1[4] * 1
    y = matrix1[1] * coord[0] + matrix1[3] * coord[1] + matrix1[5] * 1

    return [x, y]
  }

  reDrawText() {

  }

  active(active) {
    if (!this.hasInit && active) {
      this.init();
    }
    if (!active) {
      this.canDraw = false;
      this.root.style.zIndex = '2';
      this.canvas.style.zIndex = '99'
    }
    else {
      // 激活
      this.root.style.zIndex = '99';
      this.root.style.cursor = 'text';
      this.canvas.style.zIndex = '98'
      this.canvas.style.cursor = 'text';
    }
    if (this.hasInit && active) {
      this.canDraw = true;
    }
  }

  deleteText(id) {

  }
}