CODEWITHSUNDEEP
javascriptsvgsnap.svg
U r s u s
U r s u s

Reputation: 6978

Highlight zoomed-in area

I have a project for manipulating SVGs.

Users can zoom in and out of the image. I want to have a thumbnail of the whole image that shows and highlights the area that users are currently zooming in/out.

Something along these lines http://www.ancientlives.org/transcribe

I have tried playing around with http://snapsvg.io/, without success.

Can anyone help working something out with the library?

Upvotes: 0

Views: 146

Answers (1)

Ian
Ian

Reputation: 13852

As the specific question mentions Snap, I'll go down that road.

You could clone the svg element, and drag a rect over it, or I was wondering if you could drag a rect thats actually a clip or something, that could be a slightly better solution, but a bit fiddlier to work out, so for the moment here's the first way.

First off, we can load our image..

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

Then the main onLoad func..

This works by cloning the image (I also use toDefs() which isn't necessary, but if the image is a large file, you could possibly use just one the set of elements, and reference them in a 'use' method. So I'm leaving that in as just a simple example for the moment.

We also define a viewBox, 

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

Which will be our 'window'

And then when we drag the rect, we make the image (placed in a group so we can transform it) move.

You will need to tweak the drag handler, to make it work completely (atm it will just drag via dx,dy and reset each time) and also tweak the zoom and window sizes and relationship to what you want, but it should give a proof of concept.

example (drag the rect)



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

};

Upvotes: 1

Related Questions