☰

影像的放大部分

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。

相關內容