Fabric.js image clipTo не работает правильно на дисплеях мобильных телефонов и сетчатки

Question

Я создал небольшое приложение с использованием fabric.js и столкнулся с очень странной проблемой на мобильных устройствах. У меня есть путь, который я использую в функции image.clipTo для клипа на него. Он отлично работает на ПК, но и на мобильные путь дублируется и offsetted

Код для подрезки функции:

img.clipTo = function(ctx) { 
    this.setCoords(); 
    ctx.save(); 
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    part.render(ctx); 
    ctx.restore(); 
} 

Так вот как это выглядит на рабочем столе: Desktop

И это как он выглядит на мобильном эмуляторе с таким же разрешением (он выглядит аналогично на реальном мобильном устройстве): Mobile

Вы можете заметить, что небольшая дублика ted прямоугольник слева. Если я переместил изображение на этот прямоугольник, он отлично подойдет.

Вы также можете увидеть это в прямом эфире на brmk-case-editor.herokuapp.com. Для воспроизведения: нажмите на кнопку коллажа, выберите любой коллаж, а затем дважды щелкните на любой коллаж части

Answer 1

Проблема заключается в том, что мобильное устройство имеет устройство соотношение пикселей greather чем 1.

ткань использует его как хрустящая корочка.

, вызывающий ctx.setTransform(1, 0, 0, 1, 0, 0);, вы убиваете его, и ваш путь становится меньше в другом положении. и изображение полностью отсечено.

То, что вы должны сделать, это:

var retina = canvas.getRetinaScaling(); 
ctx.setTransform(retina, 0, 0, retina, 0, 0); 

это должно помочь.