当鼠标经过其他页面元素时,Konvas 拖动算法会导致跳过 - 在 1.6.2 中损坏,在 1.6.3 中解决
Konvas drag algorithm causes skipping as mouse passes over other page elements - broken in 1.6.2, solved in 1.6.3
在此片段中,当我在 Konvas canvas 周围拖动绿色矩形时,一切正常。但是,当我继续拖动并且鼠标移到顶部栏上时,例如,鼠标指针下方的绿色矩形 'jumps'。
我是不是做错了什么?
感觉拖动代码使用的是相对于元素 'under' 指针而不是页面的 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
中修复,现在它应该可以按预期工作。
在此片段中,当我在 Konvas canvas 周围拖动绿色矩形时,一切正常。但是,当我继续拖动并且鼠标移到顶部栏上时,例如,鼠标指针下方的绿色矩形 'jumps'。
我是不是做错了什么?
感觉拖动代码使用的是相对于元素 'under' 指针而不是页面的 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
中修复,现在它应该可以按预期工作。