Question

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

我们正在开发ASP.Net Core（MVC）应用程序以实现操作系统的独立性。

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

我们已经在互联网上搜索过，并在System.Drawing.Common的BitMap中找到了几个选项。最常见的解决方案是我们想要避免的表单应用程序，因为它不是独立于操作系统。

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

Answer 1

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

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

请参阅：http://fabricjs.com

Answer 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

Answer 3

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

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

目前，我不是100％确定如何在项目“wwwroot”目录（或项目中的其他位置）中包含“Fabric.js”，其次是如何在整个圆形，线条等绘图中保留背景图像。

这似乎符合上述所有回应。我知道“System.Drawing”在“.NET Core 2.0”中可以不（甚至可以通过NuGet包），所以不幸的是需要采用其他方法。

ASP.Net核心Web应用程序绘图对象

3 个答案: