保存SVG单击位置，并在重新加载时重新创建它
保存SVG单击位置，并在重新加载时重新创建它
提问于 2017-05-05 19:21:57
我刚开始和SVG一起工作，而且我正在为一个项目的一部分而奋斗。我正在尝试将用户的单击位置保存在可伸缩/pannable svg上，以便在加载页面时从该位置开始重新创建它。
我使用snap.svg和snap.svg.zpd，因为我在启动这个项目时见过它们在一个示例中使用过。
(本部正在运作)
用户可以缩放/平移svg，并通过鼠标单击在图像上放置一个标记。
html：
<svg id="svgmap" width="695" height="900" ></svg>联署材料：
var mySvg = $("#svgmap")[0];
var snap = Snap("#svgmap");
var imageMap = snap.image("mySvgUrl", 10, 10, 695, 900);
var group = snap.group(imageMap);
var pt = mySvg.createSVGPoint();
imageMap.click(function (evt) {
pt.x = evt.clientX;
pt.y = evt.clientY;
//find the coordinates within the svg
var transformed = pt.matrixTransform(mySvg.getScreenCTM().inverse());
//place marker
var marker = snap.image("myMarkerUrl", transformed.x, transformed.y, 8, 8)
group.add(marker);
});(这部分不起作用)
我想保存用户单击的位置，以便下次加载页面时可以重新创建标记的位置。当页面重新加载时，我无法重新创建位置。
我通过更改保存的值(用户单击的x/y坐标、转换的坐标，甚至在绝望中尝试视图区域的百分比)，以及更改重新加载的svg的坐标的方式来解决这个问题。我想这就像我已经把它做对了一样。
var pt = mySvg.createSVGPoint();
pt.x = mySavedX;
pt.y = mySavedY;
var recreatedPoint = pt.matrixTransform(mySvg.getScreenCTM())
var marker = snap.image("myImageURL", recreatedPoint.x, recreatedPoint.Y, 4, 4)
group.add(marker);
//center the marker and zoom-in
var zoomscale = 3;
mySvg.firstElementChild.setAttribute("transform", "translate(" + (1-3)*recreatedPoint.x + "," + (1-3)*recreatedPoint.y + "), scale(" + zoomscale + "," + zoomscale + ")");如何在下次加载页面时重新创建上一次缩放/平移SVG的位置？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-06 00:45:33
步骤1中为标记生成的转换点是您想要保存的点。即。transformed.x和transformed.y.您在那里所做的是将单击的屏幕空间坐标转换为SVG用户空间坐标。
这些SVG坐标现在独立于SVG的缩放和/或平移方式。就用这些坐标。把你的笔放在那儿。您不需要进行任何进一步的转换。
var marker = snap.image("myMarkerUrl", mySavedX, mySavedY, 8, 8)
group.add(marker);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43812384
复制相关文章
相似问题
腾讯云开发者
