セグメントを消す
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.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にスタイルを設定すれば、共通してそのスタイルを用いることができます。途中でスタイルを変更することも可能です。