❔ Blazor Webassembly
Trying to put an image into a canvas so I can use coordinates to place images in different spots. Trying to use https://github.com/BlazorExtensions/Canvas but no success getting images to show up in it.
8 Replies
code
<div class="canvas" style="border-style: solid;width: 100%; height: 100%">
<BECanvas @ref="_canvasReference">
</BECanvas>
</div>
In OnAfterRenderAsync()
{
_context = await _canvasReference.CreateCanvas2DAsync();
await _context.DrawImageAsync(_planetImage, 0, 0, 400, 400);
}
What's context
Do you have the full code
Yeah I can post more just tried to keep it simple
<div class="canvas" style="border-style: solid;width: 500px; height: 500px">
<BECanvas @ref="_canvasReference">
</BECanvas>
</div>
@code {
ElementReference _planetImage;
BECanvasComponent _canvasReference;
Canvas2DContext _context;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(!firstRender)
{
return;
}
_context = await _canvasReference.CreateCanvas2DAsync();
await _context.DrawImageAsync(_planetImage, 0, 0, 400, 400);
}
}
full repo is here in case you believe it's project issues https://github.com/mwsaari/NotAStarWarsSim
But I believe I've pasted the relevant code.
If there is a way of putting up multiple images from a list at arbitrary x,y coordinates that doesn't need a this canvas I'd be happy to hear taht too
haven't used this library specifically, but scanning through it and your code I noticed you didn't add width and height to the BECanvas component
Not sure if this is the issue
I've had that it doesn't seem to change anyhting
have you tried just filling an empty rect just to see if this lib works?
Actually got advice in web that I could set imagine locations just by settings the left and top in css
like this
<div @ref="@context.ElementReference" class="panzoom" style="border-style: solid;width: 1000px; height: 1000px">
<img style="position: absolute; left: 100; top: 100; width: 100px; height: 100px" src="/Planets/star_blue01.png" />
<img style="position: absolute; left: 200; top: 200; width: 100px; height: 100px" src="/Planets/star_blue01.png" />
</div>
but only getting one image showing up weird
nvm just missing the px
Was this issue resolved? If so, run
/close - otherwise I will mark this as stale and this post will be archived until there is new activity.