Выделите область увеличенного изображения

Question

У меня есть проект для управления SVG.

Пользователи могут увеличивать и уменьшать изображение. Я хочу иметь уменьшенное изображение всего изображения, которое показывает и выделяет область, в которой пользователи в настоящее время увеличивают/уменьшают масштаб.

Что-то вдоль этих линий http://www.ancientlives.org/transcribe

Я пытался играть с http://snapsvg.io/, но безуспешно.

Может ли кто-нибудь помочь в работе над библиотекой?

Answer 1

В качестве конкретного вопроса упоминается Snap, я пойду по этой дороге.

Вы можете клонировать элемент svg и перетаскивать прямоугольник над ним, или мне было интересно, можно ли перетащить прямоугольник, который фактически является клипом, или что-то в этом роде, что может быть немного лучшим решением, но немного затруднительно для разработки , поэтому на данный момент это первый способ.

Во-первых, мы можем загрузить наше изображение ..

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

Тогда главный OnLoad FUNC ..

Это работает клонированием изображение (я также использую toDefs(), который не является необходимым , но если изображение представляет собой большой файл, вы можете использовать только один набор элементов и ссылаться на них в методе «использования». Поэтому я оставляю это как простой пример на данный момент.

Мы также определяем 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); 
     }  

};