I trying adjust canvas for each resolution, so I first using css and put medias screens for each resolution.
@media screen and (min-width: 320px) {
#c { -webkit-transform : scale(0.38);
-webkit-transform-origin : 0 0; }
https://jsfiddle.net/qj3oyzs8/
It work for me, but all object not drag, resize or rotable properly. One solution is apply zoomOut and zoomIn, eg:
http://jsfiddle.net/Q3TMA/662/
Now I need help for know How capture resolution for open correctly canvas scale in the browser
EDIT
function screencan() {
var widthscrencan = (window.innerWidth > 0) ? window.innerWidth : screen.width;
/*
In if has to have the same scale the css
@media screen and (min-width: 320px) {
#c { -webkit-transform : scale(0.38);
-webkit-transform-origin : 0 0; }
}
*/
if(widthscrencan <= 360 ) {
// Zoom Out
function zoomOut() {
// TODO limit max cavas zoom out
canvasScale = canvasScale / SCALE_FACTOR;
canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));
var objects = canvas.getObjects();
for (var i in objects) {
var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY;
var left = objects[i].left;
var top = objects[i].top;
var tempScaleX = scaleX * (1 / SCALE_FACTOR);
var tempScaleY = scaleY * (1 / SCALE_FACTOR);
var tempLeft = left * (1 / SCALE_FACTOR);
var tempTop = top * (1 / SCALE_FACTOR);
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
}
}
}
window.onload = screencan;
It not work
Thanks for any help
Happy !!! I got it :D
The only problem is that for a new resizing the browser move. It will be necessary to refresh the page, because window.onload = zoomIn;
Solution! I removed queryes screen of the css and:
widthscrencan = (window.innerWidth > 0) ? window.innerWidth : screen.width; // capture width screen onload
canvasScale = 1; //global
if (widthscrencan <=360){
function zoomIn() {
var SCALE_FACTOR = .37;
canvasScale = canvasScale * SCALE_FACTOR;
canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
var objects = canvas.getObjects();
for (var i in objects) {
var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY;
var left = objects[i].left;
var top = objects[i].top;
var tempScaleX = scaleX * SCALE_FACTOR;
var tempScaleY = scaleY * SCALE_FACTOR;
var tempLeft = left * SCALE_FACTOR;
var tempTop = top * SCALE_FACTOR;
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
alert(widthscrencan+' function 360');
}
window.onload = zoomIn;
}
if ((widthscrencan >=361) || (widthscrencan ==768)){
function zoomIn768() {
var SCALE_FACTOR = .45;
canvasScale = canvasScale * SCALE_FACTOR;
canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
var objects = canvas.getObjects();
for (var i in objects) {
var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY;
var left = objects[i].left;
var top = objects[i].top;
var tempScaleX = scaleX * SCALE_FACTOR;
var tempScaleY = scaleY * SCALE_FACTOR;
var tempLeft = left * SCALE_FACTOR;
var tempTop = top * SCALE_FACTOR;
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
alert(widthscrencan+' function 768');
}
window.onload = zoomIn768;
}
if ((widthscrencan >=769) || (widthscrencan ==992)){
function zoomIn992() {
var SCALE_FACTOR = .5;
canvasScale = canvasScale * SCALE_FACTOR;
canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
var objects = canvas.getObjects();
for (var i in objects) {
var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY;
var left = objects[i].left;
var top = objects[i].top;
var tempScaleX = scaleX * SCALE_FACTOR;
var tempScaleY = scaleY * SCALE_FACTOR;
var tempLeft = left * SCALE_FACTOR;
var tempTop = top * SCALE_FACTOR;
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
alert(widthscrencan+' function 992');
}
window.onload = zoomIn992;
}
if ((widthscrencan >=993) || (widthscrencan ==1200)){
function zoomIn1200() {
var SCALE_FACTOR = .9;
canvasScale = canvasScale * SCALE_FACTOR;
canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
var objects = canvas.getObjects();
for (var i in objects) {
var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY;
var left = objects[i].left;
var top = objects[i].top;
var tempScaleX = scaleX * SCALE_FACTOR;
var tempScaleY = scaleY * SCALE_FACTOR;
var tempLeft = left * SCALE_FACTOR;
var tempTop = top * SCALE_FACTOR;
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
alert(widthscrencan+' function 1200');
}
window.onload = zoomIn1200;
}
if (widthscrencan >=1300){
function zoomIn1300() {
var SCALE_FACTOR = 1.01;
canvasScale = canvasScale * SCALE_FACTOR;
canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
var objects = canvas.getObjects();
for (var i in objects) {
var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY;
var left = objects[i].left;
var top = objects[i].top;
var tempScaleX = scaleX * SCALE_FACTOR;
var tempScaleY = scaleY * SCALE_FACTOR;
var tempLeft = left * SCALE_FACTOR;
var tempTop = top * SCALE_FACTOR;
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
alert(widthscrencan+' function 1300');
}
window.onload = zoomIn1300;
}
Instead Of Using OR operation I used AND Operation and it worked perfect for me
here is the modified code of yours
Thanks. :)
var canvas = new fabric.Canvas('c'); canvas.backgroundColor = "#Ffaafa"; var widthscrencan = (window.innerWidth > 0) ? window.innerWidth : screen.width; // capture width screen onload var canvasScale = 1; //global var SCALE_FACTOR = 1.2; window.onload = function () { var text = new fabric.Text('Text Here', { left: 100, top: 50 }); canvas.add(text); if (widthscrencan <=360){ zoomIn(); } else if ((widthscrencan >=361) && (widthscrencan <= 768)){ zoomIn768(); } else if ((widthscrencan >=769) && (widthscrencan <= 992)){ zoomIn992(); } else if ((widthscrencan >=993) && (widthscrencan <= 1200)){ zoomIn1200(); } else if (widthscrencan >=1300){ zoomIn1300(); } }; function zoomIn() { var SCALE_FACTOR = .37; canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * SCALE_FACTOR; var tempScaleY = scaleY * SCALE_FACTOR; var tempLeft = left * SCALE_FACTOR; var tempTop = top * SCALE_FACTOR; objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn'); } function zoomIn768() { var SCALE_FACTOR = .45; canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * SCALE_FACTOR; var tempScaleY = scaleY * SCALE_FACTOR; var tempLeft = left * SCALE_FACTOR; var tempTop = top * SCALE_FACTOR; objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn768'); } function zoomIn992() { var SCALE_FACTOR = .5; canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * SCALE_FACTOR; var tempScaleY = scaleY * SCALE_FACTOR; var tempLeft = left * SCALE_FACTOR; var tempTop = top * SCALE_FACTOR; objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn992'); } function zoomIn1200() { var SCALE_FACTOR = .9; canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * SCALE_FACTOR; var tempScaleY = scaleY * SCALE_FACTOR; var tempLeft = left * SCALE_FACTOR; var tempTop = top * SCALE_FACTOR; objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn1200'); } function zoomIn1300() { var SCALE_FACTOR = 1.01; canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * SCALE_FACTOR; var tempScaleY = scaleY * SCALE_FACTOR; var tempLeft = left * SCALE_FACTOR; var tempTop = top * SCALE_FACTOR; objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); alert('Display Area Width : '+widthscrencan+'px Function Called zoomIn1300'); }
<canvas id="c" width="800" height="550"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.