앱의 헤더에서 이미지 동적을 변환합니다.

Question

안녕하세요, 저는 정사각형 형식의 사진이 있습니다.보기를로드 할 때 오른쪽의 예와 같이 마스크를 사용하고 싶습니다. 나는 appcelerator에서 매우 새롭고 모든 다른 해결책이 지원이 될 수 있기 때문에 무엇이 최선의 방법인지 알지 못합니다. 현재 우리는 헤더를 뷰로, 다음 피드를 별도의 뷰로 유지합니다. 우리는 합금을 사용하고 있지만 물론 클래식 코드를 추가 할 수도 있습니다. 열린 부분으로 얼굴의 일부를 함께

은 내가 PNG의 imgae을 만들어야합니까? 하지만 다른 해결책으로는 몇 가지 문제가 있습니다.

모든 힌트는 대단히 감사하겠습니다.

Answer 1

하면 서로의 위에 두 뷰를 배치 할 수 중 하나를 그 위에 borderRadius: half width/height와 우측 하나에 정렬 된 이미지와 원점이 왼쪽으로 이동

(원의 중심이 정사각형의 왼쪽 선에 있음).

또는 당신은 SVG 마스크 만들 https://github.com/GeraudBourdin/Ti.SvgView/으로이 스크립트
https://github.com/falkolab/com.falkolab.maskedimage 를 사용할 수 있습니다 올바르게 정렬되지 않는 경우

업데이트 : 여기

는 여분의 플러그인없이 작동하는 버전입니다 :

index.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 '상단 값