memartel_loc/Blazor_Canvas
1
0
Fork 0
Code

inline css ftw

Browse Source
This commit is contained in:
MarcEricMartel 2023-11-12 07:54:49 -05:00
parent 157babcbb9
commit 431a25464e
1 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,37 +8,41 @@
@inject IJSRuntime jsRuntime @inject IJSRuntime jsRuntime
<header> <header>
<h3>Canvas Communautaire!</h3> <div style="padding: 5px; background-color: darkgray;">
<label>Couleur: </label> <h3>Canvas Communautaire!</h3>
<select @bind="@currentcolor"> <label>Couleur: </label>
<option value="Black" selected>Noir</option> <select @bind="@currentcolor">
<option value="Red">Rouge</option> <option value="Black" selected>Noir</option>
<option value="Blue">Bleu</option> <option value="Red">Rouge</option>
<option value="Green">Vert</option> <option value="Blue">Bleu</option>
<option value="Yellow">Jaune</option> <option value="Green">Vert</option>
<option value="DarkRed">Bourgogne</option> <option value="Yellow">Jaune</option>
<option value="DarkBlue">Bleu nuit</option> <option value="DarkRed">Bourgogne</option>
<option value="DarkGreen">Vert forêt</option> <option value="DarkBlue">Bleu nuit</option>
<option value="LightBlue">Cyan</option> <option value="DarkGreen">Vert forêt</option>
<option value="LightGreen">Jade</option> <option value="LightBlue">Cyan</option>
<option value="LightYellow">Jaune pâle</option> <option value="LightGreen">Jade</option>
<option value="Gray">Gris</option> <option value="LightYellow">Jaune pâle</option>
<option value="White">Blanc</option> <option value="Gray">Gris</option>
</select> <option value="White">Blanc</option>
<label>Grosseur du trait: </label> </select>
<select @bind="@pointsize"> <label>Grosseur du trait: </label>
<option value="1" selected>1</option> <select @bind="@pointsize">
<option value="2">2</option> <option value="1" selected>1</option>
<option value="3">3</option> <option value="2">2</option>
<option value="4">4</option> <option value="3">3</option>
<option value="8">8</option> <option value="4">4</option>
<option value="16">16</option> <option value="8">8</option>
<option value="32">32</option> <option value="16">16</option>
</select> <option value="32">32</option>
</select>
</div>
</header> </header>
<div @ref="divCanvas" @onmousemove="OnMouseMove" style="border:1px solid #000000;"> <div @ref="divCanvas" @onmousemove="OnMouseMove" style="border:1px dotted #000000;">
<BECanvas @ref="myCanvas" Height="1080" Width="1920"></BECanvas> <BECanvas @ref="myCanvas" Height="1080" Width="1920"></BECanvas>
</div> </div>
<footer>
</footer>
@code { @code {
ElementReference divCanvas; ElementReference divCanvas;
@ -48,24 +52,30 @@
private string currentcolor { get; set; } = "Black"; private string currentcolor { get; set; } = "Black";
private int pointsize { get; set; } = 1; 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 || eventArgs.Buttons > 2)
return; return; // Rien faire si aucun bouton est appuyé ou si les deux boutons/ d'autres boutons sont appuyés.
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);
if (offsets is not null && offsets.HasValues) { if (offsets is not null && offsets.HasValues)
{ // Translation entre le canvas et la souris.
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) if (currentCanvasContext is null)
currentCanvasContext = await myCanvas.CreateCanvas2DAsync(); currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
await currentCanvasContext.SetFillStyleAsync(currentcolor); await currentCanvasContext.SetFillStyleAsync(eventArgs.Buttons == 1 ?
currentcolor :
"White"); // Couleur si bouton gauche, blanc si bouton droit
await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize); await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
} }
} }