Question

使用Snap SVG我试图动态创建一个矩形。

单击时，应在鼠标单击位置创建一个矩形。

它创建了rect，但是这个位置总是错误的。

这是我的脚本：http://jsfiddle.net/noteStylet/L2kpd6yt/

所以我的问题是谁在鼠标点击位置而不是在下面创建一个矩形。

HTML：

<h1>Click to create </h1>

<div>
    <svg id="plan" width="900" height="500"></svg>
</div>

Javascript：

var snap = Snap("#plan");
//create an image
var imagePlan =     snap.image("http://upload.wikimedia.org/wikipedia/commons/4/42/Cathedral_schematic_plan_fr_vectorial.svg", 10, 10, 900, 500);

imagePlan.click(function (evt) {
    //When click, create a rect
    var rect1 = snap.rect(evt.clientX, evt.clientY, 40, 40);

});

谢谢！

Answer 1

我们应该使用这种方法：

var transformed = pt.matrixTransform(mySvg.getScreenCTM().inverse());
var rect1 = s.rect(transformed.x, transformed.y, 40, 40);

而不是

var rect1 = snap.rect(evt.clientX, evt.clientY, 40, 40);

我们必须使用：

var mySvg = $("#svg1")[0];

var pt = mySvg.createSVGPoint(); // create the point;

imagePlan.click(function(evt)
    {
        pt.x = evt.x;
        pt.y = evt.y;

        // convert the mouse X and Y so that it's relative to the svg element
        var transformed = pt.matrixTransform(mySvg.getScreenCTM().inverse());
        var rect1 = s.rect(transformed.x, transformed.y, 40, 40);

    });

以下是示例：http://jsfiddle.net/noteStylet/L2kpd6yt/6/

Answer 2

你的问题是你需要重新调整它的svg的网格系统，这样你的鼠标不是（0,0）而是（-20，-80）。将rect创建代码更改为：

var rect1 = snap.rect(evt.clientX-20, evt.clientY-80, 40, 40);

它应该有效

更新

好的，你需要的是1.get鼠标位置和2.图像的位置（左边和顶部值）。然后从当前鼠标位置减去它们，这样您就可以调整svg网格以满足您的需求

var snap = Snap("#plan");
//create an image
var imagePlan = snap.image("http://upload.wikimedia.org/wikipedia/commons/4/42/Cathedral_schematic_plan_fr_vectorial.svg", 10, 10, 900, 500);
 var currentMousePos = { x: -1, y: -1 };
    $(document).mousemove(function(event) {
        currentMousePos.x = event.pageX;
        currentMousePos.y = event.pageY;
        var image = $( "#plan" );
        var position = image.position();
 imagePlan.click(function()
        {

            //When click, create a rect
            var rect1 = snap.rect(currentMousePos.x-position.left ,currentMousePos.y-position.top, 40, 40);


        });

    });

Snap svg动态：定位错误

2 个答案: