如何在點擊時在圖像按鈕上繪製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（或某個標記）？

回答

相關問題