如何根据鼠标移动事件在 SVG 中绘制矩形答案

【问题标题】：How to draw rectangle in SVG based on mouse move event如何根据鼠标移动事件在 SVG 中绘制矩形
【发布时间】：2013-03-13 02:23:20
【问题描述】：

我已经创建了 SVG 图表。我想放大该图表。对于缩放，我需要绘制矩形，即选择标记来选择区域以放大图表。如何在鼠标移动事件中绘制矩形。

1.鼠标按下事件触发。（标记的开始位置）

2.开始拖动（触发鼠标移动事件）->在该事件中需要根据鼠标移动绘制矩形

drop（触发鼠标向上事件）-> 清除矩形

请参考下面的截图。

如何根据鼠标移动绘制矩形？

谢谢，

湿婆

【问题讨论】：

标签： svg jquery-svg

【解决方案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"]));
    }
}

注意偏移量：这样它会从文档的边缘偏移

【讨论】：