クリックすると、イメージボタンにX（または何らかのマーカー）を描くことができますか？

Question

私はasp.netとC＃を使用してのVisual Studioを使用しています

私は現在IMAGEBUTTONを持っていて、画像をクリックすると、それはあなたの座標を指示すると、テーブルに追加します。私は今それを作る必要があるので、イメージをクリックするとXなどのマーカーが残されます。ビジュアルスタジオと言語に新しいImので、これを達成する最良の方法が何か不思議です。

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(); 
} 

これは、IMは私が画像上のマーカーを残すことが、私はそうするコードを知らない、いくつかの描画機能を使用する必要があると仮定すると、私はこれまでのところ、私のイベントハンドラのために持っているものです。

私はここで何をしようとしているのか質問していないので、どんな助けでも大歓迎です。

Answer 1

ここでは、サーバーからのデータに基づいて図形を描画する方法の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" /> 

そして、コードビハインド：これは、隠しフィールドに戻って、クライアント側へのクリックの状態を取得しない何

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); 
} 

（これはNewtonsoft.Jsonによって異なります）。ここでは、データベースからショットをロードし、それらのコレクションを代わりにシリアライズします。

最後に、キャンバスに描画するクライアントサイドスクリプト。

(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の上に直接配置し、その後、ショットを描くために、隠しフィールドからのデータを使用しています。