Paper.js 等同于 Raphael 的 setViewBox（在 Window 调整大小时缩放 in/out）

Question

我正在尝试在一堆不同的设备上实时使用 paperjs 绘制相同的元素（路径通过 nodejs 交换）。

问题：纵向模式下的智能手机屏幕宽度非常有限。

我为拉斐尔找到了这个 fiddle：

示例中的大小调整是通过

实现的

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

这种行为正是我所需要的。问题：我目前正在使用 paper.js，不想完全重写我的组件。

有什么方法可以对 paper.js 做同样的事情吗？

Answer 1

我不知道有什么方法可以用 paperjs 做你想做的事。我已经实施了一些项目，这些项目在调整 canvas 大小时按比例调整大小，但我这样做是通过 1) 将每个元素的大小和位置指定为屏幕大小的一部分，以及 2) 重绘 canvas 在调整大小事件上。

如果我想在 canvas 的中心放置一个直径为 canvas 最小尺寸的 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。每次调整 canvas 大小时，您都必须 ersase/redraw 它。

Answer 2

您可以在调整大小事件中使用 paper.view.scale 和重绘。

见http://paperjs.org/reference/view/#scale-scale

Paper.js 等同于 Raphael 的 setViewBox（在 Window 调整大小时缩放 in/out）

Paper.js equivalent for Raphael's setViewBox (Zooming in/out on Window Resize)

canvas

svg

resize

raphael

paperjs