demo
セグメントをドラッグで曲げることができます。
当たり判定をする
hitResult = project.hitTest(event.point,hitOptions);
hitTestを使えば、当たり判定が出来ます。これはおそらくprojectすべてのアイテムを対象にしています。
if(hitResult){ if(hitResult.type == "stroke"){ var location = hitResult.location; //セグメント追加 segment = path.insert(location.index + 1, event.point); path.smooth(); } }
typeに"stroke"を指定すればセグメントを指定できます。マウスダウンした位置にパスのアンカーポイントをinsertで追加しています。
options.type: Only hit test again a certain item type: {String('group', 'layer', 'path', 'compound-path', 'shape', 'raster', 'placed-symbol', 'point-text')}, etc.
たくさんセグメントがある場合はgroupとかlayerを指定できます。
Paper.js — Project
ドラッグでアンカーポイントを動かす
function onMouseDrag(event){ if(hitResult){ segment.point += event.delta; path.smooth(); } }
segment.pointはドラッグする時に最初にマウスダウンした時の座標となります。event.deltaはsegment.pointを基準点として、相対的にx,y座標方向にどれだけ動いたかを表しています。