我尝试为每种分辨率调整画布,所以我首先使用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/
现在我需要知道的帮助,如何捕获分辨率才能在浏览器中正确打开画布比例
编辑
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;
}
不是使用OR运算,而是使用AND运算,它对我来说非常完美这是您的修改后的代码
谢谢。 :)
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>