javascript - 当鼠标经过其他页面元素时,Konvas 拖动算法会导致跳过 - 在 1.6.2 中损坏,在 1.6.3 中解决

标签 javascript konvajs

在此片段中,当我拖动 Konvas Canvas 周围的绿色矩形时,一切正常。然而,当我继续拖动并且鼠标移动到顶部栏上时,例如,绿色矩形“跳跃”到鼠标指针下方。

我做错了什么吗?

感觉拖动代码正在使用相对于指针“下方”元素而不是页面的 mousemove 事件参数。也许像 event.clientX & Y 而不是 event.pageX & Y。

编辑:我添加了一个绝对位于 Canvas 上的灰色 div - 尝试在 Canvas 上拖动绿色矩形,以便鼠标经过灰色框。跳跳跳跳。

// add a stage
var s = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 400
});

// add a layer        
var l = new Konva.Layer();
s.add(l);

// Add a green rect to the LAYER
var green = new Konva.Rect({stroke: 'lime', width:100, height: 100, draggable: true, x: 20, y: 20});
l.add(green);

l.draw()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.2/konva.min.js"></script>


<body>
  <div id="top"  style='width: 600px; height: 50px; border: 1px solid #ccc;'><span>Top bar</span>
  <span> Pos: </span><span id='pos'> Drag the green rect, watch it jump when mouse moves over this bar.</span>
  </div>

  <div id="container"  style='width: 600px; height: 500px; border: 1px solid #ccc;'></div>

  <div id="blob"  style='width: 40px; height: 40px; border: 1px solid #ccc; background-color: #ccc; position: absolute; left: 250px; top: 80px;'></div>


</body>

最佳答案

这是一个错误。新版本 v1.6.3 已修复该问题,现在应该可以按预期工作。

关于javascript - 当鼠标经过其他页面元素时,Konvas 拖动算法会导致跳过 - 在 1.6.2 中损坏,在 1.6.3 中解决,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44163354/

相关文章:

javascript - 无法在加载页面期间更改表单子(monad)元素的边框颜色

javascript - Konva - 使用旋转并保持在界限内

javascript - requestAnimationFrame - 浏览器支持问题

javascript - JavaScript中 "=>"(由等于和大于组成的箭头)是什么意思?

javascript - Make First Ingredient永远无法删除

kineticjs - 现在KineticJS不再维护了,在哪里可以找到它的文档?

javascript - React Konva - 代码突然运行

javascript - 在 Vue Konva 中仅检测非透明像素的图像事件 (drawHitFromCache)

typescript - 维·康瓦。提高用动画渲染多个圆圈的性能

javascript - REST API - CORS 问题