保存 SVG 单击位置并在重新加载时重新创建它
Save a SVG click location and recreate it on reload
我是使用 SVG 的新手,并且我正在努力处理一个项目的一部分。
我正在尝试将用户的点击位置保存在 scalable/pannable svg 上,以便我可以在加载页面时从那时起重新创建它。
我正在使用 snap.svg 和 snap.svg.zpd,因为我在开始这个项目时看到它们在示例中使用。
(这部分有效)
用户可以 zoom/pan svg 并使用鼠标单击在图像上放置标记。
html:
<svg id="svgmap" width="695" height="900" ></svg>
js:
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 + ")");
如何在下次加载页面时重新创建之前 scaled/panned SVG 单击的位置?
您在步骤 1 中为标记生成的变换点就是您要保存的点。 IE。 transformed.x
和 transformed.y
。您在那里所做的是将点击的屏幕 space 坐标转换为 SVG 用户 space 坐标。
这些 SVG 坐标现在独立于 SVG 的缩放方式 and/or 平移。只需使用那些坐标。把你的标记放在那里。您不需要进行任何进一步的转换。
var marker = snap.image("myMarkerUrl", mySavedX, mySavedY, 8, 8)
group.add(marker);
我是使用 SVG 的新手,并且我正在努力处理一个项目的一部分。 我正在尝试将用户的点击位置保存在 scalable/pannable svg 上,以便我可以在加载页面时从那时起重新创建它。
我正在使用 snap.svg 和 snap.svg.zpd,因为我在开始这个项目时看到它们在示例中使用。
(这部分有效)
用户可以 zoom/pan svg 并使用鼠标单击在图像上放置标记。
html:
<svg id="svgmap" width="695" height="900" ></svg>
js:
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 + ")");
如何在下次加载页面时重新创建之前 scaled/panned SVG 单击的位置?
您在步骤 1 中为标记生成的变换点就是您要保存的点。 IE。 transformed.x
和 transformed.y
。您在那里所做的是将点击的屏幕 space 坐标转换为 SVG 用户 space 坐标。
这些 SVG 坐标现在独立于 SVG 的缩放方式 and/or 平移。只需使用那些坐标。把你的标记放在那里。您不需要进行任何进一步的转换。
var marker = snap.image("myMarkerUrl", mySavedX, mySavedY, 8, 8)
group.add(marker);