[英]ASP.NET Render HTML5 Canvas from MVC Model Data
I am using ASP.NET Core 2.0.我正在使用 ASP.NET Core 2.0。 How can I draw on an HTML5 Canvas using data from a model?
如何使用模型中的数据在 HTML5 Canvas 上绘图? I want to loop through records in my model.
我想遍历模型中的记录。
public IEnumerable<BodyPain> painRecs;
I tried the following code in my Razor View:我在 Razor 视图中尝试了以下代码:
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var data = '@Html.Raw(Json.Serialize(Model.painRecs))';
alert(data);
//console.log(data);
for (b = 0; b < data.length; b++) {
var pr = data[b];
alert(pr.painType);
ctx.beginPath();
ctx.arc(pr.xPos, pr.yPos, 8, 0, 2 * Math.PI);
ctx.fillStyle = "#DC143C";
ctx.fill();
}
</script>
**alert(data);**
produces the following output: **alert(data);**
产生以下输出:
[{"memberID":9048,"painID":6880,"painScale":1,"painType":4,"xPos":497.333344,"yPos":385.333344}
,{"memberID":9048,"painID":6888,"painScale":1,"painType":4,"xPos":313.333344,"yPos":428.0}]
But **alert(pr.painType);** causes error UNDEFINED
.但是
**alert(pr.painType);** causes error UNDEFINED
。
Finally got it working with this syntax:终于用这个语法让它工作了:
function displayPainRecs() {
try {
var x = 0;
var y = 0;
var cvs = document.getElementById('myCanvas');
var ctx = cvs.getContext('2d');
var data = @Html.Raw(Json.Serialize(Model.painRecs));
for (i = 0; i < data.length; i++) {
var pr = data[i];
x = pr["xPos"].toFixed(0);
y = pr["yPos"].toFixed(0);
ctx.beginPath();
ctx.arc(x, y, 8, 0, 2 * Math.PI);
ctx.fillStyle = "#DC143C";
if (pr["painType"] == 1) {
ctx.fillStyle = "#DC143C";
}
else if (pr["painType"] == 2) {
ctx.fillStyle = "#EA728A";
}
ctx.fill();
}
}
catch (err) {
alert(err);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.