test-whiteboard
Version:
https://gitlab.gridsum.com/gov_law_tech/FrontEnd/whiteboard
268 lines (199 loc) • 7.78 kB
JavaScript
import EventEmitter from './eventEmitter';
import Viewer from './viewer'
export default class Whiteboard{
constructor(elelment){
this.root = elelment;
/**
for(var i=0;i<this.root.childNodes.length;i++)
{
if(this.root.childNodes[i].nodeType!=1)
{
continue;
}
if(this.root.childNodes[i].getAttribute('class').indexOf('main-board')!=-1)
{
this.canvas=this.root.childNodes[i];
}
else if(this.root.childNodes[i].getAttribute('class').indexOf('draw-text')!=-1)
{
this.textElement=this.root.childNodes[i];
}
else if(this.root.childNodes[i].getAttribute('class').indexOf('img-container')!=-1)
{
this.imageElement = this.root.childNodes[i];
}
}
***/
this.emitter = new EventEmitter();
}
init (role) {
console.log('whiteboard init -- ')
this.role = role;
var me = this;
var root = me.root;
var bound = root.getBoundingClientRect();
var width = bound.width;
var height =bound.height;
//创建dom结构
var canvas = document.createElement('canvas');
canvas.setAttribute('name','main-canvas');
canvas.setAttribute('class','whiteboard-item main-board');
canvas.setAttribute('width',(width+20)+'px');
canvas.setAttribute('height',(height+20)+'px');
//canvas.setAttribute('style','border:solid 2px #f00;z-index:9999;cursor:move;');
root.append(canvas);
this.canvas = canvas;
//如果是查看状态，禁止操作
if(!(role instanceof Viewer))
{
this.canvas.addEventListener('mousemove',function (e) {
if(!me.role.drawers['line'].canvasTransform.canMove && e.button!=1 )
{
return;
}
console.log('canvas move2 ')
// me.role.drawers['line'].reDrawLine()
// 拖动完，把第一个的矩阵给第二个
var newMatrix = Object.assign({},me.role.drawers['line'].canvasTransform.matrix)
var imgCanvas = me.role.drawers['image'].canvas
var imgCtx = me.role.drawers['image'].canvasTransform.context;
imgCtx.clearRect(-5, -5, imgCanvas.width+10, imgCanvas.height+10);
imgCtx.setTransform.apply(imgCtx,newMatrix);
me.role.drawers['image'].canvasTransform.__drawSelf();
me.role.drawers['image'].canvasTransform.matrix['0'] = newMatrix['0']
me.role.drawers['image'].canvasTransform.matrix['1'] = newMatrix['1']
me.role.drawers['image'].canvasTransform.matrix['2'] = newMatrix['2']
me.role.drawers['image'].canvasTransform.matrix['3'] = newMatrix['3']
me.role.drawers['image'].canvasTransform.matrix['4'] = newMatrix['4']
me.role.drawers['image'].canvasTransform.matrix['5'] = newMatrix['5']
// console.log('line matrix--',me.role.drawers['line'].canvasTransform.matrix)
// console.log('image matrix--',me.role.drawers['image'].canvasTransform.matrix)
})
}
var textContainer = document.createElement('div');
textContainer.setAttribute('class','whiteboard-item item-box draw-text');
root.append(textContainer);
this.textElement = textContainer;
var imageContainer = document.createElement('div');
imageContainer.setAttribute('class','whiteboard-item item-box img-container');
root.append(imageContainer);
this.imageElement = imageContainer;
var messageBox = document.createElement('div');
messageBox.setAttribute('class','whiteboard-item message-box');
messageBox.setAttribute('style','display:none');
root.append(messageBox);
this.messageBox = messageBox;
me.role.container={
imageElement:this.imageElement,
canvas:this.canvas,
textElement:this.textElement
};
me.role.init();
this.on('notify_waitLoading',function () {
messageBox.setAttribute('style','display:block');
messageBox.innerText='正在加载图片';
});
this.on('notify_loadSuccess',function () {
messageBox.setAttribute('style','display:none');
messageBox.innerText='';
});
this.on('notify_loadError',function () {
messageBox.setAttribute('style','display:block');
messageBox.innerText='加载图片出错，格式不正确';
});
this.on('action_resetBox',function (width,height) {
me.resetBox(width,height);
});
}
resetBox(width,height){
this.textElement.style.width = width+'px';
this.textElement.style.height = height+'px';
this.imageElement.style.width = width+'px';
this.imageElement.style.height = height+'px';
this.messageBox.style.width = width+'px';
this.messageBox.style.height = height+'px';
this.canvas.setAttribute('width',width+'px'); // 改变canvas宽高，画布内容会清空
this.canvas.setAttribute('height',height+'px');
var ctx = this.canvas.getContext('2d');
// var grd=ctx.createLinearGradient(0,0,175,50);
// grd.addColorStop(0,"#FF0000");
// grd.addColorStop(1,"#00FF00");
// ctx.fillStyle=grd;
// ctx.fillStyle = '#FF0'
// ctx.fillRect(10,250,300,50);
// ctx.strokeStyle = "red";
//第四步：绘制矩形，只有线。内容是空的
// ctx.strokeRect(10, 10, width-20, height-20);
this.role.drawers['line'].canvasTransform.drawCanvas(this.canvas)
}
//清除后，全部重新初始化
destroy(){
let me = this;
while(this.root.childNodes.length>0)
{
this.root.removeChild(this.root.childNodes[0]);
}
this.role = null;
this.canvas=null;
this.textElement = null;
this.imageElement = null;
this.messageBox = null;
}
changeMode (currentMode, changeMove) {
this.role.changeMode(currentMode, changeMove);
}
/***
* 1放大 2 缩小 3 逆时针旋转 4 顺时针旋转 5 文字标注 6 划线标注 7 撤销上一步
* @param type
*/
action(type){
this.role.action(type);
}
on (key,fn) {
var me = this;
var item = me.role.eventDic.filter(function (item) {
return item==key;
});
if(item.length!=0)
{
me.role.on(key,fn);
}
else{
me.emitter.on(key,fn);
}
}
emit (key,args) {
var me = this;
var item = me.role.eventDic.filter(function (item) {
return item==key;
});
if(item.length!=0)
{
me.role.emit(key,args);
}
else{
me.emitter.emit(key,args);
}
}
getCanvasImage(imgElement){
let canvas = this.canvas;
imgElement.src=canvas.toDataURL("image/png");
}
getBlob()
{
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type:mime});
}
var dataurl = this.canvas.toDataURL('image/png');
var blob = dataURLtoBlob(dataurl);
return blob;
}
drawPaint(img){
this.role.drawPaint(img);
}
}