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

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

@ -8,6 +8,7 @@
@inject IJSRuntime jsRuntime @inject IJSRuntime jsRuntime
<header> <header>
<div style="padding: 5px; background-color: darkgray;">
<h3>Canvas Communautaire!</h3> <h3>Canvas Communautaire!</h3>
<label>Couleur: </label> <label>Couleur: </label>
<select @bind="@currentcolor"> <select @bind="@currentcolor">
@ -35,10 +36,13 @@
<option value="16">16</option> <option value="16">16</option>
<option value="32">32</option> <option value="32">32</option>
</select> </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);
} }
} }