ابزار نقاشی در وب با استفاده از HTML5 CANVAS در Asp.Net

ابزار نقاشی در وب با استفاده از HTML5 CANVAS در Asp.Net

ابزار نقاشی در وب با استفاده از  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 خیلی جذاب است .امیدوارم از مطالعه ی مقاله من لذت برده باشید.

 

فایل های ضمیمه