如何实现在伪造查看器上闪烁的挂钩标记

Question

我在模型查看器上开发了闪烁的标记，并使用了下面的代码部分。但是，当我在模型上更改相机视图时，标记的位置已经更改，并且它们的位置不正确。我想钩住他们，而不是改变他们的状态。

$('#mymk'+randomId).append('<svg id="mysvg'+randomId+ '"></svg>')
$('#mysvg'+randomId ).css({
'width': '50px'
});
var rad = 12;
const size=300;
var s = Snap($('#mysvg'+randomId)[0]);
s.attr({viewBox: "0 0 " + size + " " + size});
const userPath = s.path("M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490S770.6,10,500,10z M496.2,255c70,0,126.7,56.7,126.7,126.7s-56.7,126.7-126.7,126.7s-126.7-56.7-126.7-126.7C369.5,311.7,426.3,255,496.2,255z M629.1,745h-266c-25.8,0-78.2-21.1-78.2-46.8v0c0-85.8,70.4-156,156.4-156h109.5c86,0,156.4,70.2,156.4,156C707.4,723.9,654.9,745,629.1,745z")
.attr({fill: "#029e02"});
const userBox = userPath.getBBox();
const circleBg = s.circle(userBox.cx, userBox.cy, userBox.width / 2)
.attr({fill: "#029e02", stroke: "#029e02", strokeWidth: 800});
const user = s.group(circleBg, userPath);
const userScaleFactor = 0.09;
const userMtx = new Snap.Matrix();
userMtx.translate(size/2 - userBox.width*userScaleFactor / 2, size/2 - userBox.height*userScaleFactor/2);
userMtx.scale(userScaleFactor);
user.attr({transform: userMtx, cursor: "pointer"});
const smallUserMtx = userMtx.clone().scale(0.9, 0.9, userBox.cx, userBox.cy);
setInterval(blink, 3000);
function blink(){
user.animate({transform: smallUserMtx}, 200, mina.easein, () => user.animate({transform: userMtx}, 200));
const newCircle = s.circle(size/2, size/2, 40);
user.before(newCircle);
newCircle.attr({fill: "rgb(244, 203, 217)", strokeWidth: "20", stroke: "#015401"});
newCircle.animate({r: size/2, opacity: 0}, 2000, mina.easeout, () => newCircle.remove());
};
user.attr({
pointerEvents: "auto",
cursor: "pointer"
});

Answer 1

在查看器中，这通常通过锁定相机导航来处理，基本上可以防止用户在显示叠加标记时移动相机。您可以使用setNavigationLock方法来控制导航。