正确检测触摸板滑动方向

Question

我能够横向扩展 x 轴和 y 轴，使用箭头键效果很好，我想用触摸板做到这一点 aswel.I 尝试了下面的代码，它可以工作但不流畅.有时，当我放大 X 时，它甚至会放大 Y，反之亦然。 window.addEventListener('mousewheel', 函数(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;

    })

再次在上面的代码中我能够找到方向，但它滞后并挂在 middle.Is 这是正确的方法吗？或者我可以改进我的代码以改进我的 swipe/mousewheel 方向，谢谢。

Answer 1

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

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

我没有找到任何方法来分别区分沿 X 和 Y 的捏合交互，似乎 JS 事件只是为两者获得一个值，该值分配给 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), false, 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, false, true)
        chart.getDefaultAxisY().setInterval(yInterval.start + panY, yInterval.end + panY, false, true)
    }

    e.preventDefault()
})

<script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/lcjs@3.0.0/dist/lcjs.iife.js"></script>

正确检测触摸板滑动方向

Detect direction of touchpad swipe properly

javascript

lightningchart