如何在基于鼠标移动事件的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偏移