Question

我知道这不是一个好习惯，但是我制作的页面大小几乎完全固定。

此外，还有许多JavaScript和交互部分处理光标等的坐标。

如果我想将所有内容增加一定的大小，则可以手动更改每个数字，以乘以或除以“ zoom”变量。但是，除了在使用带有查找和替换的正则表达式时非常耗时外，还有很多可能出错。

是否有一些CSS（或HTML或JavaScript）属性/函数可以让我扩展整个？我知道我可以在CSS中使用transform: scale(x)以及其他类似的东西，但是有没有办法可以缩放包括光标坐标在内的所有内容？

谢谢！

编辑：请参阅注释以获取更多信息。

$(document).ready(main);
function main(){

"use strict";

var popup = window;
var doc = document;
var $body = $('body', doc)[0];
var $inputs = doc.getElementsByClassName('note');
var $paragraphs = doc.getElementsByTagName('p');

doc.title = "Assignment Notebook";

$body.innerHTML = "<canvas></canvas>";

var images = {
  left : "https://i.imgur.com/xlnvl6M.png",
  right : "https://i.imgur.com/o8XT5X1.png"
}

var snapPoints = [62,84,106,128,150,172,194,216,238,261,283,305,327,349,371,393,415,438,462,484,506,528,550,572,594,616];

var inputs = {};

var d = new Date();
var week;
function setWeek() {
  week = [];
  for (var i = 1; i < 8; i++) {
    var _d = new Date(d);
    week[i-1] = new Date(_d.setDate(_d.getDate() - _d.getDay()+i));
  }
}
setWeek();
var months = {0: 'January',1: 'February',2: 'March',3: 'April',4: 'May',5: 'June',6: 'July',7: 'August',8: 'September',9: 'October',10: 'November',11: 'December'};
var df;
function updateFormat(n) {
  df = formatDate(week[n].getDay()-1, '');
}
function checkArr() {
  var start = left ? 0 : 3;
  var end = left ? 3 : 7;
  for (var i = start; i < end; i++) {
    updateFormat(i);
    if (!inputs[df]) {
      inputs[df] = [];
    } else if (JSON.stringify(inputs[df]) != "[]") {
      for (var j = 0; j < inputs[df].length; j++) {
        let data = inputs[df][j];
        createInput(data.x, data.y, data.fontFamily, data.fontSize, data.width, data.bg, data.txt);
      }
    }
  }
}
var left = (d.getDay() == 0 || d.getDay() > 3) ? false : true;
$body.style.backgroundImage = left ? "url("+images.left+")" : "url("+images.right+")";
$body.style.backgroundSize = "480px 680px";
$body.style.backgroundRepeat = "no-repeat";
$body.style.margin = "0";
checkArr();
var ctx = $('canvas', doc)[0].getContext('2d');
var fontFamily = 'sans-serif';
var fontSize = 14;
ctx.font = fontSize+' '+fontFamily;
function createP (text, family, weight, size, x, y) {
  var p = doc.createElement("P");
  p.setAttribute("type", "text");
  p.style.position = 'fixed';
  p.style.fontFamily = family;
  p.style.fontWeight = weight;
  p.innerHTML = text;
  p.style.top = y;
  p.style.left = x;
  p.style.fontSize = size;
  p.style.userSelect = 'none';
  $body.appendChild(p);
}
function formatDate(dayIndex, join) {
  if (dayIndex == -1) dayIndex = 6;
  return months[week[dayIndex].getMonth()]+join+week[dayIndex].getDate();
}
left ? (
  createP(formatDate(0, ' '), 'Helvetica', '300', '11px', '114px', '36px'),
  createP(formatDate(1, ' '), 'Helvetica', '300', '11px', '116px', '235px'),
  createP(formatDate(2, ' '), 'Helvetica', '300', '11px', '140px', '436px')
) : (
  createP(formatDate(3, ' '), 'Helvetica', '300', '11px', '126px', '36px'),
  createP(formatDate(4, ' '), 'Helvetica', '300', '11px', '102px', '235px'),
  createP(formatDate(5, ' '), 'Helvetica', '300', '11px', '72px', '436px'),
  createP(formatDate(6, ' '), 'Helvetica', '300', '11px', '276px', '436px')
);
function createInput(x, y, ff, fs, width, bg, txt) {
  fs = parseInt(fs);
  var input = doc.createElement("INPUT");
  input.setAttribute("type", "text");
  input.setAttribute("placeholder", "Type here!");
  input.style.position = 'fixed';
  input.classList.add('note');
  $body.appendChild(input);
  input.style.left = x;
  input.style.top = snap ? getClosest(y+fs)-fs : y;
  input = $inputs[$inputs.length-1];
  typeof txt != "string" ? input.focus() : input.value = txt;
  input.style.backgroundColor = bg;
  input.style.border = 'none';
  input.style.outline = 'none';
  input.style.width = width;
  input.style.fontFamily = ff;
  input.style.fontSize = fs;
  input.style.backgroundColor = bg;
  input.draggable = true;
  input.addEventListener('keyup', e => {
    ctx.font = window.getComputedStyle(input).getPropertyValue('font-size')+' '+window.getComputedStyle(input).getPropertyValue('font-family');
    e.path[0].style.width = !!e.path[0].value ? ctx.measureText(e.path[0].value).width+3 : 86;
  });
}

var diff = {
  x : null,
  y : null
}

doc.addEventListener('dragstart', e => {
  diff.x = e.clientX - parseInt(e.target.style.left);
  diff.y = e.clientY - parseInt(e.target.style.top);
});
doc.addEventListener('dragend', e => {
  let height = parseInt(window.getComputedStyle(e.target).getPropertyValue('font-size'));
  e.target.style.left = e.clientX-diff.x;
  e.target.style.top = snap ? getClosest(e.clientY-diff.y+height)-height : e.clientY-diff.y;
});

doc.addEventListener('keyup', e => {
  if (doc.activeElement.tagName != "INPUT" && e.keyCode == 37 || e.keyCode == 39) {
    var inpLen = $inputs.length;
    var pLen = $paragraphs.length;
    for (var i = 0; i < inpLen; i++) {
      $inputs[0].remove();
    }
    for (var i = 0; i < pLen; i++) {
      $paragraphs[0].remove();
    }
    if (e.keyCode == 37) {
      if (d.getDay() > 0 && d.getDay() < 4) {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()-3));
      } else {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()+1));
      }
    } else {
      if (d.getDay() > 0 && d.getDay() < 4) {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()+4));
      } else {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()+8));
      }
    }
    setWeek();
    left = (d.getDay() == 0 || d.getDay() > 3) ? false : true;
    $body.style.backgroundImage = left ? "url("+images.left+")" : "url("+images.right+")";
    left ? (
      createP(formatDate(0, ' '), 'Helvetica', '300', '11px', '114px', '36px'),
      createP(formatDate(1, ' '), 'Helvetica', '300', '11px', '116px', '235px'),
      createP(formatDate(2, ' '), 'Helvetica', '300', '11px', '140px', '436px')
    ) : (
      createP(formatDate(3, ' '), 'Helvetica', '300', '11px', '126px', '36px'),
      createP(formatDate(4, ' '), 'Helvetica', '300', '11px', '102px', '235px'),
      createP(formatDate(5, ' '), 'Helvetica', '300', '11px', '72px', '436px'),
      createP(formatDate(6, ' '), 'Helvetica', '300', '11px', '276px', '436px')
    );
    checkArr();
  }
});

doc.addEventListener('dblclick', e => {
  if (doc.activeElement.tagName != "INPUT" && !deleteMode) {
    createInput(e.clientX, parseInt(e.clientY)-9.5, fontFamily, fontSize, 86, "transparent", true);
  }
});
var snap = false;
var deleteMode = false;
function getClosest(n) {
  if (isNaN(n) || typeof n != 'number') err('Number isn\'t of type "number", or it is NaN');
  return snapPoints.reduce((a, b) => Math.abs(b - n) < Math.abs(a - n) ? b : a);
}

function err(error) {
  console.log(new Error(error));
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

一种解决方法是，您可以缩放整个文档，因为您已对整个页面进行了固定缩放，那就是将整个页面包含到一个iframe（https://www.w3schools.com/html/html_iframe.asp）中，该iframe可以跨越整个页面。这样一来，您就可以尝试使用iframe的缩放/缩放，但用户只会在iframe中看到该页面。

您可以使用iframe的CSS来获得显示内页的正确方法。

增加整个HTML页面的大小？

1 个答案: