画像のダイナミックをアプリのヘッダーで変換する

Question

こんにちは 私は四角い書式の画像を持っています。ビューの読み込み時に右の例のようにマスクしたいと思います。私はappceleratorで非常に新しいです、そして、私は進歩するための最良の方法が何であるか分からない、すべての異なった解決が支持であるかもしれないので。今はヘッダをビューとして持ち、次のフィードを別々のビューとして持っています。私たちは合金を使用していますが、もちろん古典的なコードを追加することもできます。

私は、開口部としての顔の部分を持っているとPNGのimgaeを作成する必要がありますか？ しかし、私は別の解決策でいくつかの問題を参照してください。

どのようなヒントも非常に高く評価されます。

Answer 1

あなたは、互いの上部にある2つのビューを置くことができ、次のいずれか

平方右側に並ぶ画像と1つずつborderRadius: half width/heightでそれの上に左に移動（円の中心は正方形の左の線にあります）。

それとも、SVGは、マスク作成に https://github.com/GeraudBourdin/Ti.SvgView/と、このスクリプト
https://github.com/falkolab/com.falkolab.maskedimage を使用することができ、彼らが正しく整列しない場合

更新：ここ

は、余分なプラグインなしで作業バージョンです：

インデックス.tss

"Window" : { 
    backgroundColor: "white" 
} 
"#view_bg" : { 
    right: 0, 
    width: 160, 
    height: 160, 
    backgroundImage: "/images/default.jpg", 
    top: -20 
} 
"#view_head" : { 
    width: 160, 
    height: 160, 
    backgroundImage: "/images/default.jpg", 
    top: -20 
} 
"#view_circle" : { 
    width: 80, 
    height: 80, 
    right: 40, 
    borderRadius: 40 
} 
"#view_box" : { 
    right: 0, 
    width: 80, 
    height: 80 
} 

INDEX.XML

<Alloy> 
    <Window> 

     <View id="view_box"> 
      <View id="view_bg"></View> 
     </View> 
     <View id="view_circle"> 
      <View id="view_head"></View> 
     </View> 

    </Window> 
</Alloy> 

変更view_bgと `view_head」トップ値切断ビュー内の画像を位置合わせする