如何在移动设备上放大 Fabric JS？答案

【问题标题】：How can I zoom in Fabric JS on mobile devices?如何在移动设备上放大 Fabric JS？
【发布时间】：2021-03-15 11:32:36
【问题描述】：

我可以使用画布内的计算机进行放大和缩小。但是，我无法在移动设备（智能手机、平板电脑等）上放大和缩小。当我查看文档时，我找到了“触摸：手势”方法，但我无法将其调整为我的代码并执行它。我怎样才能做到这一点？下面我添加我使用的代码。

var canvas = new fabric.Canvas('c');


canvas.setBackgroundImage('https://i.hizliresim.com/iBHC0t.jpg', canvas.renderAll.bind(canvas));
canvas.selection = false;
//var uniqid = "0";
var uniqids = 0;
$("#door").on("click", function(e) {
  rect = new fabric.Rect({
        id:uniqid,
                left: 40,
                top: 40,
                width: 35,
                height: 50,      
                fill: 'blue',
                stroke: 'blue',
                strokeWidth: 5,
                strokeUniform: false,
                hasControls : true,
                 });  
  
                var uniqid = uniqids.toString(); 
  
               var text = new fabric.Text(uniqid, {
                  fontSize: 30,
                  originX: 'center',
                  originY: 'right'
                });
                
                var group = new fabric.Group([ rect, text ], {
                  left: 0,
                  top: 100,
                });
                                        
              canvas.add(group);
        canvas.add(rect);
        uniqids++;
  
  
});
//*****************************
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.setZoom(zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
  
})



//***************************************

$("#save").on("click", function(e) {
    $(".save").html(canvas.toSVG());
});

$('#delete').click(function() {
  var activeObject = canvas.getActiveObjects(); 
    canvas.discardActiveObject();
    canvas.remove(...activeObject); 
});

$("#btnResetZoom").on("click", function(e) {
    canvas.setViewportTransform([1,0,0,1,0,0]);
});


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();
});
var shiftKeyDown = true;
var mouseDownPoint = null;
canvas.on('mouse:move', function(options) {
  if (shiftKeyDown && mouseDownPoint) {
    var pointer = canvas.getPointer(options.e, true);
    var mouseMovePoint = new fabric.Point(pointer.x, pointer.y);
    canvas.relativePan(mouseMovePoint.subtract(mouseDownPoint));
    mouseDownPoint = mouseMovePoint;
    keepPositionInBounds(canvas);
  }
});
 
 

/*
    canvas.on('mouse:over', function(e) {
                e.target.set('fill', 'red');            
                canvas.renderAll();
              });
        */

#c {
  background-color: grey;
  margin-top: 10px;
}

button {
  padding: 10px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="door">Door</button>
<button id="delete">Delete Door</button>
<button id="save">Save</button>
<button id="btnResetZoom">Reset Zoom</i></button>
 

<p>Save bastıktan sonra altta SVG dosyası oluşur</p>
<br> 
<canvas id="c" width="800" height="800"></canvas>
<br>  
<p class="save">
</p>

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案1】：

感谢您的提问。我曾经遇到过同样的问题，我很容易就解决了。

但是，我无法在移动设备（智能手机、平板电脑等）上进行放大和缩小。

您是否在智能手机或平板电脑上运行过Demo for touch events？然后如您所见，无需为pinch zoom 或rotate 添加一些自定义代码。它会自动使您能够使用这些功能。
要点是，您应该使用启用了触摸事件的自定义版 Fabric。
只是fabric_with_gestures.js。我还一起使用了prism.js。

【讨论】：