not good but great

プログラミング、アート、映画・本の感想について書きます。

Paper.jsでセグメントを消す、色やスタイルの設定をする

セグメントを消す

demo


code

    var circle = new Path.Circle(new Point(100,70),50);
    circle.strokeColor = "black";
    circle.selected = true;
    
    //左
    circle.removeSegment(0);
    //上
    //circle.removeSegment(1);
    //右
    //circle.removeSegment(2);
    //下
    //circle.removeSegment(3);
    
    //全部消す
    //circle.remove();

円を作った後にremoveSegmentをすると、指定したポイントとそれを繋ぐ線(セグメント)が消去されます。Illustratorみたいな操作ができます。

Color,Styleを設定


jsFiddleに用意されているpaper.jsのバージョンが古かったので、新しいバージョンを以下のページから探しました。
・参考
paper.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
http://paperjs.org/tutorials/paths/using-color-and-style/

引数にオブジェクトを設定

var myPath = new Path({
	segments: [[40, 115], [80, 180], [200, 20]],
	selected: true
});

Pathの引数にオブジェクトを設定すると、綺麗に描くことができます。Pointを一つずつ設定するやり方もありますが、segmentsの値に配列を設定すれば、複数の点も楽に記述できます。

線の太さ

myPath.strokeWidth = 10;

Canvasにおいての線の太さを変えるときと書き方が同じですね。

線の先端のスタイル

myPath.strokeCap = 'round';

線の先端を丸くしたりできます。

結合部分のスタイル

myPath.strokeJoin = 'round';

これも先端と同様に丸くしたりできます。

点線

myPath.dashArray = [10, 12];

「点の幅、点の間隔」の順に定義します。

currentStyleの設定

  path3.dashArray = [5,30];
    
    //style
    project.currentStyle = {
        strokeColor:"#555",
        fillColor:"#FF9640",
        strokeWidth:3
    };
    
    var firstPath = new Path.Circle({
        center:[300,300],
        radius:50
    });
    
    project.currentStyle.strokeWidth = 10;
    project.currentStyle.fillColor = "#67E667";
    
    var secondPath = new Path.Circle({
        center:[450,300],
        radius:50
    });

project.currentStyleにスタイルを設定すれば、共通してそのスタイルを用いることができます。途中でスタイルを変更することも可能です。