memartel_loc/Blazor_Canvas
1
0
Fork 0
Code

Séparation backend/frontend

Browse Source
This commit is contained in:
MarcEricMartel 2023-11-12 08:15:22 -05:00
parent 431a25464e
commit 47bf4a351e
3 changed files with 86 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
BlazorCanvas/BlazorCanvas/Data/CanvasService.cs Normal file
View File

@ -0,0 +1,51 @@
using Blazor.Extensions.Canvas.Canvas2D;
using Blazor.Extensions;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Newtonsoft.Json.Linq;
using Newtonsoft.Json;
namespace BlazorCanvas.Data;
public class CanvasService {
public ElementReference divCanvas;
public BECanvasComponent myCanvas = new();
Canvas2DContext? currentCanvasContext;
IJSRuntime _jsRuntime;
public CanvasService(IJSRuntime jsRuntime) {
_jsRuntime = jsRuntime;
}
public string currentcolor { get; set; } = "Black";
public int pointsize { get; set; } = 1;
public async void OnMouseMove(MouseEventArgs eventArgs)
{
double mouseX = 0, mouseY = 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)
{ // 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(eventArgs.Buttons == 1 ?
currentcolor :
"White"); // Couleur si bouton gauche, blanc si bouton droit
await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
}
}
}

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

@ -3,80 +3,43 @@
@using Blazor.Extensions.Canvas
@using Blazor.Extensions.Canvas.Canvas2D
@using Blazor.Extensions.Canvas.WebGL
@using BlazorCanvas.Data
@using Newtonsoft.Json
@using Newtonsoft.Json.Linq
@inject IJSRuntime jsRuntime
@inject CanvasService canvasService
<header>
<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 style="padding: 5px;">
<h3>Canvas Communautaire!</h3>
<label>Couleur: </label>
<select @bind="@canvasService.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="@canvasService.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>
</header>
<div @ref="divCanvas" @onmousemove="OnMouseMove" style="border:1px dotted #000000;">
<BECanvas @ref="myCanvas" Height="1080" Width="1920"></BECanvas>
<div @ref="canvasService.divCanvas" @onmousemove="canvasService.OnMouseMove" style="border:1px dotted #000000;">
<BECanvas @ref="canvasService.myCanvas" Height="1080" Width="1920"></BECanvas>
</div>
<footer>
</footer>
@code {
ElementReference divCanvas;
BECanvasComponent myCanvas = new();
Canvas2DContext? currentCanvasContext;
private string currentcolor { get; set; } = "Black";
private int pointsize { get; set; } = 1;
async void OnMouseMove(MouseEventArgs eventArgs)
{
double mouseX = 0, mouseY = 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)
{ // 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(eventArgs.Buttons == 1 ?
currentcolor :
"White"); // Couleur si bouton gauche, blanc si bouton droit
await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
}
}
}
(c) Cowboy Kim
</footer>

1
BlazorCanvas/BlazorCanvas/Program.cs
View File

@ -7,6 +7,7 @@ var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddScoped<CanvasService>();
builder.Services.AddSingleton<WeatherForecastService>();
var app = builder.Build();