NSでの六角形の画像表示

このようなコンポーネントをNSで作成するにはどうすればよいですか？NSでの六角形の画像表示

私は六角外観を持つ画像コンポーネントを作成したいのですが、私はこの結果を得るために正しくnativescriptクラスを拡張するためにどのようにそれを把握傾けます。

2017-05-23 Leonardo Ferreira

clip-pathの場合はこれが最適です。これは、NativeScriptがそのままの状態でサポートするCSSプロパティです。

ビュー：

<ContentView width="150" height="150" class="someimage hexagon"></ContentView>

CSS：

.someimage { 
    background-image: url("~/assets/images/myimage.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 

.hexagon { 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
}

それとも、この例のように、画像に直接適用することができます：あなたはの外観を微調整することができます

<Image src="~/assets/images/myimage.jpg" class="hexagon"></Image>

この驚くべきツールを備えた六角形：http://bennettfeely.com/clippy/

出典

2017-05-23 15:01:05

ありがとうEddy！ –

「Image」に適用するのは、Androidがメモリ内の画像を処理する方法が非常に貧弱で、多くの画像に対してこの六角形の画像を使用する意図がある場合、OOM例外で自分自身が見つかるからです。 'Image'はこれらの場合{N}で最適化されています。 –

NSでの六角形の画像表示

答えて

関連する問題