자 바스 크 립 트 이미지 절단 효과(확대경)1/4 페이지

이전 버 전 은 이러한 효 과 를 처음 접 했 고 세 가지 큰 기능 을 함께 개발 하여 능력 에 한계 가 있 기 때문에 효 과 를 실현 하 는 것 만으로 완성 되 었 다.최근 에 저 는 그 중의 드래그 효과 와 크기 조정 효 과 를 따로 연구 하고 정리 와 보완 을 거 쳐 절단 효 과 를 넣 으 면 개인 적 으로 효과 가 좋 은 것 같 습 니 다.설명 하고 자 하 는 것 은 이것 은 하나의 효과 일 뿐 실제 절단 그림 이 아 닙 니 다.진정한 절단 그림 을 얻 으 려 면 사진 절단 시스템 을 참고 하 십시오.효과 미리보기 여기 보 세 요.전체 인 스 턴 스 다운로드코드 가 너무 많아 서 붙 일 수 없어 서 효과 도 를 줄 수 밖 에 없 었 다.프로그램 은 이 효 과 를 주로 세 부분 으로 나 누 었 다.층 의 드래그,층 의 확대,그림 절단(미리 보기 포함).그 중에서 층 의 드래그 앤 드 롭 과 층 의 크기 는 다른 두 편의 글 에서 상세 하 게 설명 되 었 습 니 다.여기 서 그림 이 이 부분 을 자 르 는 것 에 대해 말씀 드 리 겠 습 니 다.사진 절단 에 관 한 디자인 은 세 가지 방법 이 있다.그림 을 배경 그림 으로 설정 하고 배경 그림 의 위 치 를 설정 하여 실현 하지만 이런 단점 은 그림 의 정상 적 인 비례 에 따라 만 실현 되 고 유연성 이 부족 하 다 는 것 이다.그림 을 절단 대상 에 넣 고 그림 의 top 과 left 를 설정 하여 실현 합 니 다.이 방법 은 가능 하지만 아래 는 더욱 간단 한 방법 으로 이 루어 집 니 다.그림 을 설정 한 클립 을 통 해 이 루어 집 니 다.여기 서 방법 3 의 실현 방법 을 소개 합 니 다.이 방법 은 그 당시'소 중 히 간직 하 라'는 코드 에서 보 았 습 니 다.먼저 클립:클립 의 역할 은'검색 또는 설정 대상 의 시각 영역'입 니 다."시각 영역 밖의 부분 은 투명 합 니 다."상-우-하-왼쪽 순서에 따라 대상 의 왼쪽 상단 이(0,0)좌표 로 계 산 된 네 개의 오프셋 수 치 를 제공 하여 자 릅 니 다.예 를 들 어

div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); } 

position:absolute 의 설정 은 필수 입 니 다(매 뉴 얼 자세히 보기).구체 적 인 실현 원 리 를 말씀 드 리 겠 습 니 다.먼저 용기 가 필요 합 니 다(Container),용기 안에 세 개의 층 이 삽 입 됩 니 다:밑그림 층(layBase):그 반투명 그림;절단 층(layCropper):정상적으로 표 시 된 부분;제어 층(layHandle):디 스 플레이 를 제어 하 는 부분 입 니 다.그 중에서 밑그림 층 과 절단 층 은 프로그램 이 자동 으로 만 든 그림 이 고 제어 층 은 자신 이 정의 한 층(프로그램 에서 div)입 니 다.밑그림 층 과 절단 층 은 반드시 완전히 겹 쳐 야 한다.프로그램 에서 이 두 층 을 모두 왼쪽 상단 에 위치 시 켰 다.

this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0; 

중첩 순서 도 각 층 의 순 서 를 확보 해 야 한다.
1 2 3 4 다음 페이지 전문 을 읽다