|
Сообщение от Taurus1195
|
|
alt="" coords="230,236, 231,236, 232,2........
|
Вы понимаете, что если вы хотите менять масштаб цветка, то нужно все эти сотни координат тоже менять?(если только не воспользоваться css transform: scale - что не кроссбраузерно)
Составьте матрицу координат, определяйте размер экрана в скрипте, опишите математически зависимости все эти и потом создавайте area с координатами, зависящими от разрешения ИМХО легче подготовить несколько "пачек" координат для разных разрешений, хотя если у вас супер с математикой, то труда не составит, хотя все довольно просто, отделить горизонтальные координаты от вертикальных и масштабировать отдельно, чем каждую точку высчитывать.
А еще лучше, оставить все как есть.
UPD
вот даже пример масштабирования таких координат без использования scale, он конечно требует доработки, а именно, координаты нужно еще смещать по оси, но однакож(на canvas для наглядности)
<!DOCTYPE html>
<html><head>
<meta charset = "utf-8" />
<script type = "text/javascript">
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var cnx = $("#canvas").getContext("2d");
function each(arr, cb){
for(var i = 0, il = arr.length; i < il; i ++){
if(i in arr){
arr[i] = cb.call(arr[i], i);
}
}
return arr;
}
var coords = [
150, 200,
140, 180,
130, 155,
120, 110,
130, 90,
140, 80,
150, 75,
160, 80,
170, 90,
180, 110,
170, 155,
160, 180,
150, 200
];
function drawLeap(c, crds){
c.clearRect(0, 0, c.canvas.width, c.canvas.height);
c.beginPath();
c.moveTo(crds[0],crds[1]);
for(var i = 2; i < crds.length; i+= 2){
c.lineTo(crds[i], crds[i+1]);
}
c.stroke();
c.closePath();
}
drawLeap(cnx, coords);
$("#plus").onclick = function(){
drawLeap(cnx, each(coords, function(){
return this * 1.1;
}));
}
$("#minus").onclick = function(){
drawLeap(cnx, each(coords, function(){
return this * 0.9;
}));
}
}
</script>
</head><body>
<div>
<h1>Масштабирование без scale</h1>
<canvas id = "#canvas" width = "300" height = "300"></canvas>
<button id = "#minus">-</button>
<button id = "#plus">+</button>
</div>
</body></html>
Если вы пришли не за готовым кодом в ответ на
|
Сообщение от Taurus1195
|
|
Вопрос: какой тег JavaScript куда подставить чтоб размер кнопки менялся пропорционально изменению разрешения экрана?
|
то, надеюсь, советы помогут, если не хотите делать сами, найдутся люди, кто не прочь заработать