Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Пропорциональное шкалирование объекта (https://javascript.ru/forum/events/1842-proporcionalnoe-shkalirovanie-obekta.html)

dust 24.09.2008 00:26

Пропорциональное шкалирование объекта
 
Неполучается попорционально уменьшить/увеличить объект вот код может подскажет кто в чём проблема ?

<html><head><title>Test</title>
<script type="text/javascript">
var flag = 1;
function Stop() {
flag = null;
}
function Mausklick (Ereignis) {
  if(flag != null) {
  if (!Ereignis)
    Ereignis = window.event;
  if (document.getElementById('sklalDiv')) {
    document.getElementById("test123").style.width  = Ereignis.clientX - document.getElementById('test123').offsetLeft + "px" ;
    document.getElementById("test123").style.height = Ereignis.clientY - document.getElementById('test123').offsetTop + "px" ;
	 document.getElementById("ausgabe").innerHTML = Ereignis.clientX + "px" + Ereignis.clientY + "px";
  } else if (document.all) {
    document.all.Springer.style.width = Ereignis.clientX;
    document.all.Springer.style.height = Ereignis.clientY;
  }
}
}

function ausfuehren () {
document.onmousemove = Mausklick;
flag = 1;
document.onmouseup = Stop;
}
</script>

</script>
</head><body>
<div style="position:absolute;"></div>
<div id="test123" style="background-color:#666;width:200px;height:200px;left:300px;top:100px;position:absolute;cursor:move;" >
<div id="sklalDiv" style="width:10px;height:10px;position:absolute;right:0px;bottom:0px;"><img src="status_rot.gif"  alt="" onmousedown="ausfuehren();" /></div>
</div>
<div id="ausgabe"></div>
</body></html>

dust 24.09.2008 01:20

Вот вроде получилось http://www.belprintmark.info/javascript/ , но остался один нюанс . Как мне сделать ,чтобы при нажатии на красный пункт(mousedown) мышка двигалась-бы вместе с красным пунктом а не отрывалавсь-бы от него.

ZoNT 24.09.2008 09:36

function Mausklick (e) {
  if(flag != null) {
  if (document.getElementById('sklalDiv')) {
    var d = document.getElementById("test123");
    d.style.width = e.clientX - d.offsetLeft + "px" ;
    d.style.height = e.clientY - d.offsetTop + "px" ;
    document.getElementById("ausgabe").innerHTML = e.clientX + "px" + e.clientY + "px";
  }
  }
}

function ausfuehren (e) {
  e = e||window.event;
  if (e.preventDefault) e.preventDefault();
  else e.returnValue = false;
  document.onmousemove = Mausklick;
  flag = 1;
  document.onmouseup = Stop;
}

<img src="status_rot.gif" alt="" onmousedown="ausfuehren(event);" />

dust 24.09.2008 15:52

Огромное спасибо за помощь :) !!
Но нужно пропорционально шкалировать объект , тоесть при движении
красного круга квадрат должен уменьшатся/увеличиватся ,но
при этом остоваться квадратом а не прямоугольником.

ZoNT 24.09.2008 17:19

что за слово "шкалировать"???
Есть вполне русское слово "масштабировать".
Ну так сохраняй пропорции. Пропорции по-моему в начальных классах по математике проходят...

dust 24.09.2008 23:18

Цитата:

Сообщение от ZoNT (Сообщение 6271)
что за слово "шкалировать"???
Есть вполне русское слово "масштабировать".

Сказывается жизнь вдали от родины.
А по существу пропорций изменил одну строку и всё заработало.

var koeffizient = 1;
....

d.style.height = e.clientX - d.offsetLeft + "px" ;
d.style.width = (parseInt(d.style.height) / koeffizient);
.......................


Часовой пояс GMT +3, время: 01:01.