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

Олег

Лайки

  • Как эффективней отрисовывать много SVG графики?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    По скорости работы, быстрее будет canvas, но он по скорости разработки будет хуже. У меня никаких тормозов на vue+svg нет, по крайней мере, до 500 объектов на холсте. Для оптимизации могу посоветовать некоторые вещи:
    1) Используйте path вместо нескольких разных других фигур.
    2) Для сетки не создавайте кучу линий или фигур, просто используйте pattern. Вот пример из моего проекта (он на React JSX, но не суть)
    <pattern id={"bg-" + this.props.id} patternUnits="userSpaceOnUse" width="100" height="100">
    <rect width="100" height="100" fill={this.props.canvasColor}></rect>
    <g fill={this.props.canvasGridColor} style={{ fillOpacity: 0.34 }}>
        <rect width="100" height="1" y="20"></rect>
        <rect width="100" height="1" y="40"></rect>
        <rect width="100" height="1" y="60"></rect>
        <rect width="100" height="1" y="80"></rect>
        <rect width="1" height="100" x="20"></rect>
        <rect width="1" height="100" x="40"></rect>
        <rect width="1" height="100" x="60"></rect>
        <rect width="1" height="100" x="80"></rect>
    </g>
    <rect width="100" height="100" fill="none" strokeWidth="2" stroke={this.props.canvasGridColor}></rect>
</pattern>

    вот так заливаю на холст
    <rect style={{ 'fill': `url(#bg-${this.props.id}) #fff` }} ... />

    3) Задавайте для изменяемых объектов атрибут уникальный атрибут key
    4) Цельные объекты кидайте в группу, и на нее назначайте общие стили и позицию.
    UPD: простой пример на 1000 объектов (можно добавить, поменяв константу COUNT_OBJECTS) с drag&drop
    jsfiddle.net/Vlad_IT/81kegmxf
    UPD2: вот тот же пример, только с сеткой jsfiddle.net/Vlad_IT/qt64rouL/1 если делать сетку не заливкой, а элементами, будут ощутимые тормоза.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как запретить ввод отрицательных чисел?

    0xD34F
    @0xD34F Куратор тега Vue.js
    @input="onInput($event, product)"

    methods: {
  onInput(e, product) {
    product.quantity = Math.max(0, parseInt(e.target.value) || 0);
  },
},

    или

    watch: {
  products: {
    deep: true,
    handler() {
      this.products.forEach(n => n.quantity = Math.max(0, parseInt(n.quantity) || 0));
    },
  },
},
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать переход по ссылке с помощью слова?

    profesor08
    @profesor08 Куратор тега JavaScript
    Ну, тебе надо собирать все нажатия кнопок и записывать в строку. Потом проверять, если в получившейся строке есть нужное слово. Если есть, выполнять нужный код и очищай строку. Примерно это выглядит так:
    let word = `hello`;
let input = ``;
document.addEventListener("keyup", function(e) {
  input += e.key.toLowerCase();
  
  if (input.match(word)) {
  	alert("your code");
    input = ``;
  } 
});
    Ответ написан
    Комментировать
    Комментировать