☰

확대된 이미지 부분

tag-icon • tag-icon windows image-editing
확대된 이미지 부분

질문이 너무 좁은 것 같지만, 그럼에도 불구하고 여기에 들어갑니다.

다음과 같이 이미지의 일부를 효과적으로 "확대"할 수 있는 도구(또는 도구에 대한 플러그인)가 있습니까?

확대

내가 원하는 것은~ 아니다화면 돋보기라기보다는 그러한 이미지를 만드는 데 도움이 되는 도구입니다. 지금(Paint.NET에서) 하는 일은 동일한 이미지가 있는 두 개의 레이어를 추가하고, 배경 레이어의 크기를 조정하고, 전경 레이어에서 원형 영역을 잘라낸 다음 함께 병합하는 것입니다.

답변1

다음 svg는 여러 가지 방법으로 개선될 수 있지만 시작점을 보여줍니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="323px">
    <defs>
        <image id="baseimage" xlink:href="https://i.stack.imgur.com/G4qab.jpg" width="100%" height="100%"/>  
        <circle id="zoom" cx="50%" cy="50%" r="100px" stroke="grey" stroke-width="4px" fill="none"/>
        <clipPath id="zoomclip">
            <use xlink:href="#zoom"/>
        </clipPath>
    </defs>
    <g alignment-baseline="baseline">
        <g>
            <use xlink:href="#baseimage" transform="scale(1)"/>  
        </g>
         <g clip-path="url(#zoomclip)">
             <use xlink:href="#baseimage"  transform="translate(-300 -162) scale(2)" />  
             <use xlink:href="#zoom"/>
         </g>
    </g>
</svg>

노트:

  • svg 너비와 높이를 원래 크기로 설정해야 함 * 배경 크기
  • #baseimage를 처음 사용할 때의 변환 스케일은 선택한 스케일과 일치해야 합니다.
  • 두 번째 변환은 원 아래에 기본 이미지의 두 번째 복사본을 배치하도록 설정된 변환을 가져야 합니다. 위 코드에서는 원이 문서의 중심에 있고 기본 이미지의 배율이 1이었기 때문에 값은 너비의 음수 절반과 높이의 절반입니다.
  • jsfiddle 데모:http://jsfiddle.net/pqzsa/

가능한 개선 사항에는 원을 이동하고 확대된 기본 이미지를 원 중심 아래에 자동으로 정렬하고 클릭 시 위치를 지정하는 JavaScript가 포함됩니다. svg 편집기를 사용하여 현재 보기의 .png를 출력할 수 있습니다.

관련 정보