Skip to content

Commit 1d59be9

Browse files
WilSteadgalvesribeiro
WilStead
authored and
galvesribeiro
committed
Issues roundup (#37)
* Adopt new Blazor library format Fix broken WebGL Fix TextMetrics Add partial drawImage support Update README instructions * README language change
1 parent 96e3ae7 commit 1d59be9

File tree

11 files changed

+43
-22
lines changed

11 files changed

+43
-22
lines changed

‎README.md‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ This package wraps [HTML5 Canvas](https://developer.mozilla.org/en-US/docs/Web/H
1616

1717
Both Canvas 2D and WebGL are supported.
1818

19-
Both client and server-side scenarios using either Blazor or Razor Components are supported.
19+
Both Blazor Server Apps and Blazor WebAssembly Apps are supported.
2020

21-
**NOTE** Currently targets the v3.0.0-preview4 version of Blazor/Razor Components, which has a limitation regarding static files included in component libraries (aspnet/AspNetCore#6349). As a temporary workaround, manually add the `blazor.extensions.canvas.js` file in a `<script>` tag in the `<head>` element of your project website.
21+
**NOTE** Currently targets the v3.0.0-preview8 version of Blazor.
2222

2323
# Installation
2424

@@ -30,22 +30,29 @@ Install-Package Blazor.Extensions.Canvas
3030

3131
## Usage
3232

33-
On your `_ViewImports.cshtml` add the `using` and TagHelper entries:
33+
In your `index.html` file (WebAssembly Apps) or `_Host.cshtml` (Server Apps) file, place a reference to the library's script file:
34+
35+
```html
36+
<script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>
37+
```
38+
39+
In your `_Imports.razor` add the following `using` entry:
3440

3541
```c#
3642
@using Blazor.Extensions.Canvas
37-
@addTagHelper *, Blazor.Extensions.Canvas
3843
```
3944

40-
On your .cshtml add a `BECanvas` and make sure you set the `ref` to a field on your component:
45+
In the component where you want to place a canvas element, add a `BECanvas`. Make sure to set the `ref` to a field on your component, and include the `suppressField` parameter to suppress automatic field generation:
4146

4247
```c#
43-
<BECanvas ref="@_canvasReference"></BECanvas>
48+
<BECanvas Width="300" Height="400" @ref="_canvasReference" @ref:suppressField></BECanvas>
4449
```
4550

4651
### 2D
4752

48-
On your component C# code (regardless if inline on .razor or in a .cs file), from a `BECanvasComponent` reference, create a `Canvas2DContext`, and then use the context methods to draw on the canvas:
53+
In your component C# code (regardless if inline on .razor or in a .cs file), add a `BECanvasComponent` reference which matches the `ref` you set on your `BECanvas`.
54+
55+
Create a `Canvas2DContext`, and then use the context methods to draw on the canvas:
4956

5057
```c#
5158
private Canvas2DContext _context;
@@ -68,7 +75,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
6875

6976
### WebGL
7077

71-
On your component C# code (regardless if inline on .razor or in a .cs file), from a `BECanvasComponent` reference, create a `WebGLContext`, and then use the context methods to draw on the canvas:
78+
In your component C# code (regardless if inline on .razor or in a .cs file), add a `BECanvasComponent` reference which matches the `ref` you set on your `BECanvas`.
79+
80+
Create a `WebGLContext`, and then use the context methods to draw on the canvas:
7281

7382
```c#
7483
private WebGLContext _context;

‎blazor.extensions.canvas.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/Blazor.Extensions.Canvas.JS/Blazor.Extensions.Canvas.JS.csproj‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,6 @@
3535
</ItemGroup>
3636

3737
<Target Name="CopyDist" AfterTargets="RunWebpack" DependsOnTargets="RunWebpack">
38-
<Copy SourceFiles="@(WebpackOutputs)" DestinationFolder="..\..\test\Blazor.Extensions.Canvas.Test.ServerSide\wwwroot\dist" SkipUnchangedFiles="true" />
39-
</Target>
40-
41-
<Target Name="CopyDistForServerSideTest" AfterTargets="RunWebpack" DependsOnTargets="RunWebpack">
42-
<Copy SourceFiles="@(WebpackOutputs)" DestinationFolder="..\.." SkipUnchangedFiles="true" />
38+
<Copy SourceFiles="@(WebpackOutputs)" DestinationFolder="..\Blazor.Extensions.Canvas\wwwroot" SkipUnchangedFiles="true" />
4339
</Target>
4440
</Project>

‎src/Blazor.Extensions.Canvas.JS/src/CanvasContextManager.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,18 +86,30 @@ export class ContextManager {
8686
}
8787

8888
private deserialize = (method: string, object: any) => {
89-
if (!this.webGLContext) return object; //deserialization only needs to happen for webGL
89+
if (!this.webGLContext || object == undefined) return object; //deserialization only needs to happen for webGL
9090

9191
if (object.hasOwnProperty("webGLType") && object.hasOwnProperty("id")) {
9292
return (this.webGLObject[object["id"]]);
9393
} else if (Array.isArray(object) && !method.endsWith("v")) {
9494
return Int8Array.of(...(object as number[]));
95+
} else if (typeof(object) === "string" && (method === "bufferData" || method === "bufferSubData")) {
96+
let binStr = window.atob(object);
97+
let length = binStr.length;
98+
let bytes = new Uint8Array(length);
99+
for (var i = 0; i < length; i++) {
100+
bytes[i] = binStr.charCodeAt(i);
101+
}
102+
return bytes;
95103
} else
96104
return object;
97105
}
98106

99107
private serialize = (object: any) => {
100-
if (!this.webGLContext) return object; //serialization only needs to happen for webGL
108+
if (object instanceof TextMetrics) {
109+
return { width: object.width };
110+
}
111+
112+
if (!this.webGLContext || object == undefined) return object; //serialization only needs to happen for webGL
101113

102114
const type = this.webGLTypes.find((type) => object instanceof type);
103115
if (type != undefined) {
@@ -107,7 +119,7 @@ export class ContextManager {
107119
return {
108120
webGLType: type.name,
109121
id: id
110-
};
122+
};
111123
} else
112124
return object;
113125
}

‎src/Blazor.Extensions.Canvas/Canvas2D/Canvas2DContext.cs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ public class Canvas2DContext : RenderingContext
5252
private const string GLOBAL_ALPHA_PROPERTY = "globalAlpha";
5353
private const string SAVE_METHOD = "save";
5454
private const string RESTORE_METHOD = "restore";
55+
private const string DRAW_IMAGE_METHOD = "drawImage";
5556
#endregion
5657

5758
#region Properties
@@ -319,6 +320,10 @@ public async Task SetGlobalAlphaAsync(float value)
319320
public void Restore() => this.CallMethod<object>(RESTORE_METHOD);
320321
public async Task RestoreAsync() => await this.BatchCallAsync(RESTORE_METHOD, isMethodCall: true);
321322

323+
public async Task DrawImageAsync(ElementReference elementReference, double dx, double dy) => await this.BatchCallAsync(DRAW_IMAGE_METHOD, isMethodCall: true, elementReference, dx, dy);
324+
public async Task DrawImageAsync(ElementReference elementReference, double dx, double dy, double dWidth, double dHeight) => await this.BatchCallAsync(DRAW_IMAGE_METHOD, isMethodCall: true, elementReference, dx, dy, dWidth, dHeight);
325+
public async Task DrawImageAsync(ElementReference elementReference, double sx, double sy, double sWidth, double sHeight, double dx, double dy, double dWidth, double dHeight) => await this.BatchCallAsync(DRAW_IMAGE_METHOD, isMethodCall: true, elementReference, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
326+
322327
#endregion Methods
323-
}
328+
}
324329
}

‎src/Blazor.Extensions.Canvas/wwwroot/blazor.extensions.canvas.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎test/Blazor.Extensions.Canvas.Test.ClientSide/Blazor.Extensions.Canvas.Test.ClientSide.csproj‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
</ItemGroup>
1515

1616
<ItemGroup>
17-
<ProjectReference Include="..\..\src\Blazor.Extensions.Canvas.JS\Blazor.Extensions.Canvas.JS.csproj" />
1817
<ProjectReference Include="..\..\src\Blazor.Extensions.Canvas\Blazor.Extensions.Canvas.csproj" />
1918
</ItemGroup>
2019

‎test/Blazor.Extensions.Canvas.Test.ClientSide/wwwroot/favicon.ico‎

31.3 KB
Binary file not shown.

‎test/Blazor.Extensions.Canvas.Test.ClientSide/wwwroot/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width">
66
<title>Blazor.Extensions.Canvas.Test</title>
77
<base href="/" />
8+
<script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>
89
</head>
910
<body>
1011
<app>Loading...</app>

‎test/Blazor.Extensions.Canvas.Test.ServerSide/Blazor.Extensions.Canvas.Test.ServerSide.csproj‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
</PropertyGroup>
88

99
<ItemGroup>
10-
<ProjectReference Include="..\..\src\Blazor.Extensions.Canvas.JS\Blazor.Extensions.Canvas.JS.csproj" />
1110
<ProjectReference Include="..\..\src\Blazor.Extensions.Canvas\Blazor.Extensions.Canvas.csproj" />
1211
</ItemGroup>
1312

0 commit comments

Comments
 (0)