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

Я пробовал 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>

источник

2015-03-06 vvye

Попробуйте разместить скрипты прямо перед закрытием тег –

попробовать после добавления OnResize кода связанные события как указано в этой ссылке. http://paperjs.org/tutorials/getting-started/working-with-paper-js/ –

Боюсь, ни одно предложение ничего не сделало. Я только заметил, однако, что холст действительно меняет свой размер, просто не так, как я ожидаю, - см. Обновленный вопрос. – vvye

Добавьте следующий 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>

источник

2015-03-17 15:31:10 user3337813

Похоже, что все! Интересно, почему этот CSS необходим, хотя (как и в том, что пользователь должен обрабатывать), и почему документы, похоже, не упоминают об этом. Кто-нибудь, кто хочет иметь полноразмерный холст в Paper.js, должен добавить эти стили вручную? – vvye

Мне нужна была полная ширина, поэтому 'canvas [resize] {width: 100%; высота: 600 пикселей; } 'сделал это для меня. Благодаря!!! (Я использую Paper.js 0.9.22) – Marcel

Использование переполнения: скрытый, скорее всего, приведет к проблемам позже. Установите холст для отображения: блок вместо этого, и вы можете удалить переполнение без получения полос прокрутки. –

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

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

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

источник

2015-03-23 15:42:43 ngryman

Ах, спасибо за это. :) Приятно знать, что я не единственный, у кого есть эта проблема. – vvye

После проблемы github это не будет исправлено, поэтому ожидание на патче не является жизнеспособной альтернативой. Подробности в этом вопросе, но автор считает, что размер холста - это задача CSS, а не бумажная задача. Я думаю, он прав. – bmacnaughton

Для будущих людей, сталкивающихся с той же проблемой - автор библиотеки знает, что это проблема, но у нее не было возможности обновить документацию, чтобы включить необходимость в CSS сейчас. –

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

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

источник

2017-04-04 22:32:31 SumNeuron

Я бы этого не делал, так как он будет работать только один раз, а не при изменении размера окна. он также связан с телом и не будет работать ни на одном другом элементе DOM. – Nathan

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

ответ

Смежные вопросы