memartel_loc/Blazor_Canvas
1
0
Fork 0
Code

Added some more color!

Browse Source
This commit is contained in:
MarcEricMartel 2023-11-11 18:51:59 -05:00
parent ef98f9b494
commit 4b18317d35
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
BlazorCanvas/BlazorCanvas/Pages/Index.razor
View File

@ -8,33 +8,38 @@
@inject IJSRuntime jsRuntime @inject IJSRuntime jsRuntime
<header> <header>
<h3>On dessine en gang!</h3>
<label>Color: </label> <label>Color: </label>
<select @bind="@currentcolor"> <select @bind="@currentcolor">
<option value="Black" selected>Black</option> <option value="Black" selected>Black</option>
<option value="Red">Red</option> <option value="Red">Red</option>
<option value="Blue">Blue</option> <option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="DarkRed">Dark Red</option>
<option value="Gray">Gray</option> <option value="Gray">Gray</option>
</select> </select>
@* <input type="radio" name="color" checked="@(this.currentcolor == "Black")" onchange="@(() => this.currentcolor = "Black")" /><label>Black</label> <label>Point Size: </label>
<input type="radio" name="color" checked="@(this.currentcolor == "Red")" onchange="@(() => this.currentcolor = "Red")"/><label>Red</label> <select @bind="@pointsize">
<input type="radio" name="color" checked="@(this.currentcolor == "Green")" onchange="@(() => this.currentcolor = "Green")" /><label>Green</label> <option value="1" selected>1</option>
<input type="radio" name="color" checked="@(this.currentcolor == "Gray")" onchange="@(() => this.currentcolor = "Gray")" /><label>Gray</label> *@ <option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</header> </header>
<div @ref="divCanvas" @onmousemove="OnMouseMove"> <div @ref="divCanvas" @onmousemove="OnMouseMove" style="border:1px solid #000000;">
<BECanvas @ref="myCanvas" Height="1080" Width="1920"></BECanvas> <BECanvas @ref="myCanvas" Height="1080" Width="1920"></BECanvas>
</div> </div>
<h3>CanvasDrawing</h3>
@code { @code {
ElementReference divCanvas; ElementReference divCanvas;
BECanvasComponent myCanvas; BECanvasComponent myCanvas = new();
Canvas2DContext currentCanvasContext; Canvas2DContext? currentCanvasContext;
private string currentcolor { get; set; }// = "Black"; private string currentcolor { get; set; } = "Black";
private int pointsize { get; set; } = 1;
async void OnMouseMove(MouseEventArgs eventArgs) async void OnMouseMove(MouseEventArgs eventArgs) {
{
double mouseX = 0, mouseY = 0; double mouseX = 0, mouseY = 0;
if (eventArgs.Buttons == 0) if (eventArgs.Buttons == 0)
@ -49,14 +54,11 @@
mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft"); mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft");
mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop"); mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop");
} }
if (currentCanvasContext is null)
currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
//await currentCanvasContext.ClearRectAsync(0, 0, 800, 800);
await currentCanvasContext.SetFillStyleAsync(currentcolor); await currentCanvasContext.SetFillStyleAsync(currentcolor);
await currentCanvasContext.FillRectAsync(mouseX, mouseY, 1, 1); await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
//await currentCanvasContext.StrokeTextAsync("ClientX: " + mouseX +
// " Client Y: " + mouseY, 20, 20);
} }
} }