none
Рисование Rectangle на Canvas RRS feed

  • Вопрос

  • Добрый день.

    ASP NET MVC5

    требуется нарисовать прямоугольники из List<Mymodel> На canvas 

    Создаю стандартный шаблон ASP NET MVC5

    Решил что рисование будет без перегрузки страницы через AJAX вроде называется.

    в контроллере Home/Index.cshtml

    <div>
     <div id="result"></div>           
                @using (Ajax.BeginForm("RectanglesForm", new AjaxOptions
                {
                    UpdateTargetId = "result"
                }))
                {
                    <input style="font-size:40px; min-width:800px" class="a-btn-2" id="BTN" type="submit" value="draw" />
                }
    ...


    создал RectanglesForm.cshtml

    @model IEnumerable<Test.Models.Data>

    <canvas id="dataCanvas" width="1800" height="400" style="border:1px solid #000000">
        Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
        var canvas = document.getElementById("dataCanvas");
        var context = canvas.getContext('2d');

    Вот здесь проблема как отрисовать прямоугольники либо через @foreach либо JS цикл for

                @foreach (var item in Model)
                {
                    context
                }

               for (var i = 0; i < Model.Count(); i++) {
                    var X= Model[i].valueX;
                    var Y= Model[i].valuY;
                    var W = Model[i].valueW;
                    var H = Model[i].valueH;

            //    context.strokeRect(left, ViewBag.Data[i].valueY, 50, ViewBag.Data[i].valueH * 100);
                //    context.fillRect(left + 50, ViewBag.Data[i].valueY * 100, 50, ViewBag.Data[i].valueH * 100);

                }

    Никак не могу дожать.В JS цикле For есть доступ к canvas, но не могу получить доступ к данным. В цикле @foreach есть доступ к данным но не могу добраться до canvas

    В общем как можно добраться до данных и потом добраться до canvas и отрисовать данные на Canvas в цикле foreach или for

    Спасибо


    • Изменено DevingAs 2 сентября 2018 г. 4:16
    2 сентября 2018 г. 4:14

Ответы

  • Здравствуйте!
    Цикл for выполняется в браузере, поэтому в нем можно получить доступ к canvas, но нельзя к данным хранящимся на сервере. Цикл @foreach выполняется на сервере, а в браузер отправляется только результат его работы. То есть он видит модель данных, но ничего не знает о canvas.

    Если следовать вашему примеру, то лучше всего генерировать js код для отрисовки прямоугольников на сервере. А в браузере он будет просто выполняться и отображать результат.

    Вот пример (надеюсь разберётесь):

    HomeController.cs

    using System;
    using System.Collections.Generic;
    using System.Web.Mvc;
    
    namespace WebApplication1.Controllers
    {
    	public class HomeController : Controller
    	{
    		public ActionResult Index()
    		{
    			return View();
    		}
    
    		public PartialViewResult RectanglesForm()
    		{
    			var rectangles = new List<CustomRectangle>
    			{
    				new CustomRectangle { X = 0, Y = 0, Color = "#F25022"},
    				new CustomRectangle { X = 110, Y = 0, Color = "#7FBA00"},
    				new CustomRectangle { X = 0, Y = 110, Color = "#00A4EF"},
    				new CustomRectangle { X = 110, Y = 110, Color = "#FFB900"}
    			};
    
    			return PartialView(rectangles);
    		}
    	}
    
    	public class CustomRectangle
    	{
    		public int X { get; set; }
    		public int Y { get; set; }
    		public int Width { get; set; } = 100;
    		public int Height { get; set; } = 100;
    		public String Color { get; set; }
    	}
    }

    Index.cshtml

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>@ViewBag.Title - My ASP.NET Application</title>
    </head>
    <body>
    	<div id="result"></div>
    	@using (Ajax.BeginForm("RectanglesForm", new AjaxOptions
    	{
    		UpdateTargetId = "result"
    	}))
    	{
    		<input style="font-size:20px; min-width:210px" class="a-btn-2" id="BTN" type="submit" value="draw" />
    	}
    	@Scripts.Render("~/bundles/jquery")
    	@Scripts.Render("~/bundles/bootstrap")
    	@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")
    </body>
    </html>


    RectanglesForm.cshtml

    @model IList<WebApplication1.Controllers.CustomRectangle>
    
    <canvas id="dataCanvas" width="210" height="210" style="border:1px solid #000000">
    	Your browser does not support the HTML5 canvas tag.
    </canvas>
    
    <script>
        var canvas = document.getElementById("dataCanvas");
        var context = canvas.getContext('2d');
            @foreach (var rect in Model)
            {
    			<text>
    			context.fillStyle = "@rect.Color";
    			context.fillRect(@rect.X, @rect.Y, @rect.Width, @rect.Height);
    			</text>
    		}
    </script>

    Результат:

    • Помечено в качестве ответа DevingAs 2 сентября 2018 г. 12:18
    2 сентября 2018 г. 11:40

Все ответы

  • Здравствуйте!
    Цикл for выполняется в браузере, поэтому в нем можно получить доступ к canvas, но нельзя к данным хранящимся на сервере. Цикл @foreach выполняется на сервере, а в браузер отправляется только результат его работы. То есть он видит модель данных, но ничего не знает о canvas.

    Если следовать вашему примеру, то лучше всего генерировать js код для отрисовки прямоугольников на сервере. А в браузере он будет просто выполняться и отображать результат.

    Вот пример (надеюсь разберётесь):

    HomeController.cs

    using System;
    using System.Collections.Generic;
    using System.Web.Mvc;
    
    namespace WebApplication1.Controllers
    {
    	public class HomeController : Controller
    	{
    		public ActionResult Index()
    		{
    			return View();
    		}
    
    		public PartialViewResult RectanglesForm()
    		{
    			var rectangles = new List<CustomRectangle>
    			{
    				new CustomRectangle { X = 0, Y = 0, Color = "#F25022"},
    				new CustomRectangle { X = 110, Y = 0, Color = "#7FBA00"},
    				new CustomRectangle { X = 0, Y = 110, Color = "#00A4EF"},
    				new CustomRectangle { X = 110, Y = 110, Color = "#FFB900"}
    			};
    
    			return PartialView(rectangles);
    		}
    	}
    
    	public class CustomRectangle
    	{
    		public int X { get; set; }
    		public int Y { get; set; }
    		public int Width { get; set; } = 100;
    		public int Height { get; set; } = 100;
    		public String Color { get; set; }
    	}
    }

    Index.cshtml

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>@ViewBag.Title - My ASP.NET Application</title>
    </head>
    <body>
    	<div id="result"></div>
    	@using (Ajax.BeginForm("RectanglesForm", new AjaxOptions
    	{
    		UpdateTargetId = "result"
    	}))
    	{
    		<input style="font-size:20px; min-width:210px" class="a-btn-2" id="BTN" type="submit" value="draw" />
    	}
    	@Scripts.Render("~/bundles/jquery")
    	@Scripts.Render("~/bundles/bootstrap")
    	@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")
    </body>
    </html>


    RectanglesForm.cshtml

    @model IList<WebApplication1.Controllers.CustomRectangle>
    
    <canvas id="dataCanvas" width="210" height="210" style="border:1px solid #000000">
    	Your browser does not support the HTML5 canvas tag.
    </canvas>
    
    <script>
        var canvas = document.getElementById("dataCanvas");
        var context = canvas.getContext('2d');
            @foreach (var rect in Model)
            {
    			<text>
    			context.fillStyle = "@rect.Color";
    			context.fillRect(@rect.X, @rect.Y, @rect.Width, @rect.Height);
    			</text>
    		}
    </script>

    Результат:

    • Помечено в качестве ответа DevingAs 2 сентября 2018 г. 12:18
    2 сентября 2018 г. 11:40
  • Для подобных целей лучше присмотреться к клиентским биьлиотекам JS к примеру D3.js.

    Сделаем содержимое сообщества лучше, вместе!

    18 сентября 2018 г. 9:59
    Модератор