memartel/Blazor_Canvas
1
0
Fork 0
Code Activity

Compare commits

base: memartel:ef98f9b494adec328617a8bc85d90b78cff0bfa9
Branches Tags
memartel:main
...
compare: memartel:157babcbb9bc1a803fa418432aaf54ea34a94217
Branches Tags
memartel:main

2 Commits
ef98f9b494 ... 157babcbb9

Author SHA1 Message Date
MarcEricMartel
157babcbb9 L'OQLF est passée. 2023-11-12 07:10:32 -05:00
MarcEricMartel
4b18317d35 Added some more color! 2023-11-11 18:51:59 -05:00
1 changed files with 35 additions and 26 deletions
Expand all files Collapse all files

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

@@ -8,39 +8,52 @@
@inject IJSRuntime jsRuntime @inject IJSRuntime jsRuntime
<header> <header>
<label>Color: </label> <h3>Canvas Communautaire!</h3>
<label>Couleur: </label>
<select @bind="@currentcolor"> <select @bind="@currentcolor">
<option value="Black" selected>Black</option> <option value="Black" selected>Noir</option>
<option value="Red">Red</option> <option value="Red">Rouge</option>
<option value="Blue">Blue</option> <option value="Blue">Bleu</option>
<option value="Gray">Gray</option> <option value="Green">Vert</option>
<option value="Yellow">Jaune</option>
<option value="DarkRed">Bourgogne</option>
<option value="DarkBlue">Bleu nuit</option>
<option value="DarkGreen">Vert forêt</option>
<option value="LightBlue">Cyan</option>
<option value="LightGreen">Jade</option>
<option value="LightYellow">Jaune pâle</option>
<option value="Gray">Gris</option>
<option value="White">Blanc</option>
</select>
<label>Grosseur du trait: </label>
<select @bind="@pointsize">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="8">8</option>
<option value="16">16</option>
<option value="32">32</option>
</select> </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> </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)
return; return;
if (divCanvas.Id?.Length > 0) if (divCanvas.Id?.Length > 0) {
{
string data = await jsRuntime.InvokeAsync<string>("getDivCanvasOffsets", string data = await jsRuntime.InvokeAsync<string>("getDivCanvasOffsets",
new object[] { divCanvas }); new object[] { divCanvas });
JObject? offsets = (JObject?)JsonConvert.DeserializeObject(data); JObject? offsets = (JObject?)JsonConvert.DeserializeObject(data);
@@ -49,15 +62,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);
} }
} }
} }