63 lines
2.5 KiB
Plaintext
63 lines
2.5 KiB
Plaintext
@page "/"
|
|
@using Blazor.Extensions
|
|
@using Blazor.Extensions.Canvas
|
|
@using Blazor.Extensions.Canvas.Canvas2D
|
|
@using Blazor.Extensions.Canvas.WebGL
|
|
@using Newtonsoft.Json
|
|
@using Newtonsoft.Json.Linq
|
|
@inject IJSRuntime jsRuntime
|
|
|
|
<header>
|
|
<label>Color: </label>
|
|
<select @bind="@currentcolor">
|
|
<option value="Black" selected>Black</option>
|
|
<option value="Red">Red</option>
|
|
<option value="Blue">Blue</option>
|
|
<option value="Gray">Gray</option>
|
|
</select>
|
|
@* <input type="radio" name="color" checked="@(this.currentcolor == "Black")" onchange="@(() => this.currentcolor = "Black")" /><label>Black</label>
|
|
<input type="radio" name="color" checked="@(this.currentcolor == "Red")" onchange="@(() => this.currentcolor = "Red")"/><label>Red</label>
|
|
<input type="radio" name="color" checked="@(this.currentcolor == "Green")" onchange="@(() => this.currentcolor = "Green")" /><label>Green</label>
|
|
<input type="radio" name="color" checked="@(this.currentcolor == "Gray")" onchange="@(() => this.currentcolor = "Gray")" /><label>Gray</label> *@
|
|
</header>
|
|
<div @ref="divCanvas" @onmousemove="OnMouseMove">
|
|
<BECanvas @ref="myCanvas" Height="1080" Width="1920"></BECanvas>
|
|
</div>
|
|
|
|
<h3>CanvasDrawing</h3>
|
|
|
|
@code {
|
|
ElementReference divCanvas;
|
|
BECanvasComponent myCanvas;
|
|
Canvas2DContext currentCanvasContext;
|
|
|
|
private string currentcolor { get; set; }// = "Black";
|
|
|
|
async void OnMouseMove(MouseEventArgs eventArgs)
|
|
{
|
|
double mouseX = 0, mouseY = 0;
|
|
|
|
if (eventArgs.Buttons == 0)
|
|
return;
|
|
if (divCanvas.Id?.Length > 0)
|
|
{
|
|
string data = await jsRuntime.InvokeAsync<string>("getDivCanvasOffsets",
|
|
new object[] { divCanvas });
|
|
JObject? offsets = (JObject?)JsonConvert.DeserializeObject(data);
|
|
|
|
if (offsets is not null && offsets.HasValues) {
|
|
mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft");
|
|
mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop");
|
|
}
|
|
|
|
currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
|
|
|
|
//await currentCanvasContext.ClearRectAsync(0, 0, 800, 800);
|
|
await currentCanvasContext.SetFillStyleAsync(currentcolor);
|
|
await currentCanvasContext.FillRectAsync(mouseX, mouseY, 1, 1);
|
|
//await currentCanvasContext.StrokeTextAsync("ClientX: " + mouseX +
|
|
// " Client Y: " + mouseY, 20, 20);
|
|
|
|
}
|
|
}
|
|
} |