Задать вопрос

LION_svg

Комментарии

  • Как по окончанию окрашивания всего SVG. остановить таймер на странице?

    @LION_svg Автор вопроса
    Артур, Прошу помощи.....плиз) реализовать до конца..
    нужно, как и писал - остановить игру если все fill не исходные(то есть поменяли цвет) и вывести алерт. думал может кнопку создать, при нажатии которой проверка пойдет?????
    код страницы с раскраской....
    <body>
	<div id="play_timer"></div>
	<div id="turtle_paint"></div>
	<div class="draw_box">
		<div class="part_box"></div>
		<div class="part_box">
			<div class="coloring">
				<div class="coloring-image">
					<svg id="svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="640px" version="1.1" viewBox="0 0 640 754">
						<path d="M353 659c0,0 -10,36 11,48 19,12 21,24 10,43 0,0 25,-29 3,-44 -19,-13 -16,-33 -10,-42 7,-9 -14,-5 -14,-5z" fill="#ffffff"
						/>
						<path d="M90 232c-11,3 -20,-3 -29,-17 0,0 11,25 28,25 0,0 1,-1 1,-1 2,-1 2,-4 0,-7z" fill="#ffffff" />
						<path d="M192 2c-100,-15 -183,87 -164,180 0,0 75,47 62,57 -16,12 -36,6 -22,22 12,14 43,30 82,36 41,-71 115,-120 201,-126 -7,-69 -41,-152 -159,-169zm-89 103c-8,22 -20,37 -28,34 -7,-3 -7,-24 1,-46 7,-21 20,-37 27,-34 8,4 8,24 0,46z"
						 fill="#ffffff" />
						<path d="M144 309c-33,-13 -55,-12 -59,-16 -11,-10 -27,-38 -55,-43 -2,6 -3,11 -3,17 -3,-2 -6,-1 -11,-1 -2,3 -2,12 -3,16 -3,-1 -7,-1 -12,-1 -4,42 18,65 22,70 8,9 23,21 52,9 13,-2 28,10 45,26 4,-28 12,-54 24,-77z"
						 fill="#ffffff" />
						<path d="M538 605c11,16 17,29 22,28 15,-2 44,-18 72,-6 -2,6 -4,11 -8,16 4,1 6,3 11,6 -1,4 -5,12 -7,16 3,1 7,3 11,6 -18,47 -79,69 -85,72 -19,8 -65,23 -73,-25 -3,-30 -13,-48 -28,-61 32,-11 61,-29 85,-52z"
						 fill="#ffffff" />
						<path d="M136 517c-23,6 -40,16 -44,12 -10,-11 -24,-41 -53,-48 -3,5 -4,10 -4,17 -4,-2 -7,-2 -12,-2 -2,3 -3,12 -4,17 -3,-1 -8,-2 -13,-2 -14,48 21,103 24,108 11,19 38,58 73,25 44,-47 84,-33 127,-11 3,1 5,2 7,2 -45,-27 -81,-69 -101,-118z"
						 fill="#ffffff" />
						<path d="M619 421c0,139 -113,251 -251,251 -2,0 -3,0 -5,0 1,-3 3,-6 4,-8 7,-9 -14,-5 -14,-5 0,0 -1,6 -2,13 -131,-9 -234,-118 -234,-251 0,-138 112,-250 251,-250 138,0 251,112 251,250zm-24 23c0,79 24,-22 0,0zm-6 1l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89zm-65 122l0 20c-4,0 90,-83 0,-20zm-141 73c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73zm184 -349c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26zm-189 -102c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11zm-188 100l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89zm46 33c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79zm-82 116c0,0 12,53 12,52l0 -45 -12 -7zm17 6c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39zm19 94l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3zm52 56c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27zm0 -193l68 39 67 -39 0 -79 -68 -39 -67 39 0 79zm206 122l0 -78 -68 -40 -68 39 0 79 68 39 68 -39 0 0zm-65 -122l68 39 67 -39 0 -79 -68 -39 -67 39 0 79 0 0zm221 13c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z"
						 fill="#ffffff" />
						<path d="M595 444c0,79 24,-22 0,0z" fill="#ffffff" />
						<path d="M589 445l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89z" fill="#ffffff" />
						<path d="M524 567l0 20c-4,0 90,-83 0,-20z" fill="#ffffff" />
						<path d="M383 640c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73z" fill="#ffffff" />
						<path d="M567 291c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26z" fill="#ffffff" />
						<path d="M378 189c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11z" fill="#ffffff" />
						<path d="M190 289l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89z" fill="#ffffff" />
						<path d="M236 322c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79z" fill="#ffffff" />
						<path d="M154 438c0,0 12,53 12,52l0 -45 -12 -7z" fill="#ffffff" />
						<path d="M171 444c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39z" fill="#ffffff" />
						<path d="M190 538l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3z" fill="#ffffff" />
						<path d="M242 594c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27z" fill="#ffffff" />
						<path d="M242,401 310,440 377,401 377,322 309,283 242,322z " fill="#ffffff" />
						<path d="M448,523 448,445 380,405 312,444 312,523 380,562 448,523z " fill="#ffffff" />
						<path d="M383,401 451,440 518,401 518,322 450,283 383,322 383,401z " fill="#ffffff" />
						<path d="M604 414c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z" fill="#ffffff" />
						<path d="M103 108c-7,22 -20,37 -28,34 -8,-4 -9,-24 -1,-47 0,-1 0,-1 1,-2 -7,21 -6,40 2,43 7,3 19,-9 26,-28z" fill="#ffffff"
						/>
						<path d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z" fill="#ffffff" />
						<path d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z" fill="#ffffff" />
					</svg>
				</div>
			</div>
      <div class="coloring-toolbox">
					<div class="palette">
					</div>
				</div>
		</div>
			<div class="part_box">
				<div class="part_icon">
					<input type="image" id="home" onmousedown="soundCryOnClick()" src="Icon/home.png" title="Вернуться на главную" onClick='location.href="index.html"'/>
            <input type="image" id="back_btn" onmousedown="soundCryOnClick()" src="Icon/back.png" title="Шаг назад"/>
            <input type="image" id="rev" onmousedown="soundCryOnClick()" src="Icon/revers.png" title="Начать заново" onClick='location.reload()'/>
          </div>
        </div>
    </div>
    <script src="timer.js"></script>
    <script src="svg.js"></script>
  </body>


    код JS - таймера и самого процесса рисования
    /*таймер игры*/
function timer(elem, min, sec) {
  (--sec < 0) && (sec = min-- ? 59 : 0);
  min = Math.max(min, 0);
  elem.innerHTML = min + ":" + sec;
  if (sec || min)
    setTimeout(timer.bind(0, elem, min, sec), 1000);
  else {
  alert( 'Время вышло!' ); 
  location.href = "/rekord.html";}
}

// ну и собственно пример вызова этого чуда
timer(document.getElementById('play_timer'), 3, 0);

const colors = [
  { color: '#ff0000', image: 'Pic/pencil_red.png' },
  { color: '#ffa500', image: 'Pic/pencil_orange.png' },
  { color: '#ffff00', image: 'Pic/pencil_yellow.png' },
  { color: '#008000', image: 'Pic/pencil_green.png' },
  { color: '#0000ff', image: 'Pic/pencil_blue.png' },
  { color: '#00008b', image: 'Pic/pencil_dark_blue.png' },
  { color: '#800080', image: 'Pic/pencil_purple.png' },
];
function renderColorPalette () {
  const paletteContainer = document.querySelector(".palette");
  const colorsItems = colors
  .map(n => `
    <button
      style="background-image: url(${n.image})"
      class="palette-button"
      data-color="${n.color}"
    ></button>`)
  .join('');
  paletteContainer.innerHTML = colorsItems;
}

function handleClickOnColor (event) {
  const button = event.target.closest(".palette-button");
  if (!button) return;
    const oldActiveButton = document.querySelector(".palette-button-active");
  if (oldActiveButton) {
    oldActiveButton.classList.remove("palette-button-active");
  }
  button.classList.add("palette-button-active");
}

function setEventsOnFilledElements () {
  function handleMouseEnter () {
    this.classList.add("selected");
  }
  function handleMouseLeave () {
    this.classList.remove("selected");
  }
  function handleClick () {
    const currentColor = document.querySelector(".palette-button-active");
    if (!currentColor) {
      alert("Цвет не выбран");
      return;
    }
    this.style.fill = currentColor.dataset.color;
  }
  const elements = document.querySelectorAll("*[fill]");
  elements.forEach(element => {
    element.addEventListener("mouseenter", handleMouseEnter);
    element.addEventListener("mouseleave", handleMouseLeave);
    element.addEventListener("click", handleClick);
  });
} 

document.addEventListener("DOMContentLoaded", renderColorPalette);
document.addEventListener("click", handleClickOnColor);
document.addEventListener("DOMContentLoaded", setEventsOnFilledElements);
    Написано

  • Как сделать так, если до окончании таймера пользователь перекрасил/закрасил все path в SVG картинке, остановить таймер и вывести ALERT?

    @LION_svg Автор вопроса
    Вадим, Буду очень признателен , да я уже понял это про сложность!
    Но доделать очень необходима!
    Написано

  • Как сделать так, если до окончании таймера пользователь перекрасил/закрасил все path в SVG картинке, остановить таймер и вывести ALERT?

    @LION_svg Автор вопроса
    Уважаемый Вадим.
    А можно конкретный код на мой пример. Повторюсь - я только начал общение с JS.
    Спасибо.
    Написано

  • Как переделать уже существующий пример код JS раскраски SVG. чтобы при клике на картинку карандаш (png), выбрался все тот же цвет и работало так же?

    @LION_svg Автор вопроса
    Вот блин, не так писал:
    .palette-button:hover,
    .palette-butto:active {
    ...
    a нужно, "-"
    спасибо!
    Написано

  • Как переделать уже существующий пример код JS раскраски SVG. чтобы при клике на картинку карандаш (png), выбрался все тот же цвет и работало так же?

    @LION_svg Автор вопроса
    только фон у кнопки пришлось еще дописать на прозрачный.
    Пользуясь случаем, может подскажите, не нашел решения пока.
    Как к этим же кнопкам через CSS применить следующее:
    .palette-button:hover, .palette-button:focus {
  filter: drop-shadow( 0px 5px 2px rgb(0, 0, 0));
  transform: scale(1.3);
}

    Нужно что бы при выбранном цвете, кнопка пока раскрашиваешь не изменялась в начальное положение (размер).
    облазил все и пробовал многое - но пока не получилось!
    Написано

  • Как по окончанию окрашивания всего SVG. остановить таймер на странице?

    @LION_svg Автор вопроса
    А вот сам таймер:
    unction timer(elem, min, sec) {
  (--sec < 0) && (sec = min-- ? 59 : 0);
  min = Math.max(min, 0);
  elem.innerHTML = min + ":" + sec;
  if (sec || min)
    setTimeout(timer.bind(0, elem, min, sec), 1000);
}
// ну и собственно пример вызова этого чуда
timer(document.getElementById('play_timer'), 5, 0);
    Написано

  • Как по окончанию окрашивания всего SVG. остановить таймер на странице?

    @LION_svg Автор вопроса 
    <body>
    <div id="play_timer"></div>
    <div id="turtle_paint"></div>
      <div class="draw_box">
        <div class="part_box"></div>
        <div class="part_box">
          <div class="svg_paint">
            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="276px" height="325px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 640 754" preserveAspectRatio="xMidYMid meet" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="turtle_all">
                <path class="fil0 str0" d="M353 659c0,0 -10,36 11,48 19,12 21,24 10,43 0,0 25,-29 3,-44 -19,-13 -16,-33 -10,-42 7,-9 -14,-5 -14,-5z"/>
                <path class="fil0 str0" d="M90 232c-11,3 -20,-3 -29,-17 0,0 11,25 28,25 0,0 1,-1 1,-1 2,-1 2,-4 0,-7z"/>
                <path class="fil0 str0" d="M192 2c-100,-15 -183,87 -164,180 0,0 75,47 62,57 -16,12 -36,6 -22,22 12,14 43,30 82,36 41,-71 115,-120 201,-126 -7,-69 -41,-152 -159,-169zm-89 103c-8,22 -20,37 -28,34 -7,-3 -7,-24 1,-46 7,-21 20,-37 27,-34 8,4 8,24 0,46z"/>
                <path class="fil0 str0" d="M144 309c-33,-13 -55,-12 -59,-16 -11,-10 -27,-38 -55,-43 -2,6 -3,11 -3,17 -3,-2 -6,-1 -11,-1 -2,3 -2,12 -3,16 -3,-1 -7,-1 -12,-1 -4,42 18,65 22,70 8,9 23,21 52,9 13,-2 28,10 45,26 4,-28 12,-54 24,-77z"/>
                <path class="fil0 str0" d="M538 605c11,16 17,29 22,28 15,-2 44,-18 72,-6 -2,6 -4,11 -8,16 4,1 6,3 11,6 -1,4 -5,12 -7,16 3,1 7,3 11,6 -18,47 -79,69 -85,72 -19,8 -65,23 -73,-25 -3,-30 -13,-48 -28,-61 32,-11 61,-29 85,-52z"/>
                <path class="fil0 str0" d="M136 517c-23,6 -40,16 -44,12 -10,-11 -24,-41 -53,-48 -3,5 -4,10 -4,17 -4,-2 -7,-2 -12,-2 -2,3 -3,12 -4,17 -3,-1 -8,-2 -13,-2 -14,48 21,103 24,108 11,19 38,58 73,25 44,-47 84,-33 127,-11 3,1 5,2 7,2 -45,-27 -81,-69 -101,-118z"/>
                <path class="fil0 str0" d="M619 421c0,139 -113,251 -251,251 -2,0 -3,0 -5,0 1,-3 3,-6 4,-8 7,-9 -14,-5 -14,-5 0,0 -1,6 -2,13 -131,-9 -234,-118 -234,-251 0,-138 112,-250 251,-250 138,0 251,112 251,250zm-24 23c0,79 24,-22 0,0zm-6 1l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89zm-65 122l0 20c-4,0 90,-83 0,-20zm-141 73c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73zm184 -349c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26zm-189 -102c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11zm-188 100l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89zm46 33c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79zm-82 116c0,0 12,53 12,52l0 -45 -12 -7zm17 6c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39zm19 94l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3zm52 56c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27zm0 -193l68 39 67 -39 0 -79 -68 -39 -67 39 0 79zm206 122l0 -78 -68 -40 -68 39 0 79 68 39 68 -39 0 0zm-65 -122l68 39 67 -39 0 -79 -68 -39 -67 39 0 79 0 0zm221 13c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z"/>
                <path class="fil0 str0" d="M595 444c0,79 24,-22 0,0z"/>
                <path class="fil0 str0" d="M589 445l-68 -40 -67 39 0 79 67 39c17,-10 33,-19 49,-28 6,-8 26,-50 19,-89z"/>
                <path class="fil0 str0" d="M524 567l0 20c-4,0 90,-83 0,-20z"/>
                <path class="fil0 str0" d="M383 640c-3,11 133,-37 135,-48l0 -25 -67 -39 -68 39 0 73z"/>
                <path class="fil0 str0" d="M567 291c-27,-41 -114,-90 -114,-90l0 77 68 39 46 -26z"/>
                <path class="fil0 str0" d="M378 189c-15,0 -62,9 -66,11l0 78 68 39 67 -39 0 -78c-1,-1 -62,-11 -69,-11z"/>
                <path class="fil0 str0" d="M190 289l49 28 67 -39 0 -78c-14,-7 -130,82 -116,89z"/>
                <path class="fil0 str0" d="M236 322c-5,-2 -49,-28 -49,-28 -22,35 -34,76 -34,120 0,23 -2,16 15,26l68 -39 0 -79z"/>
                <path class="fil0 str0" d="M154 438c0,0 12,53 12,52l0 -45 -12 -7z"/>
                <path class="fil0 str0" d="M171 444c0,91 4,81 68,118l68 -39 0 -78 -68 -40 -68 39z"/>
                <path class="fil0 str0" d="M190 538l0 0c11,18 46,52 46,52l0 -23 -44 -26c-1,-1 -2,-1 -2,-3z"/>
                <path class="fil0 str0" d="M242 594c-10,8 124,55 135,46l0 -73 -67 -39 -68 39 0 27z"/>
                <path class="fil0 str0" points="242,401 310,440 377,401 377,322 309,283 242,322 "/>
                <path class="fil0 str0" points="448,523 448,445 380,405 312,444 312,523 380,562 448,523 "/>
                <path class="fil0 str0" points="383,401 451,440 518,401 518,322 450,283 383,322 383,401 "/>
                <path class="fil0 str0" d="M604 414c0,-41 -34,-119 -34,-118l-46 26 0 79 68 39c15,-9 12,-3 12,-26z"/>
                <path class="fil1" d="M103 108c-7,22 -20,37 -28,34 -8,-4 -9,-24 -1,-47 0,-1 0,-1 1,-2 -7,21 -6,40 2,43 7,3 19,-9 26,-28z"/>
                <path class="fil0 str0" d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z"/>
                <path class="fil0 str0" d="M96 102c-4,10 -10,17 -13,16 -4,-2 -4,-11 0,-22 4,-10 9,-17 13,-16 4,2 4,11 0,22z"/>
              </g>
            </svg>
          </div>
        </div>
        <div class="part_box">
          <div id="paint" style="background-image: url(Pic/pencil_red.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_orange.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_yellow.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_green.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_blue.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_dark_blue.png)";></div>
          <div id="paint" style="background-image: url(Pic/pencil_purple.png)";></div>
        </div>
        <div class="part_box">
          <div class="part_icon">
            <input type="image" id="home" onmousedown="soundCryOnClick()" src="Icon/home.png" title="Вернуться на главную" onClick='location.href="index.html"'/>
            <input type="image" id="back" onmousedown="soundCryOnClick()" src="Icon/back.png" title="Шаг назад" onClick='location.href="#"'/>
            <input type="image" id="rev" onmousedown="soundCryOnClick()" src="Icon/revers.png" title="Начать заново" onClick='window.location.href=window.location.href'/>
          </div>
        </div>
      </div>
    <script src="script.js"></script>
    <script src="modal.js"></script>
  </body>
    Написано

  • Как по окончанию окрашивания всего SVG. остановить таймер на странице?

    @LION_svg Автор вопроса
    Не совсем то, но отчасти. Нужно так же завязаться с окончанием окраски всех path SVG, должна подгрузиться та же модалка с переходом на необходимый адрес!!
    Написано