.NET 6 릴리즈 후보 2의 ASP.NET Core 업데이트

자세한 내용은 아래 링크를 통해 확인 가능합니다.

좋아요 1

SkiaSharp.Views.Blazor 프리뷰 버젼을 설치하고

다음의 코드를 작성한 후,

@page "/"
@using SkiaSharp
@using SkiaSharp.Views.Blazor

<h1>GPU (WebGL) Canvas</h1>

<div class="container">
    <div class="row">
        <div class="col border rounded p-4 canvas-container">

            <SKGLView OnPaintSurface="OnPaintSurface" IgnorePixelScaling="true" EnableRenderLoop="true" />

        </div>
    </div>
</div>

@code {
    int tickIndex = 0;
    long tickSum = 0;
    long[] tickList = new long[100];
    long lastTick = DateTimeOffset.UtcNow.ToUnixTimeMilliseconds();

    void OnPaintSurface(SKPaintGLSurfaceEventArgs e)
    {
        // the the canvas and properties
        var canvas = e.Surface.Canvas;

        // make sure the canvas is blank
        canvas.Clear(SKColors.White);

        using var paint = new SKPaint
        {
            IsAntialias = true,
            StrokeWidth = 5f,
            StrokeCap = SKStrokeCap.Round,
            TextAlign = SKTextAlign.Center,
            TextSize = 24,
        };

        var surfaceSize = e.Info.Size;
        var clockSize = Math.Min(surfaceSize.Width, surfaceSize.Height) * 0.4f;
        var center = new SKPoint(surfaceSize.Width / 2f, surfaceSize.Height / 2f);
        var now = DateTime.Now;
        var fps = GetCurrentFPS();

        // draw the fps counter
        canvas.DrawText($"{fps:0.00}fps", surfaceSize.Width / 2, surfaceSize.Height - 10f, paint);

        // draw the clock
        canvas.RotateDegrees(-90f, center.X, center.Y);

        // hours
        paint.StrokeWidth = 3f;
        canvas.Save();
        canvas.Translate(center);
        canvas.RotateDegrees(360f * (now.Hour / 12f));
        canvas.DrawLine(0, 0, clockSize * 0.4f, 0, paint);
        canvas.Restore();

        // minutes
        paint.StrokeWidth = 2f;
        canvas.Save();
        canvas.Translate(center);
        canvas.RotateDegrees(360f * (now.Minute / 60f));
        canvas.DrawLine(0, 0, clockSize * 0.6f, 0, paint);
        canvas.Restore();

        // seconds
        paint.StrokeWidth = 1f;
        canvas.Save();
        canvas.Translate(center);
        canvas.RotateDegrees(360f * ((now.Second * 1000f + now.Millisecond) / 1000f / 60f));
        canvas.DrawLine(0, 0, clockSize * 0.8f, 0, paint);
        canvas.Restore();

        // center
        canvas.DrawCircle(center, 10f, paint);

        // border
        paint.Style = SKPaintStyle.Stroke;
        canvas.DrawCircle(center, clockSize * 0.9f, paint);
    }

    double GetCurrentFPS()
    {
        var newTick = DateTimeOffset.UtcNow.ToUnixTimeMilliseconds();
        var delta = newTick - lastTick;
        lastTick = newTick;

        tickSum -= tickList[tickIndex];
        tickSum += delta;
        tickList[tickIndex] = delta;

        if (++tickIndex == tickList.Length)
            tickIndex = 0;

        return 1000.0 / ((double)tickSum / tickList.Length);
    }
}

실행하면 모니터 최대 주사율 만큼의 렌더링 속도를 뽑아줍니다.

image