fabric.JS - 放大/缩小和移动画布在手机上不起作用

Question

我正在使用 fabric.JS（为包含触摸事件而定制），我遇到了触摸事件的问题。

• 放大/缩小在鼠标滚轮上有效，但在移动触摸屏上无效
• 我可以使用 Alt+左键移动画布，但在移动触摸屏上我无法移动画布

Codepen 上我的工作代码点击这里

var canvas = new fabric.Canvas('step1');
      canvas.add(new fabric.Rect({ width: 50, height: 50, fill: 'blue', angle: 10 }))
      canvas.add(new fabric.Circle({ radius: 50, fill: 'red', top: 44, left: 80 }))
      canvas.add(new fabric.Ellipse({ rx: 50, ry: 10, fill: 'yellow', top: 80, left: 35 }))
      canvas.add(new fabric.Rect({ width: 50, height: 50, fill: 'purple', angle: -19, top: 70, left: 70 }))
      canvas.add(new fabric.Circle({ radius: 50, fill: 'green', top: 110, left: 30 }))
      canvas.add(new fabric.Ellipse({ rx: 50, ry: 10, fill: 'orange', top: 12, left: 100, angle: 30 }))

//handle Zoom
canvas.on('mouse:wheel', function(opt) {
        var delta = opt.e.deltaY;
        var zoom = canvas.getZoom();
        zoom *= 0.999 ** delta;
        if (zoom > 20) zoom = 20;
        if (zoom < 0.01) zoom = 0.01;
        canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
        opt.e.preventDefault();
        opt.e.stopPropagation();
    });
//handle pan click with Alt key press
    canvas.on('mouse:down', function(opt) {
        var evt = opt.e;
        if (evt.altKey === true) {
            this.isDragging = true;
            this.selection = false;
            this.lastPosX = evt.clientX;
            this.lastPosY = evt.clientY;
        }
    });
canvas.on('mouse:move', function(opt) {
        if (this.isDragging) {
            var e = opt.e;
            var vpt = this.viewportTransform;
            vpt[4] += e.clientX - this.lastPosX;
            vpt[5] += e.clientY - this.lastPosY;
            this.requestRenderAll();
            this.lastPosX = e.clientX;
            this.lastPosY = e.clientY;
        }
    });
    canvas.on('mouse:up', function(opt) {
        // on mouse up we want to recalculate new interaction
        // for all objects, so we call setViewportTransform
        this.setViewportTransform(this.viewportTransform);
        this.isDragging = false;
        this.selection = true;
    });

//handle gustures
var info = document.getElementById('info');

canvas.on({
        'touch:gesture': function(e) {
            var text = document.createTextNode(' Gesture ');
            info.insertBefore(text, info.firstChild);
        
},
      
        'touch:drag': function(e) {
        var text = document.createTextNode(" dragging ");
            info.insertBefore(text, info.firstChild);
        
},
        'touch:orientation': function() {
            var text = document.createTextNode(' Orientation ');
            info.insertBefore(text, info.firstChild);
        },
        'touch:shake': function() {
            var text = document.createTextNode(' Shaking ');
            info.insertBefore(text, info.firstChild);
        },
        'touch:longpress': function() {
            var text = document.createTextNode(' Longpress ');
            info.insertBefore(text, info.firstChild);
        },
  });

<div id="info"></div>
<div id="canvasWrapper">
  <canvas id="step1" width="400"  height="400" style="border: solid gray  thin;"></canvas>
</div>

Answer 1

ClientX 和 ClientY 触摸设备的位置将无法直接在 evt 对象中使用。你必须从 evt.touches

访问那些

更新后的代码可能看起来像

canvas.on('mouse:down', function(opt) {
    var evt = opt.e;
    
    this.isDragging = true;
    this.selection = false;
    if(evt.type === 'mousedown' && evt.altKey === true){
        this.lastPosX = evt.clientX;
        this.lastPosY = evt.clientY;
    }
    if(evt.type === 'touchstart' && evt.touches && evt.touches.length === 1){
        this.lastPosX = evt.touches[0].clientX;
        this.lastPosY = evt.touches[0].clientY;
    }
});


canvas.on('mouse:move', function(opt) {
    var e = opt.e;
    if (this.isDragging) {
        if(e.type === 'mousemove'){
            vpt[4] += e.clientX - this.lastPosX;
            vpt[5] += e.clientY - this.lastPosY;
            this.requestRenderAll();
            this.lastPosX = e.clientX;
            this.lastPosY = e.clientY;
        }
        if(e.type === 'touchmove' && e.touches && e.touches.length){
                vpt[4] += e.touches[0].clientX - this.lastPosX;
                vpt[5] += e.touches[0].clientY - this.lastPosY;
                this.requestRenderAll();
                this.lastPosX = e.touches[0].clientX;
                this.lastPosY = e.touches[0].clientY;
        }
    }
});