☰

Partes ampliadas da imagem

tag-icon • tag-icon windows image-editing
Partes ampliadas da imagem

Receio que esta seja uma questão muito limitada, mas mesmo assim aqui vai.

Existe alguma ferramenta (ou plugin para qualquer ferramenta) que me permita "aumentar o zoom" efetivamente em partes da imagem, como esta:

Mais Zoom

O que eu quero énãouma lupa na tela, mas sim uma ferramenta para me ajudar na criação de tais imagens. O que faço agora (no Paint.NET) é adicionar duas camadas com a mesma imagem, dimensionar a camada de fundo e cortar a área circular da camada de primeiro plano e depois mesclá-las.

Responder1

O SVG a seguir pode ser melhorado de várias maneiras, mas demonstra um ponto de partida.

<?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>

Notas:

  • definir largura e altura svg deve ser definido para o tamanho original * escala de fundo
  • a escala de transformação para o primeiro uso de #baseimage deve corresponder à escala escolhida
  • a segunda transformação deveria ter traduzida definida para posicionar a segunda cópia da imagem base sob o círculo, no código acima porque o círculo estava no centro do documento e a escala era 1 para a imagem base os valores são metade negativa da largura e metade da altura.
  • demonstração em jsfiddle:http://jsfiddle.net/pqzsa/

Possíveis melhorias incluem JavaScript para mover o círculo e alinhar automaticamente a imagem base ampliada sob o centro do círculo e posicioná-la ao clicar. O editor SVG pode ser usado para gerar um .png da visualização atual.

informação relacionada