使用 C# 在 Blazor 中动态生成圆圈

Question

我将从数据库中提取一些数字，一旦提取，我想围绕数字生成圆圈并根据数字调整圆圈的大小。这意味着 140 的圆将比 120 的圆大，60 的圆将小于 120 的圆

我将使用 Blazor 和 C# 来开发它。我该怎么办？我是 Blazor 的新手。圆圈也应该是可拖动的。

Answer 1

准备好让你的头脑爆炸吧！所有现代浏览器都支持内联 SVG。Blazor 是使用变量与 SVG 元素交互的绝对完美平台。您实际上可以不使用 HTML 来制作整个组件。

请注意，由于 SVG 不是基于像素的，因此您的图形将与建筑物一样大，并且仍然具有漂亮干净的线条。尝试一个值 1000 看看我的意思。

Circle.razor

@page "/circle"

<h3>Circle Size</h3>
<div>
    <input type="number" @bind="@radius" step="10" />
    <button @onclick="Flash">Flash!</button>
</div>
<svg height="@(radius*2)" width="@(radius*2)">
    <circle cx="@radius" cy="@radius" r="@(radius*0.8)" stroke="black" stroke-width="@(radius *0.05)" fill="@color" />
    <text x="50%" y="50%" text-anchor="middle" alignment-baseline="central" fill="#fff" font-size="@(radius*0.6)px">@radius</text>
</svg>


@code {
    int radius {get; set;} = 100;
    string color { get; set; } = "#a0a";
    async Task Flash()
    {
        var random = new Random();
        for (int i=1; i<20; i++)
        {
            color = String.Format("#{0:X6}", random.Next(0x1000000));
            await Task.Delay(10);
            StateHasChanged();
        }
    }
}

顺便说一下，大多数 SVG 属性都可以为额外的闪光设置动画：颜色偏移、大小、位置、旋转，任何你想要的。