2

Есть два "инструмента": при клике на line - выбирается инструмент линия, при клике на circle - выбирается инструмент окружность.

После этого пользователь, в зависимости от своего выбора, может нарисовать либо линию, либо окружность (нажать и удерживать ЛКМ, подвинуть мышь и отпустить)

Подскажите, пожалуйста, как это реализовать?

HTML (файл называется draw.html)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="draw.css">
  <title>Document</title>
</head>
<body>
  <div id="tools">
    <a id="lineTool" href="#">line</a>
    <a id="circleTool" href="#">circle</a>
  </div>
  <div id="drawing"></div>

  <script src="jquery-3.3.1.min.js"></script>
  <script src="svg.min.js"></script>
  <script src="draw.js"></script>
</body>
</html>

CSS (файл называется draw.css)

* {
  margin 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
}

#drawing {
  width: 100%;
  height: 100%;
}

JavaScript + SVG.js (файл называется draw.js)

SVG.on(document, 'DOMContentLoaded', function() {
  if (SVG.supported) {
    var draw = SVG('drawing');

    //код должен быть написан здесь

  } else {
    alert('SVG not supported');
  }
});

ссылка на SVG.js: официальный сайт

3
  • Извиняюсь за простой вопрос, если эта задача очень лёгкая. Я сегодня перед монитором уже 10 часов сижу, мозги уже не соображают)) Сразу уточню, что я просто изучаю программирование для себя. Надеюсь на вашу помощь)
    – Klimbo
    7 мар 2018 в 19:26
  • Нет, задача не такая уж и лёгкая для новичка. Тулбокс фотошопа онлайн. Нужно не только обрабатывать клик по смене инструмента, но и понимать в каком вы состоянии находитесь. Например, был ли уже первый клик для линии и нужно тянуть к курсору линию превью или ещё не был.
    – A K
    7 мар 2018 в 19:42
  • Для начала я планировал сделать такую последовательность: onMouseDown -> onMouseDrag -> onMouseUp. Получается нужно зажать и удерживать ЛКМ, а потом отпустить. В случае, когда пользователь отпустит ЛКМ, если расстояние от первоначального клика до места, в котором пользователь отпустил мышь, меньше, скажем, 15 пикселям - то просто можно удалить это линию или окружность.
    – Klimbo
    7 мар 2018 в 19:56

1 ответ 1

3

Если дать вам готовый код, то вам будет сложно разобраться без пояснений.

Тема, которую вы затронули называется "стейт машина" или "конечный автомат".

Вы можете попробовать написать код без стейт машины, тогда у вас будет запутанное приложение, в котором из одного события мыши будет вызываться неочевидная логика, куча условных выражений.

Почитайте статьи, со всеми этими типовыми примерами типа "турникет в метро", на которых часто объясняют КА, почертите переходы, они у вас не такие и сложные получатся.

И могу порекомендовать очень хорошее приложение, которое делали музыканту и блогеру Александру Зилкову подписчики его блога из числа программистов.

Структура приложения очень похожая. Есть канвас, есть некоторый тулбар, на котором располагаются кнопки, есть простая стейт-машина.

Если вы склонируете себе репозиторий - посмотрите тщательно каждый коммит, от самого первого, чтобы понять как развивалось и росло приложение, как внедрялись постепенно фичи и как была вставлена стейт-машина.

После этого пробуйте создавать своё приложение. Успехов!

1
  • Большое спасибо! Не знал, что это называется конечный автомат, теперь понятно в каком направлении искать информацию.
    – Klimbo
    8 мар 2018 в 5:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.