☰

图像的某些部分被放大

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。

相关内容