Fabric.js изменить размер холста, чтобы соответствовать экрану

В настоящее время я разрабатываю приложение на мобильном устройстве (Android и iPhone) с ионными и кордовыми. Я хотел бы отредактировать картинку. Для этого я использую библиотеку fabric.js. Fabric.js преобразует изображение и другие элементы в холст. Затем я добавляю изображение на холст (наклейки) и экспортирую его как изображение (dataURL). Таким образом, размер холста действительно важен, поскольку он является фактором качества (экспорт изображения на основе небольшого холста приведет к низкому качеству). Размер холста составляет около 607 * 1080 пикселей (в зависимости от устройства, снявшего фотографию). Я бы хотел поместить его на экран без потери качества (как описано ниже, я не могу изменять размер холста, не теряя качества).

Я пробовал 3 идеи, но никто не работал.

  1. Изменение размера холста : результат потери качества (изображение экспортировано будет иметь размер холста)
  2. Adapt viewport : cordova не позволяет изменять видовое окно на мобильном устройстве. Существует обходной путь, но он сломает мой дизайн (очень маленький навигатор, меньшее меню, …)
  3. Используйте свойства CSS3 для масштабирования : он работает как прелесть на рабочем столе, но на мобильном устройстве есть проблема с отображением событий (я не пробовал ios, но проблема возникла на веб-сайте Android). Отображение событий не масштабируется. Холст уменьшен, но невозможно взаимодействовать с элементами холста. Если элемент холста (наклейка) расположен по адресу x: 100 y: 100, когда я установил свойство масштабирования в 0.5, элемент будет находиться в позиции (50,50) и не больше (100 100). Есть ли способ исправить отображение событий в зависимости от свойства масштабирования веб-представления Android?

Я не знаю, есть ли другие способы сделать это, но я застрял в этой проблеме в течение 3 дней, и я потратил много времени на форумах, в файле fabricjs doc и google, и я не нашел никакого рабочего решения или Что-то еще, что может мне помочь.

EDIT: Ниже представлено 2 рабочих решения. Проверьте мой ответ, чтобы узнать, как это сделать с помощью css.

Solutions Collecting From Web of "Fabric.js изменить размер холста, чтобы соответствовать экрану"

1. С помощью css установите правильное разрешение для холста:

var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 600; 

CSS:

 /* media query 1 */ #canvas{ width: 400px; height: 250px; } /* media query 2 */ #canvas{ width: 200px; height: 120px; } 

плюсы:

Все разрешение задается шириной и высотой холста (800/600)

минусы:

Хорошо подходят для аспект ранга квадратного холста (1: 1), проблемы с выходом для странных пропорций, где вам нужно вычислить свою высоту css,

 original height / original width * new width = new height; 

Это из моей лиги в css …

Прочтите некоторое время назад в разделе вопросов fabric.js git, где технику (css resize) не рекомендуется из-за медлительности и неправильных транзакций объектов, это может быть изменено. Я знаю, что я тестировал, и объекты были некорректно изменены (случайные цветные пиксели, Транзакции тени остаются в холсте, другими словами беспорядок)

2. Измените размер вашего холста на точное измерение (разрешение), когда вам нужно отправить, а затем получить изображение, сгенерированное

Просто измените размер вашего холста при изменении размера окна (отзывчивый холст), и когда вам нужно экспортировать в точное измерение, вам нужно изменить размер вашего холста на точное разрешение пикселей или создать еще один холст.

Этот пример предназначен для холста с соотношением 1: 1 (вам нужно применить соотношение сторон к холсту и объектам внутри):

 $(window).resize(function (){ if (canvas.width != $(".container").width()) { var scaleMultiplier = $(".container").width() / canvas.width; var objects = canvas.getObjects(); for (var i in objects) { objects[i].scaleX = objects[i].scaleX * scaleMultiplier; objects[i].scaleY = objects[i].scaleY * scaleMultiplier; objects[i].left = objects[i].left * scaleMultiplier; objects[i].top = objects[i].top * scaleMultiplier; objects[i].setCoords(); } canvas.setWidth(canvas.getWidth() * scaleMultiplier); canvas.setHeight(canvas.getHeight() * scaleMultiplier); canvas.renderAll(); canvas.calcOffset(); } }); 

При представлении экспорта холста данные переформатировать холст в желаемое разрешение, вуаля:

 function GetCanvasAtResoution(newWidth) { if (canvas.width != newWidth) { var scaleMultiplier = newWidth / canvas.width; var objects = canvas.getObjects(); for (var i in objects) { objects[i].scaleX = objects[i].scaleX * scaleMultiplier; objects[i].scaleY = objects[i].scaleY * scaleMultiplier; objects[i].left = objects[i].left * scaleMultiplier; objects[i].top = objects[i].top * scaleMultiplier; objects[i].setCoords(); } canvas.setWidth(canvas.getWidth() * scaleMultiplier); canvas.setHeight(canvas.getHeight() * scaleMultiplier); canvas.renderAll(); canvas.calcOffset(); } return canvas.toDataURL(); } ); 

Это не большая проблема с рационами, отличными от 1: 1, вам нужно также вычислить масштабный мультиплеер для высоты, легко понять соотношение: http://andrew.hedges.name/experiments/aspect_ratio/

Я нашел трюк, чтобы сделать это, не копируя холст. Это решение действительно близко к объекту css, но события корректно обрабатываются.

Это пример отображения холста на половину его размера:

 -webkit-transform : scale(0.5); -webkit-transform-origin : 0 0;