Блог

Главная - Вопросы по программированию - Нарисуйте несколько прямоугольников с помощью svg.draw.js

Нарисуйте несколько прямоугольников с помощью svg.draw.js

#javascript #svg #svg.js

#javascript #svg #svg.js

Вопрос:

Проблема уже была опубликована здесь, но я думаю, что она никогда не решалась. Мне нужно создавать новый прямоугольник каждый раз, когда я нажимаю кнопку «Создать SVG прямоугольник». Следовательно, рисование нескольких прямоугольников.

 <!DOCTYPE html>
<html lang="en">
<head><style>#test_slide { width: 500px; height: 500px; cursor: crosshair;border: solid;}</style></head><body>
<div id="test_slide"></div>
<button id="create_svg_rect" >Create SVG Rect</button>

<!--SCRIPT FILES-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"  defer="defer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js" type="text/javascript" defer="defer"></script>
<script src="https://svgjs.dev/svg.draw.js/demo/svg.draw.min.js" type="text/javascript" defer="defer"></script>
<script>
document.getElementById("create_svg_rect").onclick = function() {
    //SVG.on(document, 'DOMContentLoaded', function() {
        var drawing = new SVG('test_slide').size('100%', '100%');
        var rect = drawing.rect().attr('stroke-width',1).attr('fill','none');
        drawing.on('mousedown', function(e){
            rect.draw(e);
        }, false);

        drawing.on('mouseup', function(e){
            rect.draw('stop', e);
            console.log(rect.svg());
            return;
        }, false);
    //});
        
};
</script>
</body></html>

Ответ №1:

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

Вместо этого просто создайте один рисунок ( <svg> ) и прикрепите к нему слушателей.

Щелчок по кнопке нужен только для создания нового прямоугольника.

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

Вот рабочий фрагмент:

 document.addEventListener('DOMContentLoaded',() => {

  let rect, drawing = new SVG('test_slide').size('100%', '100%');

  drawing.on('mousedown', function(e){
     rect amp;amp; rect.draw(e);
  });

  drawing.on('mouseup', function(e){
    if (rect) {
      rect.draw('stop', e);
      console.log(rect.svg());
      rect = null;
    } 
  });

  document.getElementById("create_svg_rect").addEventListener('click', function() {
    rect = drawing.rect().attr('stroke-width',1).attr('fill','none');
  });

})  
 #test_slide { width: 500px; height: 160px; cursor: crosshair;border: solid;}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js" type="text/javascript"></script>
<script src="https://svgjs.dev/svg.draw.js/demo/svg.draw.min.js" type="text/javascript"></script>

<div id="test_slide"></div>
<button id="create_svg_rect" >Create SVG Rect</button>

Поскольку ваш код не использовал jquery, я удалил его из фрагмента.