ASP.Net Core Web 应用程序绘图对象答案

【问题标题】：ASP.Net Core web application drawing objectsASP.Net Core Web 应用程序绘图对象
【发布时间】：2018-05-31 17:43:18
【问题描述】：

我们需要构建一个独立于操作系统的应用程序，我们需要在其中绘制矩形、直线和椭圆。

我们正在开发一个 ASP.Net Core (MVC) 应用程序来实现操作系统的独立性。

我们的理想情况是在模型类（高度、宽度、颜色）中添加绘图对象的前缀，并请求控制器或剃刀视图中的对象在网页上显示它们。

我们在 Internet 上进行了搜索，并找到了几个带有 System.Drawing.Common 位图的选项。最常见的解决方案是我们想要避免的表单应用程序，因为它不是独立于操作系统的。

了解我们的情况的最佳建议是什么？我们不怕尝试 C#、JS HTML 等的组合，只要它需要适合 ASP.Net Core 应用程序。

【问题讨论】：

标签： c# asp.net-core-mvc asp.net-core-2.0

【解决方案1】：

查看 fabric.js 以与 html 画布交互。

您可以直接使用画布进行开发，但使用已经处理所有繁重工作的库会容易得多。

见：http://fabricjs.com

【讨论】：

【解决方案2】：

<canvas> 呢？

HTML <canvas> 元素用于在网页上绘制图形。

var c=document.getElementById("myCanvas");
var canvOK=1;
try {c.getContext("2d");}
catch (er) {canvOK=0;}
if (canvOK==1)
 {
 var ctx=c.getContext("2d");
 ctx.fillStyle="#FF0000";
 ctx.fillRect(20,20,100,50);
 
 var grd=ctx.createLinearGradient(140,20,240,70);
    grd.addColorStop(0,"black");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(140,20,100,50);
    
    var grd2=ctx.createLinearGradient(20,90,120,90);
    grd2.addColorStop(0,"black");
    grd2.addColorStop("0.3","magenta");
    grd2.addColorStop("0.5","blue");
    grd2.addColorStop("0.6","green");
    grd2.addColorStop("0.8","yellow");
    grd2.addColorStop(1,"red");
    ctx.fillStyle=grd2;
    ctx.fillRect(20,90,100,50);
    
    ctx.font="30px Verdana";
    var grd3=ctx.createLinearGradient(140,20,240,90);
    grd3.addColorStop(0,"black");
    grd3.addColorStop("0.3","magenta");
    grd3.addColorStop("0.6","blue");
    grd3.addColorStop("0.8","green");
    grd3.addColorStop(1,"red");
    ctx.strokeStyle=grd3;
    ctx.strokeText("Smile!",140,120); }

<canvas id="myCanvas" width="270" height="160" style="border:1px solid #c3c3c3;float:left;margin-right:20px;margin-bottom:15px">
Your browser does not support the &lt;canvas&gt; element.
</canvas>

上面的图形是用''创建的。它显示四个元素：红色矩形、渐变矩形、多色矩形和多色文本。

什么是 HTML 画布？

HTML <canvas> 元素用于通过 JavaScript 动态绘制图形。

<canvas> 元素只是图形的容器。您必须使用 JavaScript 来实际绘制图形。

Canvas 有多种绘制路径、框、圆、文本和添加图像的方法。

完整视图

https://www.w3schools.com/html/html5_canvas.asp

https://stackoverflow.com/search?q=canvas

【讨论】：

【解决方案3】：

我正在尝试在 asp.net core 2.0 项目中实现类似的目标。从我的“.cshtml”剃须刀视图中，我正在调用一个 Typescript 例程来处理 GUI 复杂性。在视图中，我使用了一个 HTML5 画布，我想在该画布上在背景图像上绘制矩形。

[jsFiddle][1] 似乎是了解这些方面（HTML、CSS、TypeScript）的各种交互的最佳网站，特别是这些示例：

目前，我不能 100% 确定如何在项目“wwwroot”目录（或项目中的其他位置）中包含“Fabric.js”，其次如何在绘制圆圈、线条等过程中维护背景图像。

这似乎与上述所有回复一致。我确实知道“.NET Core 2.0”中不提供“System.Drawing”（即使通过 NuGet 包），所以很遗憾需要采用其他方法。

【讨论】：