Сжатие элементов при попытке изменить размер \ повернуть изображение на ткани JS canvas - PullRequest
Новая
       13

Сжатие элементов при попытке изменить размер \ повернуть изображение на ткани JS canvas

0 голосов
/ 07 мая 2019

Попытка добавить сенсорную поддержку на полотно js canvas.На ПК он отлично работает с точками вокруг изображения, и я могу изменить размер \ повернуть его на мобильном телефоне, если я попытаюсь изменить размер \ повернуть двумя пальцами, изображение сжимается и становится очень маленьким.

Когда я иду вhttp://fabricjs.com/touch-events он работает просто отлично, но если я возьму этот код на свой веб-сайт, он не будет работать и будет работать так же, как и раньше.

Код холста: 

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

добавление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;
      });
    };

Создание холста: 

  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;
  }
...