Область рисования холста PaperJS только в левом верхнем углу, если не предпринято никаких внешних действий - PullRequest
Новая
       40

Область рисования холста PaperJS только в левом верхнем углу, если не предпринято никаких внешних действий

0 голосов
/ 08 ноября 2018

Я пытаюсь создать интерактивный инструмент SVG, который, я надеюсь, в конечном итоге сможет «точно отточить» SVG с помощью PaperJS.

Создание основы шло хорошо, но когда я загружаю свою страницу (открывая html-файл локально с привязкой paperscript-full.js), я могу заставить мышь следовать за курсором, но только в маленьком квадрате в левом верхнем углу окна. холст. Как только я использую инструмент проверки, я теперь свободен в использовании fly (то, что, как я предполагаю, основано на границе) - всей области холста.

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

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

1 Ответ

0 голосов
/ 08 ноября 2018

Проблема, с которой вы сталкиваетесь, когда событие мыши захватывается только в верхнем левом углу, связано с тем, что вы изменяете размер холста программно после установки Paper.js.
Поскольку вы используете PaperScript,Paper.js уже был настроен при запуске вашего кода.Есть как минимум 2 способа обойти это:

  • использовать JavaScript вместо PaperScript и сначала установить размер холста, затем связать Paper.js с холстом вручную, используя бумагу .setup () метод.
  • управление размером холста с помощью CSS (я выбрал этот способ в следующем решении).

Во второй части вашего вопроса ваш холст растет, когдаВы изменяете размер окна из-за атрибута canvas resize, который неявно установлен в true в вашем коде.
Цитирование из документации :

resize = "true":Делает объект холста таким же высоким и широким, как окно браузера, и изменяет его размер всякий раз, когда пользователь изменяет размер окна.Когда размер окна изменяется, размер вашего global.view также автоматически корректируется.

Существуют и другие улучшения, которые можно внести в ваш код, я непосредственно включил их в следующий пример: 

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
}


/* set canvas size and position with CSS */

main {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  width: 90vw;
  height: 90vh;
  border: 1px solid;
}

#opts {
  position: absolute;
  right: 10vw;
  bottom: 10vh;
}
<!-- dependencies -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- slider -->
<div id="opts">
  <input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" />
</div>

<!-- wrap canvas for easier vertical alignment -->
<main>
  <canvas id="canvas" resize></canvas>
</main>

<!-- paper.js code -->
<script type="text/paperscript" canvas="canvas">

    // image should be drawn using paper Raster
    var raster = new Raster({
        source: 'https://picjumbo.com/wp-content/uploads/vineyards-on-italian-coast-free-photo-DSC04256-1080x720.jpg',
        onLoad: function() {
            // position image at view center
            this.fitBounds(view.bounds.scale(0.5));
        }
    });

    // create circle
    var path = new Path.Circle({
        // here you can directly use paper view object
        center: view.center,
        radius: 10,
        // style can directly be set in constructor options
        strokeColor: 'red',
        strokeWidth: 3,
        // disable matrix application for easier scale control
        applyMatrix: false,
        // make stroke width independant from scale
        strokeScaling: false
    });

    // in paperscript context you can directly use named onMouseMove function
    function onMouseMove(event) {
        path.position = event.point;
    }

    // adapt path scale to slider value
    $('#tool').change(function(event) {
        path.scaling = this.value;
    });
</script>
...