单击时如何在图像按钮上绘制 X（或某些标记）？答案

【问题标题】：how can you draw an X(or some marker) on an imagebutton when clicked?单击时如何在图像按钮上绘制 X（或某些标记）？
【发布时间】：2016-08-12 00:53:40
【问题描述】：

我正在使用使用 asp.net 和 c# 的 Visual Studio

我目前有一个图像按钮，当您单击图像时，它会告诉您坐标并将它们添加到表格中。我现在需要这样做，所以当您单击图像时，它还会在那里留下一个标记，例如 X。我是 Visual Studio 和语言的新手，所以我想知道实现这一点的最佳方法是什么。

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
    Label1.Text = "The shot is recorded at the coordinates: (" +
                   e.X.ToString() + ", " + e.Y.ToString() + ")";
    SqlDataSource1.InsertParameters["xCoordinate"].DefaultValue = e.X.ToString();
    SqlDataSource1.InsertParameters["yCoordinate"].DefaultValue = e.Y.ToString();
    SqlDataSource1.Insert();
}

到目前为止，这就是我的事件处理程序，我假设我需要使用一些绘图功能将标记留在图像上，但我不知道这样做的代码。

我在这里没有找到关于我想要做什么的问题，所以任何帮助都将不胜感激。

【问题讨论】：

这是用于桌面应用程序还是用于网页？这与 ASP.Net 有什么关系？
这是一个网页，对不起
@sevatitov: asp.net 是网络
您是否需要这些标记在页面加载之间保持不变？
标记正在跟踪一场比赛中的网上投篮，并且会有多场比赛需要保存标记

标签： c# asp.net webforms imagebutton

【解决方案1】：

这是根据来自服务器的数据绘制形状的一种方法。绘制多个点作为练习留给读者，但我想这应该让你开始。

绘图是在客户端使用 HTML <canvas> 元素完成的。我有服务器端 aspx 标记。确保将ClientIDMode 设置为静态。

<asp:ImageButton runat="server" ImageUrl="pentagon.jpg" OnClick="Unnamed1_Click" ClientIDMode="Static" ID="ImageButton1" />
<asp:HiddenField runat="server" ClientIDMode="Static" ID="HiddenShots" />

还有代码隐藏：（注意这取决于 Newtonsoft.Json）

using Newtonsoft.Json;

// ... 

protected void Unnamed1_Click(object sender, ImageClickEventArgs e)
{
    Label1.Text = $"The short is recorded at coordinates ({e.X}, {e.Y})";
    HiddenShots.Value = JsonConvert.SerializeObject(e);
}

这样做是将点击状态返回到隐藏字段中的客户端。在这里，您将从数据库中加载镜头并序列化它们的集合。

最后是在画布上绘制的客户端脚本。

(function( imgButton, shots ) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        imgButtonRect = imgButton.getBoundingClientRect();

    canvas.style.position = 'fixed';
    canvas.style.top = imgButtonRect.top + 'px';
    canvas.style.left = imgButtonRect.left + 'px';
    canvas.width = imgButton.width;
    canvas.height = imgButton.height;
    canvas.style.zIndex = 1;
    canvas.style.pointerEvents = 'none';
    imgButton.parentNode.appendChild(canvas);

    ctx.fillStyle = 'red';
    ctx.fillRect(shots.X, shots.Y, 6, 6);
})(
    document.getElementById( "ImageButton1" ),
    JSON.parse( document.getElementById("HiddenShots").value)
);

这将创建一个画布并将其直接放置在ImageButton 上，然后使用来自隐藏字段的数据来绘制镜头。

【讨论】：