☰

Увеличенные части изображения

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 должен соответствовать выбранному масштабу.
  • Второе преобразование должно иметь параметр translate, установленный для размещения второй копии базового изображения под кругом. В приведенном выше коде, поскольку круг находился в центре документа, а масштаб для базового изображения был равен 1, значения являются отрицательными и равны половине ширины и половине высоты.
  • демо на jsfiddle:http://jsfiddle.net/pqzsa/

Возможные улучшения включают JavaScript для перемещения круга и автоматического выравнивания увеличенного базового изображения под центром круга и позиционирования его по щелчку. Редактор svg может использоваться для вывода .png текущего вида.

Связанный контент