|
require(["jquery", "ipu-stomp"], function($, IpuStomp,) {
// var baseUrl = "ws://localhost:7100/stomp";
var baseUrl = "ws://47.105.160.21:7100/stomp";
var login = "empty_account1";
var passcode = "123456";
var host = "";
var client;
//为发送者input绑定onchange事件
$("#userId").on("change", function(e) {
$("#userId").val(e.target.value);
})
var callbacks = {};
callbacks.onConnected = function(msg){
console.log("连接成功：" + msg);
alert("连接成功：" + msg);
$("#connBtn").val("断开连接");
$("#connBtn").attr("id", "disconnBtn");
$("#userId").attr("disabled", "disabled");
}
callbacks.onFailure = function(msg){
console.log("连接失败：" + msg);
alert("连接失败：" + msg);
}
$("#connBtn").on("click", function(e) {
if (typeof (WebSocket) == "undefined") {
console.log("您的浏览器不支持WebSocket");
} else {
console.log("您的浏览器支持WebSocket");
//实例化WebSocket对象，指定要连接的服务器地址与端口 建立连接
//等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
if (!client || !client.connected()) {
//检查用户ID
if (!$("#userId").val()) {
alert("请填写用户名")
return;
}
client = IpuStomp.connect({url:baseUrl,name:login,passcode:passcode,host:host}, callbacks);
client.setTopicPath("topic");
} else {
client.disconnect();
subscription && subscription.unsubscribe();
$("#disconnBtn").val("连接服务器");
$("#disconnBtn").attr("id", "connBtn");
$("#userId").removeAttr("disabled");
}
}
});
var path = []
$("#login").on(
"click",
function(e) {
//校验连接状态
if (!client || !client.connected()) {
alert("服务未连接")
return;
}
//校验发布频道
if (!$("#topic").val()) {
alert("请填写发送频道")
return;
}
chalkboard();
})
function chalkboard(){
$('#chalkboard').remove();
$('.chalk').remove();
// $('#canvas').prepend('<div class="panel"><a class="link" target="_blank">Save</a></div>');
$('#canvas').prepend('<img src="img/bg.png" id="pattern" width=50 height=50>');
$('#canvas').prepend('<canvas id="chalkboard"></canvas>');
$('#canvas').prepend('<div class="chalk"></div>');
var canvas = document.getElementById("chalkboard");
$('#chalkboard').css('width','200px');
$('#chalkboard').css('height','400px');
canvas.width = 200;
canvas.height = 400;
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var mouseX = 0;
var mouseY = 0;
var mouseD = false;
var eraser = false;
var xLast = 0;
var yLast = 0;
var brushDiameter = 7;
var eraserWidth = 50;
var eraserHeight = 100;
$('#chalkboard').css('cursor','none');
document.onselectstart = function(){ return false; };
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.strokeStyle = 'rgba(255,255,255,0.5)';
ctx.lineWidth = brushDiameter;
ctx.lineCap = 'round';
var patImg = document.getElementById('pattern');
document.addEventListener('touchmove', function(evt) {
var touch = evt.touches[0];
mouseX = touch.pageX;
mouseY = touch.pageY;
if (mouseY < height && mouseX < width) {
evt.preventDefault();
$('.chalk').css('left', mouseX + 'px');
$('.chalk').css('top', mouseY + 'px');
//$('.chalk').css('display', 'none');
if (mouseD) {
draw(mouseX, mouseY);
}
}
}, false);
document.addEventListener('touchstart', function(evt) {
//evt.preventDefault();
var touch = evt.touches[0];
mouseD = true;
mouseX = touch.pageX;
mouseY = touch.pageY;
xLast = mouseX;
yLast = mouseY;
draw(mouseX + 1, mouseY + 1);
}, false);
document.addEventListener('touchend', function(evt) {
mouseD = false;
}, false);
$('#chalkboard').css('cursor','none');
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.strokeStyle = 'rgba(255,255,255,0.5)';
ctx.lineWidth = brushDiameter;
ctx.lineCap = 'round';
$(document).mousemove(function(evt){
mouseX = evt.pageX;
mouseY = evt.pageY;
if(mouseY<height && mouseX<width){
$('.chalk').css('left',(mouseX-0.5*brushDiameter)+'px');
$('.chalk').css('top',(mouseY-0.5*brushDiameter)+'px');
if(mouseD){
if(eraser){
erase(mouseX,mouseY);
}else{
draw(mouseX,mouseY);
}
}
}else{
$('.chalk').css('top',height-10);
}
});
$(document).mousedown(function(evt){
mouseD = true;
xLast = mouseX;
yLast = mouseY;
if(evt.button == 2){
erase(mouseX,mouseY);
eraser = true;
$('.chalk').addClass('eraser');
}else{
if(!$('.panel').is(':hover')){
draw(mouseX+1,mouseY+1);
}
}
});
$(document).mouseup(function(evt){
mouseD = false;
if(evt.button == 2){
eraser = false;
$('.chalk').removeClass('eraser');
}
});
$(document).keyup(function(evt){
if(evt.keyCode == 32){
ctx.clearRect(0,0,width,height);
layPattern();
}
});
$(document).keyup(function(evt){
if(evt.keyCode == 83){
changeLink();
}
});
document.oncontextmenu = function() {return false;};
function draw(x,y){
ctx.strokeStyle = 'rgba(255,255,255,'+(0.4+Math.random()*0.2)+')';
ctx.beginPath();
ctx.moveTo(xLast, yLast);
ctx.lineTo(x, y);
ctx.stroke();
// Chalk Effect
var length = Math.round(Math.sqrt(Math.pow(x-xLast,2)+Math.pow(y-yLast,2))/(5/brushDiameter));
var xUnit = (x-xLast)/length;
var yUnit = (y-yLast)/length;
for(var i=0; i<length; i++ ){
var xCurrent = xLast+(i*xUnit);
var yCurrent = yLast+(i*yUnit);
var xRandom = xCurrent+(Math.random()-0.5)*brushDiameter*1.2;
var yRandom = yCurrent+(Math.random()-0.5)*brushDiameter*1.2;
ctx.clearRect( xRandom, yRandom, Math.random()*2+2, Math.random()+1);
}
xLast = x;
yLast = y;
var sendText = '{"userId":"' + $("#userId").val()
+ '","topic":"' + $("#topic").val()
+ '","contentText":"' + canvas.toDataURL("image/png",0.5).toString() + '"}'
client.publish($("#topic").val(), sendText);
}
function erase(x,y){
ctx.clearRect (x-0.5*eraserWidth,y-0.5*eraserHeight,eraserWidth,eraserHeight);
var sendText = '{"userId":"' + $("#userId").val()
+ '","topic":"' + $("#topic").val()
+ '","contentText":"' + canvas.toDataURL("image/png",0.5).toString() + '"}'
client.publish($("#topic").val(), sendText);
}
$('.link').click(function(evt){
$('.download').remove();
var imgCanvas = document.createElement('canvas');
var imgCtx = imgCanvas.getContext("2d");
var pattern = imgCtx.createPattern(patImg,'repeat');
imgCanvas.width = width;
imgCanvas.height = height;
imgCtx.fillStyle = pattern;
imgCtx.rect(0,0,width,height);
imgCtx.fill();
var layimage = new Image;
layimage.src = canvas.toDataURL("image/png");
setTimeout(function(){
imgCtx.drawImage(layimage,0,0);
var compimage = imgCanvas.toDataURL("image/png");//.replace('image/png','image/octet-stream');
$('.panel').append('<a href="'+compimage+'" download="chalkboard.png" class="download">Download</a>');
$('.download').click(function(){
IEsave(compimage);
});
}, 500);
});
function IEsave(ctximage){
setTimeout(function(){
var win = window.open();
$(win.document.body).html('<img src="'+ctximage+'" name="chalkboard.png">');
},500);
}
$(window).resize(function(){
chalkboard();
});
}
});
|
