Paper.jsでレイヤーの細かい指定、グループ化をやってみる

最前面、最背面レイヤー

demo

Paper.js Sketch

code

var path = new Path.Circle(new Point(80,50),35);

var secondPath = new Path.Circle(new Point(120,50),35);

project.activeLayer.firstChild.fillColor = "red";
project.activeLayer.lastChild.fillColor = "blue";

Photoshopであるようにレイヤーはどんどん積み重なっていきます。最初のレイヤーをfirstChildで指定でき、これは最背面レイヤーに位置します。同様にlastChildは最前面レイヤーとなります。

レイヤーに名前をつける

demo

Paper.js Sketch

code

var path = new Path.Circle(new Point(80,50),35);

path.name = "example";

var children = project.activeLayer.children;

children["example"].fillColor = "red";

名前で呼び出すところは連想配列っぽい呼び方です。詳しくは調べてません笑。

レイヤーの数を取得する

demo

Paper.js Sketch

code

var circles = 20;
var angle = 360 / circles;

for(var i = 0;i < circles;i++){
    var center = new Point(400,400)
    var path = new Path.Circle(center,10);
    path.fillColor = "red";
    path.strokeColor = "black";
    
    //rotation
    path.rotate(angle * i,new Point(300,300));
}

var children = project.activeLayer.children;

for(var i = 0;i < children.length;i++){
    var child = children[i];
    
    //color
    child.fillColor.hue = Math.random() * 360;
}

予想はつくとは思いますが、lengthで取得しています。ドキュメントでは円を横に並べていましたが、円に並べてみました。

レイヤーグループ

demo

Paper.js Sketch

code

var path = new Path.Circle(new Point(80,50),35);

var secondPath = new Path.Circle(new Point(180,50),35);

project.activeLayer.fillColor = "red";

activeLayerすべてにスタイルを設定することで、レイヤーグループのようなもの?を作成しています。

レイヤーの分け方

demo

Paper.js Sketch

code

var path = new Path.Circle(new Point(80,50),35);
path.fillColor = "red";

var secondLayer = new Layer();
var secondPath = new Path.Circle(new Point(180,50),35);

secondPath.fillColor = "green";

「new Layer()」で新しくレイヤーを作成すると、secondLayerがactiveになるので、別レイヤーで扱われるようになります。

グループ化

new Group()

var path = new Path.Circle(new Point(80,50),35);
var secondPath = new Path.Circle(new Point(180,50),35);

var group = new Group([path,secondPath]);

group.style = {
    fillColor:"red",
    strokeColor:"black"
}

new Group()して引数にグループにしたいレイヤーを入れた配列を設定します。

addChild

var path = new Path.Circle(new Point(80,50),35);
var secondPath = new Path.Circle(new Point(180,50),35);

var group = new Group();

group.addChild(path);
group.addChild(secondPath);

group.style = {
    fillColor:"green",
    strokeColor:"black"
}

最初にgroupを作成してaddChildする方法もあります。

insertChild

var redPath = new Path.Circle(new Point(80,50),35);
redPath.fillColor = "red";

var greenPath = new Path.Circle(new Point(100,50),35);
greenPath.fillColor = "green";

project.activeLayer.insertChild(0,greenPath);

本来、greenPathのほうが後に作られているので、緑が上になります。しかしindexを指定して、insertChildするとgreenPathを下にすることができます。第二引数にはgroupも設定できることから、グループ化にも使えます。