تخته وایت برد آنلاین توسط SignalR
نویسنده: ناصر طاهری
تاریخ: ۱۳۹۲/۰۹/۱۱ ۲۱:۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروه‌های مطالب | ۱۰۲۴ |
| نقشه‌های راه | ۱۱۹ |
| دوره‌ها | ۱۴ |
| اشتراک‌ها | ۱۷۹۱۴ |
<link href="Styles/bootstrap.min.css" rel="stylesheet" />
//برای نمایش و استفاده از جعبه‌ی رنگ در بوت استراپ
<link href="Styles/bootstrap-colorpalette.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src='Scripts/jquery.signalR-1.1.3.js'></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-colorpalette.js"></script>
<script type="text/javascript" src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
//حاوی متدهایی برای رسم خط با استفاده از HTML5
<script src="Scripts/draw.js" type="text/javascript"></script>
//تعریف کلاینت‌های متصل به هاب
<script src="Scripts/Whiteboard.js"></script> using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using OnlineSignalRWhiteboard.Model;
namespace OnlineSignalRWhiteboard.Hubs
{
[HubName("onWhiteboard")]
public class Whiteboard : Hub
{
public void OnDrawPen(Point prev, Point current, string color, int width)
{
Clients.All.drawPen(prev, current, color, width);
}
public void ClearBoard()
{
Clients.All.clear();
}
}
} $(function () {
$.connection.hub.logging = true;
var whiteboard = $.connection.onWhiteboard;
$("#clear").click(function () {
//پاک کردن صفحه نمایش
whiteboard.server.clearBoard();
});
var color = function (colors) {
//تغییر رنگ قلم
draw.colour = colors;
};
$(".size").click(function () {
//تغییر سایز قلم
draw.lineWidth = $(this).height();
$('#size').css('height', $(this).height());
});
$.connection.hub.start().done(function () {
})
.fail(function () {
alert("Could not Connect!");
});
draw.onDraw = function (prev, current, color, width) {
//ارسال پارامترها به سمت سرور تا سرور بتواند داده‌ها را به سمت سایر کلاینت‌ها نیز ارسال کند
whiteboard.server.onDrawPen(prev, current, color, width);
};
whiteboard.client.drawPen = function (prev, current, color, width) {
draw.drawPen(prev, current, color, width);
};
whiteboard.client.clear = function () {
draw.clear();
};
$('#colorpalette3').colorPalette()
.on('selectColor', function (e) {
$('#color').css('background-color', e.color);
color(e.color);
});
var canvas = document.getElementById('draw');
//تغییر سایر کانواس متناسب با پنجره‌ی مرورگر
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 70;
}
resizeCanvas();
}); <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/bootstrap.min.css" rel="stylesheet" />
<link href="Styles/bootstrap-colorpalette.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src='Scripts/jquery.signalR-1.1.3.js'></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-colorpalette.js"></script>
<script type="text/javascript" src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script src="Scripts/draw.js" type="text/javascript"></script>
<script src="Scripts/Whiteboard.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="position: static;">
<div>
<div>
<a data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span></span>
<span></span>
<span></span>
</a>
<a href="#">تخته وایت برد آنلاین توسط SignalR و HTML5</a>
<div>
<ul>
<li>
<div>
<a id="selected-color2" data-toggle="dropdown">
<div style="width: 20px; height: 20px; background: black" id="color">
</div>
</a>
<ul style="width:293px;">
<li style="display:inline-block;">
<div>رنگ پس زمینه</div>
<div id="colorpalette3"></div>
</li>
</ul>
</div>
</li>
<li></li>
<li>
<div>
<a data-toggle="dropdown" style="width: 120px; height: 20px" href="#">
<hr style="width: 120px; height: 1px; background-color: black;margin: 0px; display: table-cell" id="size">
</a>
<ul style="width: 120px">
<li><hr style="width: 140px; height: 1px; background-color: black"></li>
<li></li>
<li><hr style="width: 140px; height: 3px; background-color: black"></li>
<li></li>
<li><hr style="width: 140px; height: 7px; background-color: black"></li>
<li></li>
<li><hr style="width: 140px; height: 10px; background-color: black"></li>
<li></li>
<li><hr style="width: 140px; height: 20px; background-color: black"></li>
</ul>
</div>
</li>
<li></li>
<li>
<div>
<a href="#" id="clear"><i></i>جدید</a>
</div>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
</div>
<div>
<div>
<canvas id="draw" style="cursor: crosshair;border: 1px solid black;"></canvas>
</div>
</div>
</form>
</body>
</html>