BlazorExtensions/Canvas

Resizing the Canvas to fit Container

fdahlberg opened this issue · 4 comments

fdahlberg commented

Hi,

I have placed the BECanvas inside of a div. This div is resized based on the layout of my page. Is there a good way to automatically resize the BECanvas so that it always fill up the available space in the grid.
I've tried with both css and javascript but can't find a way that works reliably.
Using a normal canvas I found that using flexbox seemed to work fine. But I can't get this to work with BECanvas.

Kind Regards
Fredrik Dahlberg

KieranFoot commented

This is just an issue with the way the developer defined the Width and Height as a long instead of using a sring to allow for full usage.

The component needs to have Class and/or Style parameters added to pass styling options along to the Canvas element.

I'll take a look at creating a PR to resolve this as I am hitting this same issue.

KieranFoot commented

I have created a pull request #118 which resolves this issue.
Hopefully the author will approve and merge it.

michaelcsikos commented

Hi @KieranFoot and @fdahlberg, have you got an example showing how you solved this?

genifycom commented

Say you want a border around the BECanvas so that you can see the extents like this:

<BECanvas Width="300" Height="400" @ref="_canvasReference" style="border:2px solid">

This will give an error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object of type 'Blazor.Extensions.Canvas.BECanvas' does not have a property matching the name 'style'.

This makes it difficult to ensure that drawing is within bounds.