在 mouseup 事件后单击时移动的 SVG 路径
SVG path moving on clicking after mouseup event
我正在尝试使用 SVG 线连接两个动态创建的 div。为了做到这一点,我为每个 div 创建了一个输出端口,SVG 路径将从那里开始。从输出端口单击并拖动鼠标时,SVG 路径会移动并跟随光标。但是,当我点击其他地方完成后,它会改变它的位置。基本上,它的路径在鼠标松开事件后得到更新。无论我点击哪里,这条线都不应该在 mouseup 之后移动。我无法理解我的代码中的错误。
https://codepen.io/iamkrptonite/pen/ExZXjor
$(document).ready(function(){
const boundary = $(".boundary")
const outport = $(".outport")
const bezierWeight = 0.6;
var boxX = boundary[0].offsetLeft;
var boxY = boundary[0].offsetTop;
$(boundary).click(function(){
console.log("boom")
})
$(outport).on("mousedown",function(e){
var imouseX = e.pageX-boxX;
var imouseY = e.pageY-boxY;
$(boundary).on("mousemove",function(e){
var mouseX = e.pageX-boxX;
var mouseY = e.pageY-boxY;
updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
}).mouseup(function (e) {
var mouseX = e.pageX-boxX;
var mouseY = e.pageY-boxY;
updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
$(this).unbind('mousemove');
$(this).unbind('mousedown');
$(this).unbind('mouseclick');
})
}).mouseup(function(){
$(this).unbind('mousemove');
$(this).unbind('mousedown');
$(this).unbind('mousedown');
})
function updateBoxesPath(imouseX,imouseY,mouseX,mouseY) {
var boxPath = document.getElementById("boxPath_0");
var x1 = imouseX;
var y1 = imouseY;
var x4 = mouseX;
var y4 = mouseY;
var dx = Math.abs(x4 - x1) * bezierWeight;
var x2 = x1 + dx;
var x3 = x4 - dx;
var boxData = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
boxPath.setAttribute("d", boxData);
}
})
你必须取消绑定 mouseup,但你也必须精确选择相同的选择器:(我建议你使用 .off,不推荐使用 .unbind)
$(outport).on("mousedown",function(e){
var imouseX = e.pageX-boxX;
var imouseY = e.pageY-boxY;
$(boundary).on("mousemove",function(e){
var mouseX = e.pageX-boxX;
var mouseY = e.pageY-boxY;
updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
}).mouseup(function (e) {
var mouseX = e.pageX-boxX;
var mouseY = e.pageY-boxY;
updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
$(boundary).off('mousemove mouseup');
$(outport).off('mousedown');
})
});
当然解绑不同的事件后,你必须再次绑定(.on)以重新激活另一条路径。
我正在尝试使用 SVG 线连接两个动态创建的 div。为了做到这一点,我为每个 div 创建了一个输出端口,SVG 路径将从那里开始。从输出端口单击并拖动鼠标时,SVG 路径会移动并跟随光标。但是,当我点击其他地方完成后,它会改变它的位置。基本上,它的路径在鼠标松开事件后得到更新。无论我点击哪里,这条线都不应该在 mouseup 之后移动。我无法理解我的代码中的错误。
https://codepen.io/iamkrptonite/pen/ExZXjor
$(document).ready(function(){
const boundary = $(".boundary")
const outport = $(".outport")
const bezierWeight = 0.6;
var boxX = boundary[0].offsetLeft;
var boxY = boundary[0].offsetTop;
$(boundary).click(function(){
console.log("boom")
})
$(outport).on("mousedown",function(e){
var imouseX = e.pageX-boxX;
var imouseY = e.pageY-boxY;
$(boundary).on("mousemove",function(e){
var mouseX = e.pageX-boxX;
var mouseY = e.pageY-boxY;
updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
}).mouseup(function (e) {
var mouseX = e.pageX-boxX;
var mouseY = e.pageY-boxY;
updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
$(this).unbind('mousemove');
$(this).unbind('mousedown');
$(this).unbind('mouseclick');
})
}).mouseup(function(){
$(this).unbind('mousemove');
$(this).unbind('mousedown');
$(this).unbind('mousedown');
})
function updateBoxesPath(imouseX,imouseY,mouseX,mouseY) {
var boxPath = document.getElementById("boxPath_0");
var x1 = imouseX;
var y1 = imouseY;
var x4 = mouseX;
var y4 = mouseY;
var dx = Math.abs(x4 - x1) * bezierWeight;
var x2 = x1 + dx;
var x3 = x4 - dx;
var boxData = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
boxPath.setAttribute("d", boxData);
}
})
你必须取消绑定 mouseup,但你也必须精确选择相同的选择器:(我建议你使用 .off,不推荐使用 .unbind)
$(outport).on("mousedown",function(e){
var imouseX = e.pageX-boxX;
var imouseY = e.pageY-boxY;
$(boundary).on("mousemove",function(e){
var mouseX = e.pageX-boxX;
var mouseY = e.pageY-boxY;
updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
}).mouseup(function (e) {
var mouseX = e.pageX-boxX;
var mouseY = e.pageY-boxY;
updateBoxesPath(imouseX,imouseY,mouseX,mouseY);
$(boundary).off('mousemove mouseup');
$(outport).off('mousedown');
})
});
当然解绑不同的事件后,你必须再次绑定(.on)以重新激活另一条路径。