paper.js 的响应大小

Question

想知道创建响应式 canvas 尺寸的最佳方法是什么。目前我必须使用以下模式将所有代码加倍

var cicrle = new Path.Circle({ radius: 40, fillColor: 'red' })
circle.position = view.center

view.onResise = function(event){
circle.position = view.center
}

这对一个项目来说没问题，但是一旦项目开始加起来，代码就会加倍。

有没有更好的做事方式？

提前致谢

Answer 1

Paper.js有2种分组类：Group和Layer；如果您更新其中一个位置，您将同时更新其所有后代位置。
默认情况下，创建的项目被隐式添加到活动层（project.activeLayer）所以对于一个简单的场景：

project.activeLayer.position = view.center;

应该可以解决问题。

请参阅此 sketch 进行演示。

new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
});

new Path.Circle({
    center: view.center + 50,
    radius: 50,
    fillColor: 'orange'
});

function onResize() {
    project.activeLayer.position = view.center;
}

paper.js 的响应大小

Responsive sizing with paper.js

paperjs