正确检测触摸板滑动的方向

问题描述

我能够按比例缩小 x 轴和 y 轴，它用箭头键工作得很好，我想用触摸板 aswel。我在下面的代码中尝试了这个，它工作但不流畅。有时当我放大 X ，它甚至放大 Y ，反之亦然。 window.addEventListener('mousewheel',function(e) {

window.addEventListener('mousewheel',function(e) {
    e.preventDefault();


    yDelta = e.deltaY;
    xDelta = e.deltaX;



    if (yDelta < -1 && Math.round(xDelta) < 1) {
        zoomOutY();

    } else if (yDelta > 1 && Math.round(xDelta) < 1) {
        zoomInY();


    } else if (xDelta < -1 && Math.round(yDelta) < 1) {
        zoomOut();

    } else if (xDelta > -1 && Math.round(yDelta) < 1) {
        zoomIn();


    }

},{
    passive: false
});

再次与mousemove方法相同的问题，如何平滑地检测4个方向，下面是我的代码。

    document.addEventListener('mousemove',mouseMoveMethod);
    document.addEventListener('mousedown',mouseDownMethod);
    document.addEventListener('mouseup',mouseUpMethod);
    // Prevent context menu popup,so we can move our mouse.
    document.addEventListener('contextmenu',function(e) {
        e.preventDefault();
        return false;
    },false);

mouseMoveMethod = function(e) {

    if (e.ctrlKey || mouseIsHeld) {


        let offsetX = 0
        let offsetY = 0


        if (e.pageX > oldx && e.pageY == oldy) {
            direction = "East";
            offsetX -= 1


        } else if (e.pageX == oldx && e.pageY > oldy) {
            direction = "South";

            offsetY += 1


        } else if (e.pageX == oldx && e.pageY < oldy) {

            direction = "north";
            offsetY -= 1

        } else if (e.pageX < oldx && e.pageY == oldy) {
            offsetX += 1
            direction = "West";

        }


        updateKeyboardPan(offsetX,offsetY);

        oldx = e.pageX;
        oldy = e.pageY;

    })

同样在上面的代码中，我能够找到方向，但它滞后并挂在中间。这是正确的方法吗？或者我可以改进我的代码以改进我的滑动/鼠标滚轮方向，谢谢。

解决方法

我在 JavaScript 中发现了 quite interesting example 的多点触控触控板手势。

下面的代码片段利用它来覆盖触控板的 LCJS 图表交互。对我来说，它似乎以一种令人惊讶的直观方式执行放大/缩小捏合交互（2 个手指，向相反方向移动）和通过在同一方向拖动 2 个手指进行平移。

我没有找到任何方法来分别区分沿 X 和 Y 的捏合交互，似乎 JS 事件只是为两者获取了一个值，该值分配给 X.append(Y,ignore_index=True)。

deltaY

const {
  lightningChart
} = lcjs;

const {
  createProgressiveTraceGenerator
} = xydata;

const chart = lightningChart().ChartXY();
const series = chart.addLineSeries()

createProgressiveTraceGenerator()
  .setNumberOfPoints(1000)
  .generate()
  .toPromise()
  .then(data => {
    series.add(data)
  })
  
chart.setMouseInteractionWheelZoom(false)
chart.onSeriesBackgroundMouseWheel((_,e) => {
    const xInterval = chart.getDefaultAxisX().getInterval()
    const yInterval = chart.getDefaultAxisY().getInterval()
    if (e.ctrlKey) {
        // Zoom in / out (no separation of X or Y amount!)
        const zoomAmount = e.deltaY * 0.01
        chart.getDefaultAxisX().setInterval(xInterval.start + zoomAmount * (xInterval.end - xInterval.start),xInterval.end - zoomAmount * (xInterval.end - xInterval.start),false,true)
        chart.getDefaultAxisY().setInterval(yInterval.start + zoomAmount * (yInterval.end - yInterval.start),yInterval.end - zoomAmount * (yInterval.end - yInterval.start),true)
    } else {
        // Pan X and Y simultaneously.
        const panX = e.deltaX * 0.001 * (xInterval.end - xInterval.start)
        const panY = e.deltaY * -0.001 * (yInterval.end - yInterval.start)
        chart.getDefaultAxisX().setInterval(xInterval.start + panX,xInterval.end + panX,true)
        chart.getDefaultAxisY().setInterval(yInterval.start + panY,yInterval.end + panY,true)
    }

    e.preventDefault()
})

javascript lightningchart