jquery鼠标选择无法正常工作

jquery mouse selection not working properly

本文关键字：工作 常工作 鼠标 选择 jquery      更新时间：2023-09-26

我正在尝试使用jQuery创建一个鼠标选择，这就是我正在尝试的，它可以工作，但有一个错误：如果我开始选择并在圆圈中移动鼠标，选择就会中断。。。我该如何解决？

Fiddle

distanceStart = 0;
distanceEnd = 0;
mousedown = false;
$(window).on('mousedown',function(e){
    e.preventDefault();
    mousedown = true;
    distanceXStart = e.clientX;
    distanceYStart = e.clientY;
    $div = $('<div/>', {
        class: 'class'
    }).appendTo('body');
});
$(window).on('mouseup',function(e){
    e.preventDefault();
    mousedown = false;
    $div.remove();
});
$(window).on('mousemove',function(e){
    e.preventDefault();
    if(mousedown){
        distanceXEnd = e.clientX;
        distanceYEnd = e.clientY;
        distanceX = (distanceXEnd - distanceXStart);
        distanceY = (distanceYEnd - distanceYStart);
        if(distanceX > 0 && distanceY > 0){
            $div.css({
                'left': (e.clientX - (distanceX/*/2*/)),
                'top': (e.clientY - (distanceY/*/2*/)),
                'width': distanceX,
                'height': distanceY
            });
        }else
        if(distanceX < 0 && distanceY < 0){
            $div.css({
                'left': e.clientX,
                'top': e.clientY,
                'width': (1-distanceX),
                'height': (1-distanceY)
            });
        }
    }
});

您几乎到了，只是忘记了检查其他两个条件：distanceX < 0或distanceY < 0

这是一个使用原始小提琴的演示

下面是我在第二个else if结束后添加的内容：

// ... stuff
else if ( distanceX < 0 ) {
    $div.css({
        'left': e.clientX,
        'top': e.clientY - distanceY,
        'width': (1 - distanceX),
        'height': distanceY
    });
}
else if ( distanceY < 0 ) {
    $div.css({
        'left': e.clientX - distanceX,
        'top': e.clientY,
        'width': distanceX,
        'height': (1 - distanceY)
    });
}

您可以使用HTML5 canvas实现这种类型的交互。https://jsfiddle.net/nbwLr27s/1/

Canvas非常适合这类事情，因为它可以让你完全控制你想要显示的形状，并且性能非常好，因为它不涉及DOM操作。

对于画布fillRect，您只需要开始x、开始y、宽度和高度。我使用了以下代码：

  var leftmost = Math.min(start_x, coords.x)
  var rightmost = Math.max(start_x, coords.x)
  var lowest = Math.min(start_y, coords.y)
  var highest = Math.max(start_y, coords.y)
  ctx.fillRect(leftmost, lowest, rightmost - leftmost, highest - lowest)
相关文章：