18

黒い画像を多角形に変換する方法を見つけようとしています。

私が解決しようとしている問題は、次の 2 つのステップで構成されています。

  1. 画像を多角形に変換する
  2. 多角形をテキストで埋める

最初の一歩で悩んでいます。「コンバーター」が見つからないので、残っている唯一のアイデアは、画像をSVG形式に変換し（まだSVGでない場合）、ベクターデータを取得してCSSの中に貼り付けることですポリゴン形状 (Raphaël.js と同様)。

これが唯一のアプローチですか？

制約:

  • シェイプを構成する大量の div を作成したくありません。
  • このタスクに JavaScript を使用したくありません。
  • 形状が複雑な場合は、多角形でなければなりません。

以下は、私がやろうとしていることの例です (私は複雑なポリゴンにのみ興味があります)。

使用すべきアプローチの種類に関するヒントはありますか?

Adobe から取得した画像: http://adobe.github.com/web-platform/samples/css-exclusions/

4

1 に答える 1

4

ボックス マスキング用の画像、この記事の詳細、およびこのリンクのサンプルを使用できます( webkit サンプルのみ)

<style type="text/css">
.wrap {
  height:400px;
  width:800px;
  -webkit-mask-box-image:url('silhouette.png');
}
</style>
<div class="wrap">Large lipsum here...</div>

結果 ：

ここに画像の説明を入力

** 編集 **

モアークローズエッジテクス!!

http://html.adobe.com/webplatform/enable/の chrome または chrome canary セクションに移動する必要があります。次のような行があります。

シェイプ、領域、およびブレンド モードを有効にするには:

  • chrome://flags/#enable-experimental-web-platform-features をコピーしてアドレス バーに貼り付け、Enter キーを押します。
  • そのセクション内の「有効にする」リンクをクリックします。
  • ブラウザ ウィンドウの下部にある [今すぐ再起動] ボタンをクリックします。

注: 再起動する前に、複数の機能を有効にすることができます。

ここにドラゴンがいます!!

勇気があれば、実験的な機能を有効にすると、画像からの強力な形状のすべての恐怖に苦しむことになります! うわー:)

ここには、実験的な機能を有効にした場合にのみ機能するサンプル ペンがあります => http://codepen.io/anon/pen/yhIbE

すべてがうまくいった場合、後の段落にアヒルのシルエットとアヒルが表示される場合がありますが、すべてがカットまたはクリップされておらず、すべてのテキストが折り返されています ;)

ここに画像の説明を入力

それはすべて非常に実験的なものですが、この投稿で詳述されているすべての側面が W3C ドラフトに含まれているため、いつの日か、すべてのブラウザーでそのようなことができるようになるでしょう。

乾杯！

編集 ：

このテーマに関する素敵な記事を見つけました: http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html

于 2014-02-18T13:30:16.970 に答える