如何在点击时在图像按钮上绘制X（或某个标记）？

我使用使用asp.net和c＃的Visual Studio如何在点击时在图像按钮上绘制X（或某个标记）？

我现在有一个ImageButton的，当你在图像上单击它告诉你的坐标，并将它们添加到一个表。我现在需要做到这一点，当你点击图像时，它也会在那里留下一个标记，比如一个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(); 
}

这是我有我的事件处理程序，到目前为止，即时通讯假设我需要使用一些绘图功能离开图像上的标记，但我不知道该代码这样做。

我还没有在这里找到任何我试图做的问题，所以任何帮助将不胜感激。

来源

2016-08-12 J. Marcello

这是用于桌面应用程序还是用于网页？这与ASP.Net有什么关系？ –

其网页，对不起 –

@sevatitov：asp.net是web – naveen

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

使用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对其定位，然后使用从隐藏字段中的数据来绘制出手。

来源

2016-08-12 01:49:14 jdphenix

谢谢，虐待这个尝试 –

如何在点击时在图像按钮上绘制X（或某个标记）？

回答

相关问题