5

Нужно сделать так, чтобы при клике по определённому блоку (100% на 100%, условно) на месте клика появлялась SVG точка.

2
  • "SVG точка" - это блок с svg внутри?
    – Cheg
    Commented 28 июл. 2017 в 18:49
  • @Cheg да, именно она
    – KEZOV
    Commented 28 июл. 2017 в 18:51

2 ответа 2

5

Добавлять элементы на место клика можно так:

var block = document.getElementById('block');
block.onclick = function(e) {
  var point = document.createElement('div');
  point.className = 'point';
  point.style.left = e.pageX + 'px';
  point.style.top = e.pageY + 'px';
  block.appendChild(point);
}
html,
body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  position: relative;
}

.block {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.block .point {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #000;
}
<div id="block" class="block"></div>

1
  • это всё хорошо, но нужно на vue
    – KEZOV
    Commented 29 июл. 2017 в 10:49
3

Для реализации потребуется создать как минимум дочерний компонент, например: svg-point.

Все точки из массива в родительском компоненте Vue перебираются через директиву v-for. В процессе перебора передаются необходимые данные компоненту svg-point.

В качестве входящих параметров у этого компонента могут служить координаты XY. Сам же компонент отвечает только за визуальное отображение. Все действия по созданию/изменению/удалению точек происходят в родительском компоненте.

При клике на родительский блок div необходимо проверять, не является ли элемент события click, унаследованным от SVGCircleElement, чтобы не размещать окружности друг над другом.

В примере ниже все это реализовано: создание/редактирование/удаление.

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false
Vue.config.devtools = false

const SvgPoint = {
  name: 'svg-point',
  props: {
    cx: Number,
    cy: Number
  },
  computed: {
    // Для простоты задаём все атрибуты
    // ч/з вычисляемое свойство.
    pointStyle() {
      // Определим локально для удобства.
      // Критерием цвета послужит значение по оси Y.
      const criteria = this.$props.cy;

      // Цвет по умолчанию.
      let stroke = 'rgb(178, 214, 60)';

      if (criteria > 300) {
        stroke = 'rgb(255, 121, 121)';
      } else if (criteria > 150) {
        stroke = 'rgb(241, 196, 15)'
      }

      return {
        'cx': this.$props.cx, // координата центра окружности по оси абсцисс
        'cy': this.$props.cy, // координата центра окружности по оси ординат
        'r': 1, // так как это точка, то радиус за единицу примем
        'stroke': stroke, // цвет
        'fill': 'transparent', // заливка роли не играет
        'stroke-width': 8, // ..... чтобы точку видно было
      }
    }
  },
  template: `<circle v-bind="pointStyle" />`
}

new Vue({
  el: '#app',
  // Локальная регистрация компонентов.
  components: {
    'svg-point': SvgPoint
  },
  data: {
    // Модель с точками. Добавим туда пару-тройку.
    points: [{
      cx: 23,
      cy: 223
    }, {
      cx: 118,
      cy: 280
    }, {
      cx: 248,
      cy: 306.125
    }, {
      cx: 341,
      cy: 261.125
    }, {
      cx: 443,
      cy: 144.125
    }, {
      cx: 508,
      cy: 26.125
    }]
  },
  methods: {
    // Обработка клика.
    clickHandler(event) {
      // event.stopPropagation();

      // Определим локально для удобства
      // целевой объект клика.
      const target = event.target;

      // Если элемент, по которому кликнули - это точка:
      if (this.isCircle(target)) {
        // Отправляем на редактирование.
        // Индекс точки, взятый из атрибута `data-index`.
        return this.edit(target.dataset.index);
      }

      // Для подсчета координат точки.
      // Метод getBoundingClientRect() возвращает размер элемента и его позицию относительно `viewport`.
      // rectangle.left - слева; rectangle.top - сверху.
      // clientX - горизонтальная координата в пределах клиентской области приложения.
      // clientY - вертикальная координата в пределах клиентской области приложения.
      const rectangle = target.getBoundingClientRect();

      // Сохраняем точку.
      this.save({
        cx: event.clientX - rectangle.left,
        cy: event.clientY - rectangle.top
      })
    },

    // Обработка правого клика.
    removeHandler(event) {
      // event.stopPropagation();

      // Определим локально для удобства.
      const target = event.target;

      // Если элемент, по которому кликнули - это точка:
      if (this.isCircle(target) && confirm('Удалить точку?')) {
        // Отправляем на удаление.
        // Индекс точки, взятый из атрибута `data-index`.
        return this.remove(target.dataset.index);
      }

      alert('Выберите точку для удаления!')
    },

    // Сохранение точки. Просто добавляем в массив точек.
    save(data) {
      this.points.push({
        cx: data.cx,
        cy: data.cy
      })
    },

    // Редактирование координат точки.
    edit(index) {
      // Найдем интересующую нас точку просто
      // по индексу из массива точек.
      const point = this.points[index];

      const data = {
        // Сам в шоке, но почему бы и нет.
        cx: prompt('Укажите новую координату по оси абсцисс (x):', point.cx),
        cy: prompt('Укажите новую координату по оси ординат (y):', point.cy)
      }

      if (data.cx && data.cy) {
        // Отправляем на обновление.
        this.update(index, {
          // При ошибках в [0;0] отправляем.
          cx: parseFloat(data.cx),
          cy: parseFloat(data.cy)
        })
      }
    },

    // Обновление координат точки.
    update(index, data) {
      this.points.splice(index, 1, data);

      alert('Обновление точки');
    },

    // Удаление точки.
    remove(index) {
      this.points.splice(index, 1);

      alert('Удаление точки');
    },

    // Проверка объекта по принадлежности к классу.
    isCircle(element) {
      return element instanceof SVGCircleElement;
    },

    // Экспорт в `.csv` файл. Без комментариев.
    exportToCsv(event) {
      let content = [];

      this.points.map(function(row) {
        content.push(Object.values(row).join(';'));
      })

      // Заголовок и содержимое будущего файла.
      let csvContent = Object.keys(this.points[0]).join(';');
      csvContent += "\r\n" + content.join("\r\n");

      let url = URL.createObjectURL(
        new Blob([csvContent], {
          type: 'text/csv;charset=utf-8;'
        })
      );

      event.target.setAttribute('href', url);
      event.target.setAttribute('download', '699135.csv');
    }
  }
});
*,
*::after,
*::before {
  box-sizing: border-box;
}

.points__boxs {
  margin: 0 auto;
  width: 600px;
  height: 400px;
  outline: 1px solid #08c;
}

.points__container {
  width: 100%;
  height: 100%;
}

circle:hover {
  r: 12px;
}
<div id="app">
  <h1>Точкосоздаватель</h1>
  <ul>
    <li>ЛКМ - создание/редактирование точки.</li>
    <li>ПКМ - удаление точки.</li>
    <li>Экспорт файла <i>.*csv</i> по <a href="#" @click="exportToCsv">ссылке</a>.</li>
  </ul>

  <div class="points">
    <!--
      Клик привязываем к контейнеру, содержащему SVG с группой точек.
    -->
    <div class="points__boxs" @click="clickHandler" @contextmenu.prevent="removeHandler">
      <!--
        Не задаем атрибут `viewBox`
        для корректного вычисления координат.
        НО обязательно растягиваем SVG элемент
        на всю ширину и высоту родительского контейнера.
      -->
      <svg class="points__container" xmlns="http://www.w3.org/2000/svg">
        <g>
          <template v-for="(point, index) in points">
            <svg-point v-bind="point" :data-index="index"></svg-point>
          </template>
        </g>
      </svg>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


Дополнительно создан экспорт SVG точек в файл формата *.csv - разделителем служат ;.

3
  • отличный, развернутый ответ. С удовольствием читаю ваши ответы. Развернутые комментарии их делают более ценными. На мой взгляд, я заменил бы формулировку Экспорт по этой ссылке на Экспорт файла .*csv по ссылке.. Commented 22 июн. 2019 в 6:23
  • @Alexandr_TT, спасибо. Меняйте, если считаете нужным, всегда ведь можно откатить, обсудить. Тут в ответе баг, уже не разбирался координаты неверные: X всегда целое, Y всегда с *.125.
    – user256824
    Commented 22 июн. 2019 в 6:28
  • @ Рустам Гимранов вы не обижайтесь, что я немного поменял авторский стиль "бахать" :-) я не сторонник менять авторские ответы. В этом случае сделал это незначительное изменение, чтобы поднять вверх ваш полезный ответ. для более полной положительной оценки плюсиками :-) Commented 22 июн. 2019 в 6:37

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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