test-whiteboard
Version:
https://gitlab.gridsum.com/gov_law_tech/FrontEnd/whiteboard
158 lines (118 loc) • 3.79 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../dist/gsum-whiteboard.js"></script>
</head>
<body>
<style type="text/css">
html,body{
width:100%;
height: 100%;
padding:0px;
border:0px;
margin: 0px;
}
#whiteboard-container{
width:1000px;
height:500px;
margin:auto;
position: relative;
border: solid 2px #00F;
}
.whiteboard-item{
position: absolute;
top:0px;
left:0px;
}
.item-box{
width:100%;
height:100%;
}
#draw-text{
}
canvas{
border:1px solid red;
}
</style>
<div id="whiteboard-container"></div>
<button id="btn-delete">delete</button>
<button id="btn-drawLine">画线</button>
<button id="btn-drawText">标注</button>
<button id="drawLineClear">拖动模式</button>
<button id="big">放大</button>
<button id="small">缩小</button>
<button id="rotate0">顺转</button>
<button id="rotate1">逆转</button>
<script type="text/javascript">
var whiteboard = window.GsumWhiteboard;
var dom = document.getElementById('whiteboard-container');
var speaker = new whiteboard.Speaker(dom,true);
var board = new whiteboard.Whiteboard(dom);
board.init(speaker);
var url='http://p2.ifengimg.com/fck/2017_42/738c3492efb71d7_w700_h394.jpg';
board.on('notify_loadSuccess',function () {
console.log('loadSuccess');
});
board.on('notify_loadError',function () {
console.log('load error');
});
board.on('notify_waitLoading',function () {
console.log('loading');
});
board.on('notify_drawLine',function (data) {
//message service
// console.log('drawLine'+JSON.stringify(data));
});
board.on('notify_deleteLine',function (groupId) {
//message service
console.log('deleteLine,groupId:'+groupId);
});
board.on('notify_inputText',function (data) {
//message service
console.log(data);
});
board.on('notify_beginDrawText',function (data) {
//message service
console.log(data);
});
board.on('notify_endDrawText',function (data) {
//message service
console.log(data);
});
initBtn();
board.emit('action_loadImage',url);
function initBtn() {
var btnDelete = document.getElementById('btn-delete');
var btnDrawLine = document.getElementById('btn-drawLine');
var btnDrawText = document.getElementById('btn-drawText');
btnDelete.addEventListener('click',function () {
board.emit('action_deleteLine');
});
btnDrawLine.addEventListener('click',function () {
board.changeMode('line');
});
btnDrawText.addEventListener('click',function () {
board.changeMode('text');
});
//取消画线，改移动模式
document.getElementById('drawLineClear').addEventListener('click',function () {
board.changeMode('');
});
document.getElementById('big').addEventListener('click',function () {
board.action(1);
});
document.getElementById('small').addEventListener('click',function () {
board.action(2);
});
document.getElementById('rotate0').addEventListener('click',function () {
board.action(3);
});
document.getElementById('rotate1').addEventListener('click',function () {
board.action(4);
});
}
</script>
</body>
</html>