Tela redimensionar tela para adaptarse a la pantalla

1. Utilice css para establecer su resolución correcta para el lienzo:

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

Pros

Toda la resolución está dada por el ancho y la altura de la lona (800/600)

contras:

Se adapta bien a la relación de aspecto de cuadros cuadrados (1: 1), problemas con la salida para las proporciones de aspecto extraño donde necesita calcular su altura css basado,

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

Esto es fuera de mi liga en css …

Leído hace algún tiempo en la sección de temas de fabric.js git donde, la técnica (css cambiar el tamaño) no se recomienda debido a la lentitud y las transacciones de objetos incorrectos, esto puede cambiarse Sé que probé y los objetos eran incorrectos de tamaño (píxeles de color aleatorio, Las sombras de las transacciones permanecen en lona, ​​en otras palabras un lío)

2. Re-tamaño de su lienzo a la dimensión exacta (resolución) cuando se necesita para enviar, y luego obtener la imagen generada

Simplemente vuelva a clasificar el tamaño de su lienzo en el re-tamaño de la ventana (lienzo responsivo) y cuando necesite exportar a la dimensión exacta necesita re tamaño de su lienzo para la resolución exacta de píxeles, o crear otro lienzo oculto.

Este ejemplo es para el lienzo de racionamiento 1: 1 (necesita aplicar relación de aspecto a lienzo y objetos dentro):

 $(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(); } }); 

Al enviar los datos de lienzo de exportación de tamaño de la lona a la resolución deseada, voila:

 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(); } ); 

No es un gran problema con las raciones diferentes entonces 1: 1 que necesita para calcular la escala multijugador de altura, así, fácil de entender relación: http://andrew.hedges.name/experiments/aspect_ratio/

He encontrado un truco para hacer eso sin tener que copiar el lienzo. Esta solución está muy cerca de la propiedad de zoom css, pero los eventos se manejan correctamente.

Este es un ejemplo para mostrar el lienzo de tamaño medio:

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