Question

我有一个操纵SVG的项目。

用户可以放大和缩小图像。我希望有一个整个图像的缩略图，显示和突出显示用户当前放大/缩小的区域。

沿着这些方向行事http://www.ancientlives.org/transcribe

我尝试过使用http://snapsvg.io/但没有成功。

任何人都可以帮忙解决这个问题吗？

Answer 1

正如具体问题提到Snap一样，我会走这条路。

你可以克隆svg元素，然后在它上面拖一个矩形，或者我想知道你是否可以拖动一个实际上是一个剪辑或其他东西的矩形，这可能是一个稍微好一点的解决方案，但是有点小问题，所以暂时这是第一种方式。

首先，我们可以加载我们的图片..

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

然后主要onLoad func ..

这可以通过克隆图像来实现（我也使用了不必要的toDefs（），但是如果图像是一个大文件，你可能只使用一组元素，并在'use'中引用它们所以我现在把它留在了一个简单的例子中。

我们还定义了一个viewBox，

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

这将是我们的“窗口”

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

您需要调整拖动处理程序，使其完全正常工作（atm它只需通过dx，dy和每次重置拖动），还可以调整缩放和窗口大小以及与您想要的关系，但它应该提供概念证明。

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 );
        }       

};

突出显示放大区域

1 个答案: