Я знаю, что это плохая практика, но я сделал страницу с почти полностью фиксированным размером.
Кроме того, есть много JavaScript и интерактивных частей, связанных с координатами вашего курсора и т. д.
Если бы я хотел увеличить все на определенный размер, я мог бы вручную изменить каждое число на умножение или деление на переменную «масштабирования». Однако, помимо того, что при использовании регулярного выражения с поиском и заменой это занимает невероятно много времени, есть еще много вещей, которые могут пойти не так.
Есть ли какой-нибудь атрибут / функция CSS (или HTML или JavaScript), которые позволили бы мне увеличить масштаб весь? Я знаю, что могу использовать transform: scale(x) в CSS вместе с некоторыми другими подобными вещами, но есть ли способ масштабировать все, включая координаты курсора?
Спасибо!
Обновлено: см. Комментарии для получения дополнительной информации.
$(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.info(new Error(error));
}
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>В том-то и дело, что рабочего примера у меня нет. И это общая идея, поэтому ответ, который я ищу, будет работать с любой страницей.
По крайней мере, по мне, я не смогу вам помочь. Я не совсем понимаю, о чем вы спрашиваете. К тому же, когда вы упоминаете масштабирование координат курсора, для меня это не имеет смысла. Надеюсь, кто-то еще может вам помочь, но я почти уверен, что вам понадобится предоставить какую-то демонстрацию.
Сообщение отредактировано и включает демо.
Я понимаю, но слишком много символов, чтобы вставить его во фрагмент, а фрагменты / jsfiddle блокируют всплывающие окна (главная страница - это всплывающее окно)
Под вопросом: "I made a page with almost entirely fixed sizing.", а затем… В комментарии: "That's the thing, I don't have a working example." - Похоже, вы это делаете, но если нет ... сделайте один?
У меня есть демонстрация страницы, которая находится внизу сообщения. У меня просто нет рабочей демонстрации, использующей функцию, чтобы попытаться отрегулировать размер, кроме того, где я вручную все изменил, но это не имеет значения
Можете ли вы перенести свою демонстрацию на фрагмент кода, который предоставляет Stack Overflow?
Я не могу. there are too many characters to put it in a snippet, and snippets/jsfiddle block pop-ups (the main page is a popup)
Ах, вы пробовали удалить эти два изображения Base64? Просто рабочая демонстрация должна работать концептуально, чтобы другие могли быстрее понять / отладить. Будет лучше для их времени и для вашего, если вы ищете быстрое решение. Pastebin почти бесполезен, JSFiddle лучше, чем ничего, но рекомендуется использовать фрагмент кода, чтобы другие могли быстро скопировать / вставить ваш пример.
Дайте мне немного времени, чтобы удалить всплывающие окна, изображения использования локального хранилища и изображения base64, а затем я опубликую фрагмент
Хорошо, у меня нет времени, чтобы заставить фрагмент работать безупречно, но вроде как работает? Если вы используете тот же код внутри html-документа, он будет работать, это просто фрагмент. Но я надеюсь, что это дает вам представление.
По сути, когда вы дважды щелкаете мышью, создается элемент ввода там, где вы щелкнули (эта часть не работает с фрагментом, но вы поняли идею). Цель состоит в том, чтобы вводить данные именно там, где вы щелкнули, независимо от размера (который я бы изменил с помощью свойства css zoom в теле). Вы можете легко добиться этого, разделив координаты на масштаб, но в этом коде есть множество других факторов, которые зависят от координат, так есть ли другой способ сделать это?
Не особо актуально (?) Но ваша демонстрация показывает неправильный день / дату. Я в Мельбурне, Австралия, сейчас 12:07 пятницы, 29-го. В вашем демо указано четверг, 28 июня (и, похоже, больше ничего не делается)
@enhzflep да, это не актуально. @ Андрей, спасибо за пример. Почему вы решили использовать фиксированный размер? Кажется, что все внутри контейнера, который вы хотите изменить, должно быть em, что позволит вам изменить размер контейнера и автоматически повлиять на все остальное. Кроме того, почему вы не можете использовать zoom в контейнере?
Многие люди раньше решали проблему масштабирования с помощью SVGMatrix. Пример использования (в данном случае с масштабированным холстом) можно найти в ответе, предоставленном Phrogz, здесь: stackoverflow.com/questions/5526486/…
Я просто полностью не согласен с вашей реализацией использования фиксированных координат для событий мыши. В лучшем случае они должны быть относительными, но даже в этом случае они должны анализировать контейнер. Это был бы кошмар обслуживания, и мне было бы неудобно предлагать какие-либо другие предложения, прежде чем вы позаботитесь об этом. Обратите внимание, что пиксели на одном экране не эквивалентны на другом. Некоторые экраны / браузеры даже обрабатывают частичные пиксели, что может вызвать неожиданное поведение в зависимости от того, что вы, возможно, захотите сделать с помощью мыши.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Один обходной путь, который вы можете использовать для масштабирования всего документа, поскольку вы сделали фиксированное масштабирование всей страницы, - это включить всю страницу в iframe (https://www.w3schools.com/html/html_iframe.asp), который охватывает всю страницу. Таким образом, вы можете поиграть с масштабированием / масштабированием iframe, но пользователь увидит эту страницу только внутри iframe.
Вы можете поэкспериментировать с CSS iframe, чтобы получить правильный способ отображения внутренней страницы.
Спасибо! Это именно тот ответ, который я искал. И спасибо всем, кто помогал!
Вам нужно показать полностью рабочий пример.