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
<header>
<h3>Canvas Communautaire!</h3>
<label>Couleur: </label>
<select @bind="@currentcolor">
<option value="Black" selected>Noir</option>
<option value="Red">Rouge</option>
<option value="Blue">Bleu</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>
<div style="padding: 5px; background-color: darkgray;">
<h3>Canvas Communautaire!</h3>
<label>Couleur: </label>
<select @bind="@currentcolor">
<option value="Black" selected>Noir</option>
<option value="Red">Rouge</option>
<option value="Blue">Bleu</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>
</div>
</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>
</div>
<footer>
</footer>
@code {
ElementReference divCanvas;
@ -48,24 +52,30 @@
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;
if (eventArgs.Buttons == 0)
return;
if (divCanvas.Id?.Length > 0) {
if (eventArgs.Buttons == 0 || eventArgs.Buttons > 2)
return; // Rien faire si aucun bouton est appuyé ou si les deux boutons/ d'autres boutons sont appuyés.
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) {
if (offsets is not null && offsets.HasValues)
{ // Translation entre le canvas et la souris.
mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft");
mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop");
}
if (currentCanvasContext is null)
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);
}
}