эквивалент Paper.js для setViewBox Рафаэля (увеличение/уменьшение при изменении окна)

Question

Я пытаюсь нарисовать те же элементы с paperjs на связке различных устройств в реальном времени (пути обмениваются через nodejs).

Проблема: смартфон в портретном режиме имеет очень ограниченную ширину экрана.

Я нашел эту скрипку Рафаэль:

http://jsfiddle.net/vnTQT/

изменение размера достигается в примере с

paper.setViewBox(0,0,w,h,true); 
paper.setSize('100%', '100%'); 

Такое поведение является именно то, что мне нужно. Проблема: я использую paper.js в настоящее время и не хочу полностью переписывать свой компонент.

Есть ли способ сделать то же самое с paper.js?

Answer 1

Я не знаю, как сделать то, что вы хотите, с paperjs. Я реализовал ряд проектов, которые пропорционально изменяются при изменении размера холста, но я делаю это: 1) указание размера и положения каждого элемента как доли размера экрана и 2) перерисовку холста на событие изменения размера.

Если я хочу круг, чтобы поместить в центре холста с диаметром 10% от наименьшего размера холста:

var pos = paper.view.bounds.center; 
var size = 0.1 * Math.min(
        paper.view.size.width, 
        paper.view.size.height 
       ); 

var circle = new paper.Path.Circle({ 
    center: pos, 
    radius: size/2, 
    strokeColor: 'black', 
    strokeWidth: 1 
}); 

Вы можете изменить strokeWidth, а также. И вам придется перебирать/перерисовывать его каждый раз при изменении размера холста.

Answer 2

Вы можете использовать paper.view.scale и перерисовать в событии изменения размера.

См http://paperjs.org/reference/view/#scale-scale