FabricJS，如何在Fabric js中实现触摸控件

Question

我尝试了以下答案：https://stackoverflow.com/a/45131912/12114516

但是，当我尝试在画布上拖动时，只会显示蓝色框。因此，我尝试在登录touch even时控制台日志，但那没有用。这个蓝色的拖动框涵盖了触摸命令这是我尝试拖动时看到的：

[答案在这里：我挖了一下，发现演示：http://fabricjs.com/touch-events

正在使用另一个JS文件：http://fabricjs.com/lib/fabric_with_gestures.js，所以我只是去那个网站ctrl + a，ctrl + c，创建一个新的脚本文件，ctrl + v并将我的默认面料js文件从html链接到新的js文件，因此我的脚本src如下所示：

<script src="/script/fabric_with_touch.js"></script>

请记住，“ fabric_with_touch.js”是我创建的文件，并将网站内容复制并粘贴到其中。不用担心，它不会与您的鼠标或键盘控件混在一起。

Answer 1

欢迎，我挖了一下，发现演示：http://fabricjs.com/touch-events

正在使用另一个JS文件：http://fabricjs.com/lib/fabric_with_gestures.js所以我刚去那个网站ctrl + a，ctrl + c制作了一个新的脚本文件ctrl + v并将我的默认面料js文件从html链接到新的js文件所以我的脚本src如下所示：

<script src="/script/fabric_with_touch.js"></script>

请记住，“ fabric_with_touch.js”是我创建的文件，并将网站内容复制并粘贴到其中。不用担心，它不会弄乱您的鼠标或键盘控件，我也曾尝试过

Answer 2

如果要缩放和平移：可以使用此代码：

var pausePanning=false;
var lastX,lastY,xChange,yChange;
      canvas.on({
         'touch:gesture': function(e) {
             if (e.e.touches && e.e.touches.length == 2) {
                 pausePanning = true;
                 var point = new fabric.Point(e.self.x, e.self.y);
                 if (e.self.state == "start") {
                     zoomStartScale = canvas.getZoom();
                 }
                 var delta = zoomStartScale * e.self.scale;
                 canvas.zoomToPoint(point, delta);
                 pausePanning = false;
             }
         },
         'object:selected': function() {
             pausePanning = true;
         },
         'selection:cleared': function() {
             pausePanning = false;
         },
         'touch:drag': function(e) {
            canvas.selection=false;
            console.log('touched!')
             if (pausePanning == false && undefined != e.self.x && undefined != e.self.x) {
                 currentX = e.self.x;
                 currentY = e.self.y;
                 xChange = currentX - lastX;
                 yChange = currentY - lastY;

                 if( (Math.abs(currentX - lastX) <= 50) && (Math.abs(currentY - lastY) <= 50)) {
                     var delta = new fabric.Point(xChange, yChange);
                     canvas.relativePan(delta);
                 }
                 lastX = e.self.x;
                 lastY = e.self.y;
             }
         }
     });

信用：https://stackoverflow.com/a/51696858/12114516**可能只适合我，但是，如果您在手机上触摸画布时画布变成空白，请注释掉鼠标控件**