ابزار نقاشی در وب با استفاده از HTML5 CANVAS در Asp.Net
دوشنبه 23 تیر 1393ابزار نقاشی در وب با استفاده از HTML5 CANVAS در Asp.Net
ساخت یک ابزار نقاشی بر پایه وب ،با استفاده از Asp.Net سخت تر از ویندوز اپلیکیشن است . من با استفاده از Html Canvas توانستم یک ابزار نقاشی ساده را طراحی کنم.
Html5 کار مرا ساده تر کرد . کار با Html5 خیلی برایم لذت بخش است.
حالا ببینیم Html Canvas چیست.Html Canvas یک عنصر برای طراحی گرافیک در صفحه وب است.
به یک گفتار ساده ،می توان گفت که Canvas یک قالب مستطیلی در صفحه وب است که می توان در آن طراحی گرافیک کرد.
برای ساخت یک ابزار نقاشی برپایه وب ،ما باید از یک عنصر Html5 Canvas با javascript استفاده کنیم.
جزئیات را در کد باهم خواهیم دید.
هم اکنون مقدماتی برای یادگیری Html5 و تگ های Canvas را باهم بررسی خواهیم کرد.
Html5 ،یک ورژن جدید از Html است.
Html5 از Cross-platform پشتیبانی میکند ،به این معنی که Html5 میتواند درpc و تبلت و موبایل کار کند.
Html5 باید با یک Doctype شروع شود.
<!DOCTYPE html> <html> <body></body> </html>
ویژگیهای جدید در Html5 به صورت زیر می باشد
CANVAS،AUDIO، VIDEO
CANVAS
Canvas،یک عنصر برای طراحی دو بعدی با استفاده از javascript است.
Canvas ، متدهایی مانند رسم کردن، مستطیل ،کمان ،تکس و مانند آن را دارد
عنصر Canvas مانند زیر است.
<canvas id="canvas" width="400" height="400"></canvas>
برای جزئیات بیشتر در مورد Html5 و تگ های Canvas از google استفاده کنید.
خیلی چیزهای جالب برای یادگیری در Html5 وجود دارد.
هدف اصلی این است که یک برنامه ساده و آسان در هنگام استفاده را بسازیم
همه متدها بخوبی در پروژه کامنت گذاری شده اند.
من یک برنامه ساده را برای دیدن جزئیات بیشتر به این مقاله اضافه کرده ام.
ما در اینجا یک پروسیجر را می بینیم که یک ابزار نقاشی با استفاده از HTML5 CANVAS را می سازد.
CANVAS چیزی جز یک قالب برای طراحی در وب نیست.
مرحله اول:
ما یک آبجکت CANVAS را می سازیم و متغیرهای عمومی را تعریف می کنیم و CANVAS را در JavaScript مقداردهی میکنیم.
کد Canvas Html
<SECTION style="border-style: solid; border-width: 2px; width: 1024px;">
<CANVAS HEIGHT="740" WIDTH="1024px" ID="canvas">
Your browser is not supporting HTML5 Canvas .Upgrade Browser to view this program or check with Chrome or in Firefox.
</CANVAS>
</SECTION>
بخش اعلانات JavaScript
<SCRIPT>
//public Canvas object to use in all the functions.
//Main canvas declaration
var canvas;
var ctx;
var x = 75;
var y = 50;
//Width and Height of the canvas
var WIDTH = 1024;
var HEIGHT = 740;
// var dragok = false;
//Global color variable which will be used to store the selected color name.
var Colors="";
var newPaint = false;
var DrawingTypes = "";
//Circle default radius size
var radius = 30;
var radius_New = 30;
// Rectangle array
rect = {},
//drag= false defult to test for the draging
drag = false;
// Array to store all the old Shanpes drawing details
var rectStartXArray = new Array();
var rectStartYArray = new Array();
var rectWArray = new Array();
var rectHArray = new Array();
var rectColor = new Array();
var DrawType_ARR = new Array();
var radius_ARR = new Array();
var Text_ARR = new Array();
// Declared for the Free hand pencil Drawing.
var prevX = 0,
currX = 0,
prevY = 0,
currY = 0;
//to add the Image
var imageObj = new Image();
//Initialize the Canvas and Mouse events for Canvas
function init(DrawType) {
newPaint = true;
canvas = document.getElementById("canvas");
x =5;
y = 5;
DrawingTypes = DrawType;
ctx = canvas.getContext("2d");
radius = 30;
radius_New = radius;
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
imageObj.src = 'images/Afraz.jpg';
return setInterval(draw, 10);
}
همه ی متغبرهای عمومی را که در Canvas استفاده و مقداردهی میشوند را در JavaScript اعلان می کنیم.
من یک رویداد موس را برایCanvas تعریف می کنم.
رویداد موس به این دلیل ساخته می شود که جایی که موس داخل قالب canvas کلیک میشود، همانجا رسم شود
مرحله 2:
یک مستطیل را داخل قالب canvas با استفاده از JavaScript رسم کرده و پر می کنیم.
من از یک color picker استفاده کرده ام و بصورت پیش فرض از یک رنگ استفاده کرده ام که کاربر می تواند آنرا تغییر دهد.
بخش طراحیHTML
<img src="images/rect.png" onClick="init('FillRect')" />
<img src="images/Circle.png" onClick="init('FillCircle')" />
<img src="images/Font.png" onClick="init('DrawText')" />
<img src="images/Pencil.png" onClick="init('FreeDraw')" />
<img src="images/Image.png" onClick="init('Images')" />
من تصاویری را برای طراحی مستطیل و دایره و تکس ومانند آن قرار داده ام.
اگر کاربر بخواهد بک دایره را رسم کند. روی دایره کلیک می کند و داخل قالب Canvas آنرا رسم می کند
در کلیک تصویر متد JavaScript Init راصدا میزنم و نوع طرح را برای مثال دایره به آن پاس می دهم.
در متدInit ،من رویداد canvas Mouse را مانند MouseDown،MouseMove،MouseUp میسازم.
بخش رویدادهای موس JavaScript
//Mouse down event method
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
radius_New = radius;
prevX = e.clientX - canvas.offsetLeft;
prevY = e.clientY - canvas.offsetTop;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
drag = true;
}
//Mouse UP event Method
function mouseUp() {
rectStartXArray[rectStartXArray.length] = rect.startX;
rectStartYArray[rectStartYArray.length] = rect.startY;
rectWArray[rectWArray.length] = rect.w;
rectHArray[rectHArray.length] = rect.h;
Colors = document.getElementById("SelectColor").value;
rectColor[rectColor.length] = "#" + Colors;
DrawType_ARR[DrawType_ARR.length] = DrawingTypes
radius_ARR[radius_ARR.length] = radius_New;
Text_ARR[Text_ARR.length] = $('#txtInput').val();
drag = false;
}
//mouse Move Event method
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY;
drawx = e.pageX - this.offsetLeft;
drawy = e.pageY - this.offsetTop;
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
if (drag = true) {
radius_New += 2;
}
draw();
if (DrawingTypes == "FreeDraw" || DrawingTypes == "Erase") {
}
else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
}
drawOldShapes();
}
در متد MouseDown ،همه ی پوینت ها مانند X وY ومانند آنرا در متغیرهای عمومی ذخیره میکنم.
در متد MouseUp ،همه مسیرهای طراحی شده ی قبلی را در آرایه ای ذخیره میکنم.
در متدMouseMove همه ی پوینت های مسیرهای جاری را ذخیره کرده و شکل های طراحی رابرای رسم صدا می زنیم.
بخش طراحی JavaScript
//Darw all Shaps,Text and add images
function draw() {
ctx.beginPath();
Colors = document.getElementById("SelectColor").value;
ctx.fillStyle = "#" + Colors;
switch (DrawingTypes) {
case "FillRect":
ctx.rect(rect.startX, rect.startY, rect.w, rect.h);
break;
case "FillCircle":
ctx.arc(rect.startX, rect.startY, radius_New, rect.w, rect.h);
break;
case "Images":
ctx.drawImage(imageObj, rect.startX, rect.startY, rect.w, rect.h);
break;
case "DrawText":
ctx.font = '40pt Calibri';
ctx.fillText($('#txtInput').val(), rect.startX, rect.startY);
break;
case "FreeDraw":
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = "#" + Colors;
ctx.lineWidth = $('#selSize').val();
ctx.stroke();
ctx.closePath();
// ctx.beginPath();
// ctx.moveTo(drawx, drawy);
// ctx.rect(drawx, drawy, 6, 6);
// ctx.fill();
break;
case "Erase":
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);<
ctx.strokeStyle = "#FFFFFF";
ctx.lineWidth = 6;
ctx.stroke();
ctx.closePath();
// ctx.beginPath();
// ctx.moveTo(drawx, drawy);
// ctx.rect(drawx, drawy, 6, 6);
// ctx.fill();
break;
}
ctx.fill();
// ctx.stroke();
}
مرحله 3:
آخرین کار ما ذخیره فایل تصویر می باشد.
در کلیک ذخیره تصویر،متدJavaScript رابرای ذخیره تصویر با استفاده از JavaScript و کد C# صدا می زنیم.
//Save as Image file
function ShanuSaveImage() {
var m = confirm("Are you sure to Save ");
if (m) {
// generate the image data
var image_NEW = document.getElementById("canvas").toDataURL("image/png");
image_NEW = image_NEW.replace('data:image/png;base64,', '');
$.ajax({
type: 'POST',
url: 'Default.aspx/SaveImage',
data: '{ "imageData" : "' + image_NEW + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert('Image saved to your root Folder !');
}
});
}
}
در کد زیر یک متد وبی است که تصویر Canavas را در مسیر فولدر ذخیره می کند.
[WebMethod()]
public static void SaveImage(string imageData)
{
Random rnd = new Random();
String Filename = HttpContext.Current.Server.MapPath("Shanuimg" + rnd.Next(12, 2000).ToString() + ".png");
string Pic_Path = Filename;//HttpContext.Current.Server.MapPath("ShanuHTML5DRAWimg.png");
using (FileStream fs = new FileStream(Pic_Path, FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
}
کار با Html5 خیلی جذاب است .امیدوارم از مطالعه ی مقاله من لذت برده باشید.
- ASP.net
- 3k بازدید
- 7 تشکر