Javascript 有人知道如何在Blazor中用矩形画鼠标吗

我有一个用Blazor编写的网站，它使用我发明的一种叫做位图查询语言（简称BQL）的语言进行基于文本的图像编辑

不要像这样键入查询：

隐藏
总数<200
X介于200和640之间
Y介于90和150之间

我希望用户能够选择一个矩形与他们的鼠标

有没有一种JavaScript方法可以绘制一个矩形并返回左上角的X，Y坐标以及矩形相对于所绘制的div的大小

我已经有了一些JavaScript互操作，用于获取div的大小：

public async static Task<System.Drawing.Rectangle> GetElementSize(IJSRuntime jsRuntime, string name)
{
    Rectangle rectangle;

    try
    {
        // get the height and width
        int height = await jsRuntime.InvokeAsync<int>("BlazorJSFunctions.GetElementHeight", name);
        int width = await jsRuntime.InvokeAsync<int>("BlazorJSFunctions.GetElementWidth", name);
          
        // set the size of the rectangle
        rectangle = new Rectangle(0, 0, width, height);
    }
    catch (Exception error)
    {
        // for debugging only
        string err = error.ToString();
    }

    // Implemented in BlazorJSInterop.js
    return rectangle;
}

---

非常感谢在大多数情况下我使用SVG，因为它是dom的一部分。可以附加事件并获取mouseeventargs

SVG是正确的方法。 这里有一个例子。 rect类由鼠标事件填充，用于显示SVG矩形，您可以使用它进行图像处理

@page "/"
<img width="1200" height="900" 
     @onpointerdown=PointerDown 
     @onpointerdown:preventDefault
     @onpointerup=PointerUp @onpointerup:preventDefault
     @onpointermove=PointerMove @onpointermove:preventDefault 
     src="/mire.png"
     style="position:absolute;z-index:1;"
     />
@if (myRect.display)
{
    <svg width="1200" height="900" style="position: absolute; z-index: 2;" 
     @onpointerdown=PointerDown @onpointerdown:preventDefault
     @onpointerup=PointerUp @onpointerup:preventDefault
     @onpointermove=PointerMove @onpointermove:preventDefault 
     >
         <rect x="@myRect.x" y="@myRect.y" width="@myRect.width" height="@myRect.height" style="fill:transparent;stroke-width:3;stroke:rgb(237, 255, 0)" />
     </svg>
 }
@code{
public class rect
{
    public bool display { get; set; }
    public double x { get; set; }
    public double y { get; set; }
    public double width { get; set; }
    public double height { get; set; }
}
rect myRect = new rect();
bool mouseDown = false;
Task PointerDown(PointerEventArgs e)
{
    mouseDown = true;
    myRect.display = true;
    myRect.x = e.ScreenX;
    myRect.y = e.ScreenY;
    myRect.width = 2;
    myRect.height = 2;
    StateHasChanged();
    return Task.CompletedTask;
}

Task PointerUp(PointerEventArgs e)
{
    mouseDown = false;
    return Task.CompletedTask;
}

Task PointerMove(PointerEventArgs e)
{
    if (mouseDown)
    {
        myRect.width = e.ScreenX - myRect.x;
        myRect.height = e.ScreenY - myRect.y;
        StateHasChanged();
    }
    return Task.CompletedTask;
}
}

@page/“
@if（myRect.display）
{
}
@代码{
公共类矩形
{
公共布尔显示{get；set；}
公共双x{get；set；}
公共双y{get；set；}
公共双宽度{get；set；}
公共双倍高度{get；set；}
}
rect myRect=新rect（）；
bool-mouseDown=false；
任务指针下降（指针目标e）
{
mouseDown=true；
myRect.display=true；
myRect.x=e.ScreenX；
myRect.y=e.ScreenY；
myRect.width=2；
myRect.height=2；
StateHasChanged（）；
返回Task.CompletedTask；
}
任务指针up（PointerEventArgs e）
{
mouseDown=false；
返回Task.CompletedTask；
}
任务指针移动（指针目标e）
{
如果（鼠标向下）
{
myRect.width=e.ScreenX-myRect.x；
myRect.height=e.ScreenY-myRect.y；
StateHasChanged（）；
}
返回Task.CompletedTask；
}
}

我甚至不知道SVG是什么。我会在谷歌上搜索并报告。Thank.SVG对我不起作用，因为我必须使用像素，这意味着像.jpg或.png这样的位图，因此我的网站名是PixelDatabase.Net。不过还是要谢谢你。SVG和.png或.jpg一起工作吗？我的网站只接受上传.png或.jpgs。谢谢这里的原则是有两层。SVG区域是透明的，位于所需区域上方。在这个例子中，它是一个。当用户绘制矩形时，在PointerUp上，myRect中有最后一个矩形，可以使用此信息处理图像。

@page "/"
<img width="1200" height="900" 
     @onpointerdown=PointerDown 
     @onpointerdown:preventDefault
     @onpointerup=PointerUp @onpointerup:preventDefault
     @onpointermove=PointerMove @onpointermove:preventDefault 
     src="/mire.png"
     style="position:absolute;z-index:1;"
     />
@if (myRect.display)
{
    <svg width="1200" height="900" style="position: absolute; z-index: 2;" 
     @onpointerdown=PointerDown @onpointerdown:preventDefault
     @onpointerup=PointerUp @onpointerup:preventDefault
     @onpointermove=PointerMove @onpointermove:preventDefault 
     >
         <rect x="@myRect.x" y="@myRect.y" width="@myRect.width" height="@myRect.height" style="fill:transparent;stroke-width:3;stroke:rgb(237, 255, 0)" />
     </svg>
 }
@code{
public class rect
{
    public bool display { get; set; }
    public double x { get; set; }
    public double y { get; set; }
    public double width { get; set; }
    public double height { get; set; }
}
rect myRect = new rect();
bool mouseDown = false;
Task PointerDown(PointerEventArgs e)
{
    mouseDown = true;
    myRect.display = true;
    myRect.x = e.ScreenX;
    myRect.y = e.ScreenY;
    myRect.width = 2;
    myRect.height = 2;
    StateHasChanged();
    return Task.CompletedTask;
}

Task PointerUp(PointerEventArgs e)
{
    mouseDown = false;
    return Task.CompletedTask;
}

Task PointerMove(PointerEventArgs e)
{
    if (mouseDown)
    {
        myRect.width = e.ScreenX - myRect.x;
        myRect.height = e.ScreenY - myRect.y;
        StateHasChanged();
    }
    return Task.CompletedTask;
}
}