fabricjs на сетчатке: новый объект прыгает влево

Question

Я продолжаю работу над инструментом совместной эскизы и пытаюсь добавить поддержку устройств сетчатки. В настоящее время я следующее поведение, если пользователь создает рисунок на Ipad воздухе: small movie

Вот мой код:

this.getZoomLevel = function (height) { 
      if (height > 1024) { 
       return 1024/height; 
      } else { 
       return height/1024; 
      } 
     }; 

this.calculateCanvasSize = function(pHeight, pWidth) { 
      var result = { 
       height: 0, 
       width: 0 
      }; 

      while (result.width < pWidth - 1 && result.height < pHeight - 1) { 
       result.height = result.height + 1; 
       result.width = result.height * 4/3; 
      } 
      return result; 
     }; 

this.initCanvas = function() { 
      try { 
       var parent = document.getElementsByClassName('komaso-canvas-container')[0]; 
       var canvasSize = this.calculateCanvasSize(parent.clientHeight, parent.clientWidth); 

       var canvasHtml = "<div id='wrapper-" + this.Id + "' class='whiteboard-canvas-wrapper' data-ng-show='CurrentPage.Id==" + this.Id + "'><canvas width='" + canvasSize.width + "' height='" + canvasSize.height + "' id='whiteboard-" + this.Id + "' class='whiteboard'><p>Your brower does not support Canvas/p></canvas></div>"; 
       $(parent).append($compile(canvasHtml)(scope)); 

       this.Canvaso = document.getElementById(this.HtmlId); 

       if (!this.Canvaso) { 
        console.log('Error: Cannot find the imageView canvas element!'); 
        return; 
       } 

       if (!this.Canvaso.getContext) { 
        console.log('Error: no canvas.getContext!'); 
        return; 
       } 

       this.FabricCanvas = new fabric.Canvas(this.HtmlId, { selectionColor: 'transparent' }); 

       this.FabricCanvas.setWidth(canvasSize.width); 
       this.FabricCanvas.setHeight(canvasSize.height); 

       fabric.Object.prototype.transparentCorners = false; 

       this.FabricCanvas.on('mouse:down', this.onMouseDown); 
       this.FabricCanvas.on('mouse:up', this.onMouseUp); 
       this.FabricCanvas.on('mouse:move', this.onMouseMove); 
       this.FabricCanvas.on('object:added', this.onObjectAdded); 
       this.FabricCanvas.on('text:editing:exited', self.onTextObjectEdited); 

       if (window.devicePixelRatio !== 1) { 

        var c = this.FabricCanvas.getElement(); 
        var w = c.width, h = c.height; 

        c.setAttribute('width', w * window.devicePixelRatio); 
        c.setAttribute('height', h * window.devicePixelRatio); 

        $(c).width(canvasSize.width); 
        $(c).height(canvasSize.height); 

        c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio); 
       } 

       this.FabricCanvas.setZoom(this.getZoomLevel(this.Canvaso.height)); 

       this.ToggleTool(self.CurrentTool.ToolName); 
       this.WhiteboardInitiated = true; 
      } catch (e) { 
       console.log(e); 
      } 
     }; 

getZoomLevel возвращает значение для передачи в метод SetZoom из ткани объекта холста расслоения плотных. Мы решили, что все аспекты холста клиента составляют 4: 3, а размер по умолчанию - 1024 * 768. Поэтому, основываясь на этих измерениях, мы вычисляем коэффициент масштабирования.

calculateCanvasSize - возвращает ширину и высоту для холста в соответствии с правилом 4: 3.

Если у вас есть какие-либо идеи, как исправить это неправильное поведение, разместите свой комментарий, пожалуйста. Заранее спасибо!

Answer 1

Я предлагаю вам обновить до версии с поддержкой сетчатки (grab 1.6.2).

Если по какой-либо причине вы не можете, я думаю, что проблема здесь:

if (window.devicePixelRatio !== 1) { 
    var c = this.FabricCanvas.getElement(); 
    ... 
    c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio); 
} 

getContext возвращает новый контекст. Это не тот контекст, в котором ткань будет отображаться позже. Если вы хотите, чтобы функция retina enabled lowerCanvas, вы должны масштабировать this.FabricCanvas.contextContainer, который создается и ссылается на функцию fabric.Canvas.

Я предлагаю вам в любом случае переключиться на новую ткань.