Question

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

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

我找到了拉斐尔的小提琴：

使用

进行调整大小

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

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

有没有办法对paper.js做同样的事情？

Answer 1

我不知道如何用paperjs做你想做的事。我已经实现了一些在调整画布大小时按比例调整大小的项目，但我这样做：1）将每个元素的大小和位置指定为屏幕大小的一部分，2）在resize事件上重绘画布。

如果我想要一个圆圈放在画布的中心，直径为画布最小尺寸的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

Paper.js相当于Raphael的setViewBox（在Window Resize上放大/缩小）

2 个答案: