Question

此处（SVG draggable using JQuery and Jquery-svg，已接受的答案）是实施拖放功能以移动圈子。它基于更改可移动圆圈对象的cx和cy属性。

如何拖放多边形？

如何使用没有cx，cy坐标的任何其他元素？

我应该重新计算所有对象点吗？

我希望有一种更简单的方法。我打算使用JavaScript + jQuery

Answer 1

有一种简单的方法可以在不重新计算点的情况下这样做。您只需使用属性转换来转换形状。假设你在你的svg中有任何形状（在我想要向你展示的情况下，我将使用一个形状元素），并且你只能在事件mousedown时移动该形状，然后触发mousemove ，以及释放鼠标按钮时此操作结束。然后使用jQuery和svg标记作为选择器执行以下过程：

$("svg").mousedown(function(e){
    /* Getting initial coordinates of pointer */
    var GetInitCoordx = e.clientX;
    var GetInitCoordy = e.clientY;

    /* When mouse is moved while down, then applies the transformation. */
    $(this).bind("mousemove.customName", function(e){
        $("svg").find("path").attr("transform", "translate("+String(e.clientX-GetInitCoordx)+","+String(e.clientY-GetInitCoordy)+")");
    });

    /* When mouse button is released, move event is unbind */
    $(this).mouseup(function(e){
        $(this).unbind("mousemove.customName");
    );}
});

基本思想是。我已经使用这种方法设计了一个应用程序，它在Chrome，IE9和Opera中都适用于我。无论如何，如果我在代码中犯了错误，你可以自由地给我温暖，但我想让你得到的是我使用的方法非常容易实现。

另外，请记住，您可以为svg元素设置唯一属性值，以便在使用jQuery选择器进行选择时进行识别。

如何以编程方式在SVG中移动多边形？

1 个答案: