jQuery & Snap.svg -> 圆圈没有正确跟随鼠标

【问题标题】：jQuery & Snap.svg -> circle not following mouse correctlyjQuery & Snap.svg -> 圆圈没有正确跟随鼠标
【发布时间】：2019-05-21 20:57:37
【问题描述】：

我正在玩一些 Snap.svg 和 jQuery，我正在创建这个 bitmoji 并试图让他的眼睛跟随鼠标光标。

除了眼睛，一切都很好。移动光标时它们正在变换和旋转，但不是 100% 正确，我不知道为什么。

这是我在 JSFiddle 中的代码：http://jsfiddle.net/bmp5j4x9/1/

调整结果框的大小，让它变大并在你的鼠标周围移动，我想你会明白我的意思。或者看看http://dante-c.be。

这是 jQuery 部分：

        var s = Snap(420, 420).attr({ viewBox: "0 0 120 120" });
        $(s.node).appendTo(".button");

        var image = s.paper.image('https://render.bitstrips.com/v2/cpanel/10220069-circle-357822728_5-s4-v1.png?palette=1', 0, 0, 1, 1);
        image = image.pattern().attr({
            patternContentUnits: "objectBoundingBox",
            patternUnits: "",
            width: "100%", height: "100%", viewBox: "" 
        });
        var bitmojiCircle = s.circle(60, 60, 39).attr({ fill: image });

        var circleX = 50, circleY = 63, circleRadius = 4.5;
        var bigEyeCircle = s.circle(circleX, circleY, circleRadius);
        var L1 = s.path("M "+circleX+" "+circleY +"L 0 0").attr({stroke: "blue"});
        bigEyeCircle.attr({
            fill: "#bada55",
            stroke: "#000",
            strokeWidth: 1
        });
        var smallEyeCircle = s.circle(0,0,3.5).attr({ fill: "red" });

        var opacityCircle = s.circle(60, 60, 39).attr({ fill: "rgba(255,255,255,0.7)" });
        var menuButton = s.path("M58.486 56.324H57.19c-.48 0-.866.387-.866.865v1.29c0 .48.387.86.865.86h1.29c.48 0 .86-.39.86-.87v-1.29c0-.48-.39-.87-.87-.87zm-4.324 0h-1.297c-.478 0-.865.387-.865.865v1.29c0 .48.387.86.865.86h1.297c.478 0 .865-.39.865-.87v-1.29c0-.48-.387-.87-.865-.87zM58.486 52H57.19c-.48 0-.866.387-.866.865v1.297c0 .478.387.865.865.865h1.29c.48 0 .86-.387.86-.865v-1.297c0-.478-.39-.865-.87-.865zm-4.324 0h-1.297c-.478 0-.865.387-.865.865v1.297c0 .478.387.865.865.865h1.297c.478 0 .865-.387.865-.865v-1.297c0-.478-.387-.865-.865-.865zm12.973 4.324h-1.297c-.478 0-.865.387-.865.865v1.29c0 .48.387.86.865.86h1.297c.478 0 .865-.39.865-.87v-1.29c0-.48-.387-.87-.865-.87zm-4.324 0h-1.29c-.48 0-.86.387-.86.865v1.29c0 .48.39.86.87.86h1.3c.48 0 .87-.39.87-.87v-1.29c0-.48-.38-.87-.86-.87zM67.14 52h-1.3c-.48 0-.866.387-.866.865v1.297c0 .478.387.865.865.865h1.29c.48 0 .86-.387.86-.865v-1.297c0-.478-.39-.865-.87-.865zm-4.324 0H61.52c-.48 0-.865.387-.865.865v1.297c0 .478.386.865.865.865h1.297c.48 0 .866-.387.866-.865v-1.297c0-.478-.386-.865-.864-.865zM58.49 64.973h-1.3c-.48 0-.866.387-.866.865v1.297c0 .478.387.865.865.865h1.29c.48 0 .86-.387.86-.865v-1.297c0-.478-.39-.865-.87-.865zm-4.325 0h-1.297c-.478 0-.865.387-.865.865v1.297c0 .478.387.865.865.865h1.297c.478 0 .865-.387.865-.865v-1.297c0-.478-.388-.865-.866-.865zm4.324-4.324h-1.3c-.48 0-.87.38-.87.86v1.29c0 .48.38.86.86.86h1.29c.48 0 .86-.39.86-.87V61.5c0-.48-.39-.864-.87-.864zm-4.33 0h-1.3c-.48 0-.87.38-.87.86v1.29c0 .48.38.86.86.86h1.29c.472 0 .86-.39.86-.87V61.5c0-.48-.39-.864-.867-.864zm12.97 4.32h-1.29c-.48 0-.87.38-.87.86v1.29c0 .48.38.86.86.86h1.29c.48 0 .86-.39.86-.87v-1.29c0-.48-.387-.87-.865-.87zm-4.33 0h-1.29c-.48 0-.87.38-.87.86v1.29c0 .48.38.86.86.86h1.3c.48 0 .862-.39.862-.87v-1.29c0-.48-.39-.87-.867-.87zm4.32-4.33h-1.3c-.48 0-.87.38-.87.86v1.3c0 .48.384.86.862.86h1.3c.476 0 .863-.39.863-.87V61.5c0-.48-.388-.864-.866-.864zm-4.33 0H61.5c-.48 0-.864.38-.864.86v1.3c0 .48.387.86.866.86H62.8c.48 0 .87-.39.87-.87V61.5c0-.48-.383-.864-.86-.864z").attr({
            class: "menu-button",
            fill: "#9B9B9B",
            fillRule: "nonzero"
        });

        var c1 = s.circle(60, 60, 53).attr({ stroke: "#9B9B9B", transform: "rotate(90 60 60)" });
        var c2 = s.circle(60, 7, 2).attr({ fill: "#9B9B9B" });
        var c3 = s.circle(60, 113, 2).attr({ fill: "#9B9B9B" });
        var c4 = s.circle(113, 60, 2).attr({ fill: "#9B9B9B" });
        var c5 = s.circle(7, 60, 2).attr({ fill: "#9B9B9B" });

        var outerCircles = s.group(c1, c2, c3, c4, c5).attr({ class: "outer-circle" });
        var fullSVG = s.group(bitmojiCircle, bigEyeCircle, L1, smallEyeCircle, opacityCircle, menuButton, outerCircles).attr({ fill: "none", fillRule: "evenodd" });

        function OnMouseMove(evt) {
            L1.attr({ d: "M "+circleX+" "+circleY +"L "+evt.clientX+" "+evt.clientY });
            var totalLength = L1.getTotalLength();

            if (totalLength < circleRadius) {
                smallEyeCircle.attr({ cx: evt.clientX , cy: evt.clientY });
            } else {
                var PAL = L1.getPointAtLength(circleRadius);
                smallEyeCircle.attr({ cx: PAL.x , cy: PAL.y });
            }
        }
        document.onmousemove = OnMouseMove;

编辑

正如 Nikos 所说，尝试通过将 OnMouseMove 函数替换为以下代码来对其进行节流/去抖动：

var pageX = 0,
pageY = 0;

var moveIt = function() {
    L1.attr({ d: "M "+circleX+" "+circleY +"L "+pageX+" "+pageY });
    var totalLength = L1.getTotalLength();

    if (totalLength < circleRadius) {
        smallEyeCircle.attr({ cx: pageX, cy: pageY });
    } else {
        var PAL = L1.getPointAtLength(circleRadius);
        smallEyeCircle.attr({ cx: PAL.x , cy: PAL.y });
    }
    setTimeout(moveIt, 1000/25);
};

$(document).on('mousemove', function(e) {
    pageX = e.pageX;
    pageY = e.pageY;
}).one('mousemove', moveIt);

这似乎不起作用。

更新

我找到了一个更好的解决方案，但它仍然不是 100% 起作用，眼球移动的区域太大，但我不知道如何让它变小。 这是更新的小提琴：http://jsfiddle.net/bmp5j4x9/3/

【问题讨论】：

  • 尝试节流或debounce 事件以更顺畅地进行
  • 您的更新不是正确的节流或去抖动。仔细阅读节流阀和去抖动的作用，并如图所示实施。
  • 您正在检测鼠标相对于文档的位置，并且您正在使用这些坐标在大小为 120/120 的 SVG 画布内绘制

标签： javascript jquery svg snap.svg


【解决方案1】：

正如我所评论的，您正在检测鼠标相对于文档的位置，并且您正在使用这些坐标在大小为 120/120 的 SVG 画布内进行绘制。这是行不通的。 接下来是一个示例（Javascript），该行正确地跟随鼠标

let m = {}
test.addEventListener("mousemove",(e)=>{
// draw the line on mousemove
  m=oMousePosSVG(e);
  _line.setAttributeNS(null,"x2",m.x);
  _line.setAttributeNS(null,"y2",m.y);
})

function oMousePosSVG(e) {
// a function to detect the mouse position inside an SVG
      var p = test.createSVGPoint();
      p.x = e.clientX;
      p.y = e.clientY;
      var ctm = test.getScreenCTM().inverse();
      var p =  p.matrixTransform(ctm);
      return p;
}
<svg id="test" viewBox="0 0 120 120" width="100vw" height="100vh">
  <circle cx="60" cy="60" r="20" fill="#d9d9d9" />
  <line id="_line" x1="55" y1="60" stroke="blue" />
</svg>

另一种解决方案是让事情保持原样，但根据文档大小重新计算鼠标位置：

let w = window.innerWidth;
let h = window.innerHeight;
let m = {}


document.addEventListener("mousemove",(e)=>{
  //get the mouse position
  m=oMousePos(e);
  //calculate the x2 and y2 for the line in function of the size of the window
  let x2 = map(m.x, 0, w, 0, 120)
  let y2 = map(m.y, 0, h, 0, 120)
  // set the attributes x2 and y2 for the line
  _line.setAttributeNS(null,"x2",x2);
  _line.setAttributeNS(null,"y2",y2);
})

function init(){
// a function to get the size of the window on resize
  w = window.innerWidth;
  h = window.innerHeight;
}

// you call the init on resize
setTimeout(function() {
		init();
		addEventListener('resize', init, false);
}, 15);

// a function to get the mouse position
function oMousePos(evt) {
   return { 
       x: evt.clientX,
       y: evt.clientY
      }
}


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}
svg {
  border: 1px solid;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
<svg id="test" viewBox="0 0 120 120" width="240" >
  <circle cx="60" cy="60" r="20" fill="#d9d9d9" />
  <line id="_line" x1="55" y1="60" stroke="blue" />
</svg>

希望对你有帮助。

更新

实际上，他们希望红色小圆圈跟随鼠标。在这种情况下，您需要计算眼睛中心与鼠标之间的角度，并使用此角度绘制红色圆圈：

let m = {}
let c = {x:55,y:60}// the center of the eye
let r = whitecircle.getAttribute("r") - redcircle.getAttribute("r") - .5;
// where .5 is 1/2 stroke-width
test.addEventListener("mousemove",(e)=>{
// draw the line on mousemove
  m=oMousePosSVG(e);
  //_line.setAttributeNS(null,"x2",m.x);
  //_line.setAttributeNS(null,"y2",m.y);
  var angle = getAngle(m,c)
  //this are the coordinates for the center of the red circle 
  var x2 = c.x + r * Math.cos(angle);
  var y2 = c.y + r * Math.sin(angle);

  redcircle.setAttributeNS(null,"cx",x2);
  redcircle.setAttributeNS(null,"cy",y2);
})

function oMousePosSVG(e) {
// a function to detect the mouse position inside an SVG
      var p = test.createSVGPoint();
      p.x = e.clientX;
      p.y = e.clientY;
      var ctm = test.getScreenCTM().inverse();
      var p =  p.matrixTransform(ctm);
      return p;
}

function getAngle(p1,p2){
  // a function to calculate the angle between two points p1 and p2
  var deltaX = p1.x - p2.x;
  var deltaY = p1.y - p2.y;
  return Math.atan2(deltaY, deltaX);
}
<svg id="test" viewBox="0 0 120 120" width="100vw" height="100vh">
  <circle cx="60" cy="60" r="20" fill="#d9d9d9" />
  <circle id="whitecircle" cx="55" cy="60" r="5" fill="#fff" stroke="black" />
  <circle cx="55" cy="60" r="3" fill="#f00" id="redcircle"  />
  <!--<line id="_line" x1="55" y1="60" stroke="blue" />-->
</svg>

【讨论】：

  • 它确实有效，谢谢！我已经实现了您的第一个答案，但是我无法让红点留在眼球中。关于如何使它工作的任何提示？ （见dante-c.be）
  • 什么是“眼球”？你是说灰色圆圈吗？另外：你介意把它放在一个小提琴中，以便我可以修改代码吗？
  • 不，绿色的，黑色的。蓝线开始的地方。
  • 显然你给了 smallEyeCircle 和鼠标一样的坐标。你想达到什么目标？是否需要 smallEyeCircle 跟随鼠标在眼睛内移动？
  • 非常感谢，我已经查看了您更新的答案，现在我知道这应该是如何工作的。谢谢你的帮助。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-04
  • 2013-12-07
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode