Trying to add touch support to a fabric js canvas. On pc it works fine with the points around the image and I can resize\rotate it, on mobile, if i try to resize\rotate with two fingers the image shrinks and becomes very small.

When I go to http://fabricjs.com/touch-events it works just fine but if i grab this code to my website, it doesn't work and acts just as before.

Canvas code:

<div style="display:none" id='canvasContainer'>
      <div id="rotateRect"></div>
      <canvas id="c"></canvas>
    </div>

adding image:

var x = reader.readAsDataURL(file);
    reader.onload = function(e) {
      var data = this.result;
      fabric.Image.fromURL(data, function(img) {
        var oImg = img.set({
          transparentCorners: false,
          lockUniScaling: true,
          cornerColor: "#ef0d33"
        })
        oImg.scaleToHeight(250);
        oImg.scaleToWidth(250);
        canvas.centerObject(oImg);
        canvas.add(oImg).setActiveObject(oImg).renderAll();
        canvas.controlsAboveOverlay = true;
      });
    };

Canvas creation:

  var canvas = new fabric.Canvas('c');
  canvas.controlsAboveOverlay = true;
  var canvasWidth = 500;
  var canvasHeight = 500; 
  if(isComp){
    canvas.setHeight(500);
    canvas.setWidth(500);
  }
  else{
    canvas.setHeight(320); 
    canvas.setWidth(320);
    canvasWidth = 320;
    canvasHeight = 320;
  }

0 Answers