読者です 読者をやめる 読者になる 読者になる

not good but great

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

当たり判定をしてドラッグでアンカーポイントを動かす

Javascript Paper.js

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 - Paper.js

ドラッグでアンカーポイントを動かす

function onMouseDrag(event){
    if(hitResult){
        segment.point += event.delta;
        path.smooth();
    }
}

segment.pointはドラッグする時に最初にマウスダウンした時の座標となります。event.deltaはsegment.pointを基準点として、相対的にx,y座標方向にどれだけ動いたかを表しています。