Paper.jsでマウスのドラッグスピードに合わせて、線の太さが変わるように頑張ってみた

お絵かきツールをつくる

demo

マウスのドラッグで線を引けるようにしています。
Paper.js Sketch

var path;

function onMouseDown(e){
    path = new  Path({
        strokeColor:"black",
        strokeWidth:10
    });
}

function onMouseDrag(event) {
	path.add(event.point);
}

function onMouseUp(event) {
	path.simplify();
}

たったこれだけでできました。Paper.jsすごい。simplify()しているので、実際自分が引いた線とは微妙に違いますが

マウスを動かすスピードで線の太さを変える

demo

Paper.js Sketch

middlePoint、delta

・リファレンス
http://paperjs.org/tutorials/interaction/creating-mouse-tools/

tool.maxDistance = 10;

function onMouseDrag(event) {
	var circle = new Path.Circle({
		center: event.middlePoint,
		radius: event.delta.length / 2
	});
	circle.fillColor = 'black';
}

middlePoint
Paper.jsではパスを引く際にポイントを打ちます。イラストレーターで言うところのアンカーポイントです。この最後に打ったポイントとその一つ前のポイントまでの中間地点をmiddlePointとして定義しています。

delta
これは最後に打ったポイントとその一つ前のポイントまでの距離です。

・参考
http://paperjs.org/tutorials/interaction/mouse-tool-events/

なぜdeltaが線の太さを変えられるのか

早くマウスをドラッグすれば、その分だけdeltaは大きくなります。線の太さを細かいドットや四角で定義して、ドットの半径や四角の大きさをdeltaで定義すれば、線の太さを変えたように見えます笑。

線の幅の最大値はMaximum Distanceを使う

これの説明はリファレンスにあったのですが、英語でいまいちわかりませんでした。僕なりの解釈ですがMaximum Distanceはdeltaの最大値だと思っています。

四角で線を描く

demo

Paper.js Sketch

var rectangle,
    path,
    size = 0;

tool.maxDistance = 100;

function onMouseDrag(event) {
    size = event.delta.length / 2;
    rectangle = new Rectangle(
        new Point(event.middlePoint - size, event.middlePoint - size), 
        new Point(event.middlePoint + size,event.middlePoint + size)
    );
    path = new Path.Rectangle(rectangle);
    path.fillColor = '#555';
}