Paper.js не будет изменять размер холста правильно

Я пробовал Paper.js для удовольствия, но, похоже, я уже застрял в самом начале.

Добавление resize="true" в тег canvas должно сделать элемент таким же высоким и широким, как и окно браузера. Однако это приводит к некоторому довольно странному поведению.

Я ожидал, что холст настроится на окно просмотра сразу после загрузки страницы, но это не так, поэтому я изначально думал, что он вообще не изменяет размер. Однако на самом деле это еще более странно: холст начинается с размера по умолчанию 300x150, и когда я изменяю размер окна просмотра, он растет - медленно, но неопределенно.

Для записи я попытался использовать data-paper-resize="true" или просто resize вместо этого, или с помощью Chrome вместо Firefox - все это безрезультатно.

Я не ожидаю ответа, если эта проблема вызвана какой-то необъяснимой странной настройкой на моем конце. Мне интересно, однако, если проблема распространена (или даже известна как вообще существующая) и имеет известные причины и решения.

Вот код, который я использую:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="paper-full.min.js"></script>
        <script type="text/paperscript" canvas="myCanvas">

            var path = new Path();
            path.strokeColor = 'black';
            path.moveTo(new Point(120, 120));
            path.lineTo(new Point(500, 500));

        </script>
    </head>
    <body>
        <canvas id="myCanvas" style="border: 1px dotted red;" resize="true"></canvas>
    </body>
</html>

Ответы

Ответ 1

Добавьте в свой проект следующий CSS:

<style type="text/css">
html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 100%;
}
</style>

Ответ 2

Я открыл для этого проблему на Github, и кажется, что это ошибка, введенная в 0.9.22. @Skalkaz указал мне на этот вопрос.

Вот проблема: https://github.com/paperjs/paper.js/issues/662.

Вы также можете понизить до 0.9.21 во время ожидания патча.

Ответ 3

Другой вариант - если вы используете заданные пропорции (относительно тела) - для переопределения вида бумаги:

var pageWidth = document.getElementsByTagName("BODY")[0].clientWidth
var pageHeight = document.getElementsByTagName("BODY")[0].clientHeight
view.size.width = pageWidth * myWidthScale
view.size.height = pageHeight * myHeightScale
center = new Point(width / 2, pageHeight / 2)
view.center = center