我尝试为每个分辨率调整画布,所以我首先使用 css 并为每个分辨率放置媒体屏幕。
@media screen and (min-width: 320px) {
#c { -webkit-transform : scale(0.38);
-webkit-transform-origin : 0 0; }
https://jsfiddle.net/qj3oyzs8/
它对我有用,但所有对象都不能正确拖动、调整大小或旋转。
一种解决方案是应用 ZoomOut 和 ZoomIn,例如:
http://jsfiddle.net/Q3TMA/662/
现在我需要帮助了解如何捕获分辨率以在浏览器中正确打开画布比例
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;
解决方案!我删除了 css 的查询屏幕并且:
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;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)