画像の任意の範囲をぼかしたい。
画像にお絵描きができるツールを開発しています。
画像の上をクリックするとパスが打てます。
パスを3点以上打った後に1点目をクリックするとパスが閉じます。
実装したい機能
パスが閉じた時点でパスの内側を選択範囲とし、範囲内をぼかす機能を実装したいです。
現状はパスを閉じても何も起きません。
実現できる方法がありましたら教えてください。
コードを大きく変更することもいとわないです。
難点
パスを打つ機能はPaper.jsで実装していますが、ぼかしをかける機能がPaper.jsには見当たりませんでした。
Paper.js
その他ぼかしをかける方法をいくつかネットで見つけましたが、いずれもセレクタを付与する必要がありました。
しかし、パスで囲った範囲内にセレクタを付与する方法が分かりません。
ソースコード
<script type="text/paperscript" canvas="cnv">
var raster = new Raster({
source: 'http://assets.paperjs.org/images/marilyn.jpg',
crossOrigin: 'anonymous',
position: view.center,
visible: false
})
raster.onLoad = function () {
this.canvas.getContext('2d')
this.drawImage(this.canvas, 0, 0)
this.visible = true
}
var hitOptions = Object.seal({
segments: true,
stroke: false,
fill: false,
tolerance: 10
});
var path = null;
function onMouseDown(e) {
var hitSeg = project.hitTest(e.point.clone(), hitOptions);
var isClose = path != null
&& path.segments.length > 2
&& hitSeg
&& hitSeg.type === 'segment'
&& hitSeg.item.firstSegment === hitSeg.segment;
if (isClose) {
path.closed = true;
path = null;
return false;
}
if (path == null) {
path = new Path();
path.selected = true;
path.add(e.point);
}
else {
path.add(e.point);
}
}
</script>