Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

100.Изображения.js 5.8KB

3 лет назад
3 лет назад
3 лет назад
3 лет назад
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. function Изображения(события, виды, анимации, корень)
  2. {
  3. this.создать = function()
  4. {
  5. this.умолчание = {
  6. пр: [0, 0, 100, 100],
  7. угол: 0,
  8. };
  9. this.задано = {};
  10. this.элементы = {};
  11. события.подписать(this);
  12. };
  13. // Ключи и события.
  14. this.обработатьКлюч = function(ключ, путь, значение)
  15. {
  16. if (путь[0] == "изображения")
  17. {
  18. var имя = путь[1];
  19. var свойство = путь.slice(2).join(".");
  20. this.обновитьЭлемент(имя, свойство, значение);
  21. }
  22. };
  23. this.обработатьСобытие = function(событие)
  24. {
  25. let в = "виды/";
  26. let а = "анимации/";
  27. if (событие.startsWith(в))
  28. {
  29. let вид = событие.substring(в.length);
  30. this.обновитьЭлементыВида(вид);
  31. }
  32. else if (событие.startsWith(а))
  33. {
  34. let анимация = событие.substring(а.length);
  35. this.обновитьЭлементыАнимации(анимация);
  36. }
  37. };
  38. this.обновитьЭлементыАнимации = function(анимация)
  39. {
  40. for (let имя in this.задано)
  41. {
  42. let за = this.задано[имя];
  43. let зан = за["анимация"];
  44. if (зан && зан == анимация)
  45. {
  46. this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]);
  47. }
  48. }
  49. };
  50. this.обновитьЭлементыВида = function(вид)
  51. {
  52. for (let имя in this.задано)
  53. {
  54. let за = this.задано[имя];
  55. let заданныйВид = за["вид"];
  56. if (заданныйВид && заданныйВид == вид)
  57. {
  58. this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]);
  59. }
  60. }
  61. };
  62. // Без вида и анимации.
  63. this.обновитьПозициюРазмерЭлемента = function(имя, эл)
  64. {
  65. let пр = this.пр(имя);
  66. эл.style.left = `${пр[0]}px`;
  67. эл.style.top = `${пр[1]}px`;
  68. эл.style.width = `${пр[2]}px`;
  69. эл.style.height = `${пр[3]}px`;
  70. };
  71. this.пр = function(имя)
  72. {
  73. let за = this.задано[имя];
  74. let пр = this.умолчание.пр;
  75. return [
  76. за["пр.0"] ? за["пр.0"] : пр[0],
  77. за["пр.1"] ? за["пр.1"] : пр[1],
  78. за["пр.2"] ? за["пр.2"] : пр[2],
  79. за["пр.3"] ? за["пр.3"] : пр[3],
  80. ];
  81. };
  82. this.создатьИлиПолучитьЭлемент = function(имя)
  83. {
  84. var эл = this.элементы[имя];
  85. if (эл)
  86. {
  87. return эл;
  88. }
  89. var ум = this.умолчание;
  90. эл = document.createElement("div");
  91. эл.id = `изображения-${имя}`;
  92. эл.style.position = "absolute";
  93. эл.style.display = "block";
  94. // Свойства по умолчанию.
  95. this.обновитьПозициюРазмерЭлемента(имя, эл);
  96. эл.style.transform = `rotate(${ум.угол}rad)`;
  97. this.элементы[имя] = эл;
  98. корень.appendChild(эл);
  99. return эл;
  100. };
  101. // Вид и анимация.
  102. this.обновитьУгол = function(имя)
  103. {
  104. var за = this.задано[имя];
  105. var ум = this.умолчание;
  106. var эл = this.элементы[имя];
  107. var угол = за.угол ? за.угол : ум.угол;
  108. var transform = `rotate(${угол}deg) `;
  109. let вид = за["вид"];
  110. if (вид)
  111. {
  112. let виза = виды.задано[вид];
  113. if (виза && виза["transform"])
  114. {
  115. transform += виза["transform"];
  116. }
  117. }
  118. эл.style.transform = transform;
  119. };
  120. this.обновитьВидАнимацию = function(имя, вид, анимация)
  121. {
  122. var эл = this.создатьИлиПолучитьЭлемент(имя);
  123. if (вид)
  124. {
  125. let за = виды.задано[вид];
  126. for (let параметр in за)
  127. {
  128. эл.style.setProperty(параметр, за[параметр]);
  129. }
  130. }
  131. if (анимация)
  132. {
  133. анимации.запустить(анимация, эл);
  134. }
  135. this.обновитьУгол(имя);
  136. };
  137. this.обновитьЭлемент = function(имя, свойство, значение)
  138. {
  139. if (!this.задано[имя])
  140. {
  141. this.задано[имя] = {};
  142. }
  143. this.задано[имя][свойство] = значение;
  144. var за = this.задано[имя];
  145. var эл = this.создатьИлиПолучитьЭлемент(имя);
  146. if (свойство.startsWith("пр"))
  147. {
  148. this.обновитьПозициюРазмерЭлемента(имя, эл);
  149. }
  150. else if (
  151. (свойство == "угол") ||
  152. (свойство == "вид") ||
  153. (свойство == "анимация")
  154. ) {
  155. this.обновитьВидАнимацию(имя, за["вид"], за["анимация"]);
  156. }
  157. };
  158. // Конструктор.
  159. this.создать();
  160. }