突出显示放大区域

Question

我有一个处理 SVG 的项目。

用户可以放大和缩小图像。我想要整个图像的缩略图，显示并突出显示用户当前正在缩放的区域 in/out。

类似的东西http://www.ancientlives.org/transcribe

我试过 http://snapsvg.io/，但没有成功。

谁能帮忙解决图书馆的问题？

Answer 1

由于具体问题提到了 Snap，我会走那条路。

您可以克隆 svg 元素，然后在其上拖动一个矩形，或者我想知道您是否可以拖动一个实际上是剪辑或其他东西的矩形，这可能是一个稍微好一点的解决方案，但工作起来有点麻烦出门了，暂时先说第一种吧。

首先，我们可以加载图像..

Snap.load("Dreaming_Tux.svg", onLoad)

然后是主要的onLoad函数..

这通过克隆图像来实现（我也使用 toDefs() ，这不是必需的，但如果图像是一个大文件，您可以只使用一组元素中的一个，并在 'use' 方法。所以我暂时把它作为一个简单的例子。

我们还定义了一个viewBox，

var svg = s.svg(0,0,800,800,0,0,200,200);

这将是我们的 'window'

然后当我们拖动矩形时，我们使图像（放置在一个组中以便我们可以对其进行变换）移动。

您将需要调整拖动处理程序，使其完全工作（atm 它只会通过 dx、dy 拖动并每次重置），还需要调整缩放和 window 大小以及与什么的关系你想要，但它应该给出概念证明。

example（拖动矩形）



function onLoad( fragment ) {
        s.append( fragment );
        var tux = s.select('#tux');
        var clone = tux.clone();
        var svg = s.svg(0,0,800,800,0,0,200,200);
        var g = s.g( tux ).transform('t0,0').appendTo(svg);
        var defElement = svg.toDefs();

        var dragRect = s.rect(0,0,100,100).attr({ opacity: 0.2, transform: 't600,50', id: 'dragrect' }).drag( dragMove, dragStart );

        var tux1 = defElement.use().appendTo( s );
        var tux2 = clone.appendTo( s.g().transform('t600,50s0.5') );

        s.append( dragRect );
        function dragMove(dx,dy) {
                this.attr({
                    transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
                });
                g.transform('t' + -dx +',' + -dy);
        }

        function dragStart() {
                this.data('origTransform', this.transform().local );
        }       

};

突出显示放大区域

Highlight zoomed-in area

javascript

svg

snap.svg