'How do I draw synchronously using the Blazor.Extensions.Canvas package?
I'm using the Blazor.Extensions.Canvas package in an ASP.NET Core hosted WebAssembly app.
The method below works fine in a Blazor server app and in a Blazor static WebAssembly app. However, the ASP.NET Core hosted version does a lot of misdrawing - wrong colours and wrong point-to-point paths.
It seems that the various drawing statements are interfering with each other.
As the synchronous version of these methods are deprecated, how do I get the drawing done correctly?
private async Task DrawPointAndCheckers(Int32 Point, Int32 Checkers, Int32 PreviousCheckers)
{
if (Context == null)
return;
Int32 pointX = -1, pointY = -1, checkerCt = Math.Abs(Checkers), checkerX = -1;
Int32 checkerBaseY = -1, checkerDirectionY = 0;
switch (Point)...
// Point
if (Math.Abs(Checkers) < Math.Abs(PreviousCheckers) || isFirstTime)
{
await Context.SetFillStyleAsync(clrBackground);
await Context.FillRectAsync(pointX, checkerDirectionY == 1 ? pointY : pointY - pointHeight, pointWidth, pointHeight);
if (Math.Abs(PreviousCheckers) > 5)
await Context.FillRectAsync(checkerX, checkerBaseY + 6 * checkerHeight * checkerDirectionY, checkerWidth, checkerHeight);
PreviousCheckers = 0;
await Context.SetFillStyleAsync(Point % 2 == 0 ? clrEvenPoint : clrOddPoint);
await Context.BeginPathAsync();
await Context.MoveToAsync(pointX, pointY);
await Context.LineToAsync(pointX + pointWidth / 2, pointY + checkerDirectionY * pointHeight);
await Context.LineToAsync(pointX + pointWidth, pointY);
await Context.ClosePathAsync();
await Context.FillAsync();
}
// Checkers
for (Int32 man = Math.Abs(PreviousCheckers) + 1; man <= checkerCt; man++)
{
Int32 checkerY = checkerBaseY + man * checkerHeight * checkerDirectionY;
await DrawEllipse(checkerX, checkerY, checkerWidth, checkerHeight, Checkers > 0 ? clrOnrollCheckers : clrOpponentCheckers, true);
if (man == 6)
{
await DrawText(checkerX, checkerY, checkerWidth, checkerHeight, clrCheckerCtText, true, checkerCt.ToString());
break;
}
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
