캔버스를 사용하여 이미지에서 삼각형을 잘라냅니다 (예 : 열린 폴더가있는 iOS 배경)

Question

iOS 폴더 효과를 다시 만들고 싶습니다. 모든 것이 잘 작동하지만 상단 이미지에서 삼각형을 자르고 하단 이미지에서 삼각형을 남기는 더 좋은 방법을 찾아야합니다.

여기에 내가 현재 이미지를 오버레이 화살표를 .png를 사용하고

을 무슨 뜻인지 보여주기 위해 이미지,하지만 난 정말 100 % 현실적인되고 싶어요. http://webkit-os.pixelass.com/iframe

(웹킷 브라우저 만 ... 최고의 사파리 맥 OS X 또는 모바일 사파리가)

내가이 페이지를 발견 :

현재 여기 usig 내가 폴더 효과를 볼 수 있습니다 Cutting irregular shape on image

는 그리고이 바이올린 http://jsfiddle.net/CH6qB/6/

와 함께 놀았하지만 달성하기 위해 관리하는 모든했다 이. http://jsfiddle.net/pixelass/rWbNu/

나는 캔버스가 어떻게 작동하는지 이해하지 못하고 내가 원하는 방식으로 설명하는 것을 찾을 수 없었다. 누군가가 나를 도울 수 있다면 그것은 위대 할 것입니다. 나는 좋은 튜토리얼 또는 캔버스 설명 페이지에 대한 링크도 괜찮습니다. 아 .. 그리고 나는 자바 스크립트에 대해 정말로 모른다. jQuery에서 꽤 사악한 일을 할 수 있기 때문에 다소 jQuery와 같은 방식으로 진행할 수 있습니다.

나는 모든 종류의 도움을 드리겠습니다. 완벽하게 작동하는 간단한 바이올린을 만드는 것입니다. Thx를 미리

Answer 1

해결 방법 :

관심있는 사람에게. 동적 위치가있는 예를 추가했습니다. 또한이 접근 방식이 배경 화면 변경을 어떻게 반영하는지 보여줍니다 (이 예에서는 쿠키 지원). Newsstand-Folder는 App-Folders와는 다른 배경을 가지고 있습니다. 모든 것은 자동으로 발생합니다.

CSS 전환 및 애니메이션으로 모든 것이 이루어집니다. jQuery는 속성과 클래스를 변경하는 데에만 사용됩니다. 나는 여전히 완벽하게 행복하지는 않지만 나머지는 단점입니다. 이 제발 말해 내가이 .ZIP으로 데모를 업로드에 대해 아무도 관심이 경우 http://webkit-os.pixelass.com/foldertest/

:

여기 웹킷 브라우저에 대한 데모입니다.

Answer 2

나는 정말로 질문을 받겠지만, 아이폰에서 뭔가를 열면 작은 의사 요소 포인터를 가리키는 화살표가 무엇입니까? 그래서, 나는 그들이 수행하는 방법에 정말 빨리 바이올린 채찍질 경우

는 : http://jsfiddle.net/JXgk9/1/

그렇지 않은 경우, 당신이 찾고있는 정확하게 조금 더 설명하려고?