如何在基於鼠標移動事件的SVG中繪製矩形

Question

我已經創建了SVG圖表。我想在該圖表中執行縮放。對於縮放，我需要繪製矩形，即選擇標記來選擇區域以放大圖表。我怎樣才能在鼠標移動事件中繪製一個矩形。

1.鼠標事件觸發。 （開始標記的位置）

2.啓動拖動（鼠標移動事件觸發） - >在該事件中需要基於鼠標移動到繪製矩形

降（鼠標向上觸發事件） - >清除矩形

請參閱下面的下面截圖。

怎樣繪製基於鼠標移動的矩形？

感謝，

溼婆

Answer 1

這裏是一個可能的解決方案：

在你的SVG結束（以這種方式，將在所有元素繪製）添加一個矩形這樣

<rect id="zoom_area" x=0 y=0 width=0 height=0 onmouseup="endDrag(evt)" style="fill: white; stroke:black; stroke-width:2px; opacity:0.5"/> 

在您的網格中添加事件onmouseup="endDrag(evt)"和onmousemove="moveMouse(evt)"

現在的javascript：

var zoom_box = {}; 

function startDrag(evt){ 
    var offset = $("#bounds_grid").offset(); // Take the offset from the grid, change the ID as you need. 
    evt.stopPropagation(); 
    zoom_box["start_x"] = evt.clientX-offset.left; 
    zoom_box["start_y"] = evt.clientY-offset.top; 
    zoom_box["boxing"] = true; 
    $('#zoom_area').attr("x",zoom_box["start_x"]); 
    $('#zoom_area').attr("y",zoom_box["start_y"]); 
} 

function endDrag(evt){ 
    var offset = $("#bounds_grid").offset(); 
    evt.stopPropagation(); 
    zoom_box["end_x"] = evt.clientX-offset.left; 
    zoom_box["end_y"] = evt.clientY-offset.top; 
    zoom_box["boxing"] = false; 

    $('#zoom_area').attr("width",0); 
    $('#zoom_area').attr("height",0); 
} 

function moveMouse(evt){ 
    var offset = $("#bounds_grid").offset(); 
    evt.stopPropagation(); 
    if(zoom_box["boxing"]){ 
     zoom_box["end_x"] = evt.clientX-offset.left; 
     zoom_box["end_y"] = evt.clientY-offset.top; 
     $('#zoom_area').attr("width",(zoom_box["end_x"]-zoom_box["start_x"])); 
     $('#zoom_area').attr("height",(zoom_box["end_y"]-zoom_box["start_y"])); 
    } 
} 

要當心了失調：在這種方式，採取從文檔的頁邊距TE偏移