问题描述
我尝试为每个分辨率调整画布,因此我首先使用css并为每个分辨率放置媒体屏幕。
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; }
它适用于我,但所有对象不能正确拖动,调整大小或可旋转。
一个解决方案是应用zoomOut和zoomIn,例如:
It work for me, but all object not drag, resize or rotable properly.One solution is apply zoomOut and zoomIn, eg:
现在我需要帮助知道如何捕获分辨率打开正确的画布缩放浏览器
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;
不起作用
帮助
推荐答案
快乐!我得到它:D
唯一的问题是,对于一个新的调整浏览器移动。有必要刷新页面,因为window.onload = zoomIn;
The only problem is that for a new resizing the browser move. It will be necessary to refresh the page, because window.onload = zoomIn;
解决方案!我删除了css和:
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;
}
这篇关于画布响应媒体屏幕最小宽度 - FabricJS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!