Raphaëlを使って画像を好きなかたちにトリミングする

ページの画像

写真をやなー、雲みたいなかたちで切り抜いてやなー、ふわふわと動かしたいねん!

みたいなことを言われたことないですか?

画像加工してPNGで配置すれば解決しますが、大抵のクライアントはそんな高度な画像加工はできません。
そこでRaphaëlを使って好きなかたちに画像をトリミングする方法を試してみました。

DEMO

AD

その1.Illustratorを使ってトリミングするかたちをつくる

trim1
まずIllustratorでトリミングしたいかたちの画像を作成します。
ポイント数が多くなると後ほど出力するSVGが重くなりますので、極力少ないポイントで書くように心がけたほうがいいでしょう。
layer
SVG出力はレイヤごとに違うオブジェクトとして出力されますので、かたち一つごとにレイヤに分けておきます。
(レイヤメニューの「サブレイヤーに分配」を使えば一気にバラバラのレイヤにできます)
axis
また、SVG出力の際はアートボードの左上を原点とし、座標が出力されます。
保存前にアートボードの左上にきっちり合わせて出力するようにしないと思ったかたちにならないので注意が必要です。

その2.SVGで出力

「名前を付けて保存」でSVGを選択すると、.svgというファイルで保存されます。
今回以下のようなSVGファイルが出力されました。

<g>というのが一つ一つのオブジェクトとなっています。
よく見るとpolygonだったりpathだったりellipseだったりと、少しずつタグが異なります。
これは後ほどRaphaëlで記述する際にも影響しますので、注意するようにしてください。

その3.トリミングしたいかたちの定義

まずRaphaëlのロードが必要です。

次に、Raphaelオブジェクトを定義します。
たとえばdiv#hogehoge内に出力したい場合は以下のようにID名を指定します。
widthとheightの指定も行います。

あとはこのpaperに対してSVG出力で得られた値を使い、多角形をつくっていきます。

pathの場合

SVG上でpathというタグで出力されたものはベジエ曲線です。
これはRaphaëlでもpathというメソッドで出力します。

Illustratorから出力されたコードは改行が入っていることが多いので、その改行やタブは削除してペーストしてください。

polygonの場合

SVG上でpolygonというタグで出力されたものはポリゴンです。
ベジエ曲線との違いは直線のみで構成されるという点です。

Illustratorから出力された場合、Raphaëlでそのまま使うことができません。一部置換して利用する必要があります。

circleの場合

SVG上でcircleというタグで出力されたものは円(正円)です。
これはRaphaëlでもcircleというメソッドで出力します。

X座標、Y座標、半径 の順で引数を渡します。

ellipseの場合

SVG上でellipseというタグで出力されたものは楕円です。
これはRaphaëlでもcircleというメソッドで出力します。

X座標、Y座標、X方向の半径、Y方向の半径 の順で引数を渡します。

transform属性が付いている場合

ひし形などが分かりやすい例ですが、Illustrator上で単純な四角を回転させたようなかたちの場合、transformという属性が付くことがあります。
これは文字通り変形させるという意味で、Raphaëlでも「transform」というメソッドで変形させる必要があります。

たとえば四角形を90度回転させてひし形にした場合、以下のようにtransformメソッドを追加します。

その4.オブジェクトの属性を指定

これでpaperというオブジェクトにかたちを定義することができましたので、このオブジェクトの塗り(fill)に画像を指定してトリミングを実現します。

DEMOのソースもよければ参考にしてみてください。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

コメントはまだありません。