jQuery - wybierz niewidoczny tekst nałożony na obraz, np. Przeglądarka plików PDF w formacie GMail

Question

Nakładam niewidoczny tekst na obraz. Czy istnieje wtyczka jQuery (lub podobna), która pozwoli użytkownikom wybrać obszar na obrazie (który również wybiera nałożony tekst) i być w stanie skopiować zawartość.

W tej chwili umieściłem każdą postać we własnej plakietce <span />. Problem polega na tym, że użytkownik wybiera, czasami wybiera cały nałożony tekst (chyba że użytkownik jest wyjątkowo precyzyjny za pomocą myszy), czasami sam obraz zostaje wybrany, itp.

Rozwiązanie podobne do przeglądarki plików PDF GMaila byłoby miłe. Propozycje?

Answer 1

Google zdaje się wiedzieć z pliku PDF, w którym znajdują się różne przesunięcia tekstowe x,y w pliku. Po wybraniu kilku linii, umieszcza zestaw absolutnie pozycjonowanych elementów "wyboru" na obrazie, w którym znajduje się "tekst" (mają klasę highlight-pane). Po zaznaczeniu tekstu wypełnia on tekstową treść z zaznaczonymi elementami i zaznacza tekst (spróbuj użyć w Chrome opcji window.getSelection().anchorNode). Poza tymi nakładkami wyboru, istnieje tylko obraz .page-image. Założę się, że faktycznie używają okna do przechwytywania wszystkich gestów myszy, na których im zależy (zakładam, że są to mousedown i mouseup). (Here's an example pdf document)

Jeśli bezwzględne pozycjonowanie elementów, można wykryć mousedown, mousemove i mouseup, dowiedzieć się mysz elementy przęseł wynosi ponad (lub najbliższy) i wypełnić textarea z treścią wszystkich treść między tymi dwoma elementami. Jeśli chcesz użyć tylko ziarnistości słowa, wątpię, żeby ktoś narzekał (otaczaj każde słowo span, a nie każdą literę).

Edit: Mam dosyć ciekawy ostatniej nocy i zakodowane górę naprawdę wersję naiwny. To nie tylko mousedown i mouseup, i to nie działa w IE (nie mam ochoty debugowania to :)

Check it out on jsfiddle.

funkcje warto dodać:

1. Niektóre lepiej sposób sprawdzania dopasowań opartych na pozycjach; Po prostu robię to, czy jest zawarte w pudełku.
2. dynamiczne aktualizowanie na mousemove
3. linii oparte raczej niż rozpiętość oparte
4. Można by jeszcze zrobić wybierając kolorem tła, ale w zależności od tego, jak twoje elementy rozmieszczone są może nie wyglądają bardzo dobrze. Musiałby również wspierać przejrzystość.

Answer 2

Oto prosty przykład stosując moją odpowiedź do poprzedniego pytania: http://www.jsfiddle.net/yijiang/83W7X/2/embedded/result

var selected = []; 

function drawSelection(){ 
    if(selected.length){ 
     selected.sort(function(a, b){ 
      if(a.sourceIndex){ 
       return a.sourceIndex - b.sourceIndex; 
      } else if(a.compareDocumentPosition){ 
       if(a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING){ 
        return 1; 
       } else { 
        return -1; 
       } 
      } 
     }); 
     var range = rangy.createRange(), 
      sel = rangy.getSelection(); 

     range.setStart(selected[0].children[0], 0); 
     range.setEnd(selected[selected.length - 1].children[0], 1); 
     sel.setSingleRange(range); 
    } 
} 

$('ul').selectable({ 
    delay: 100, 
    selecting: function(event, ui) { 
     if(ui.selecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.selecting, selected) === -1) { 
      selected.push(ui.selecting); 
      drawSelection(); 
     } 
    }, 
    unselecting: function(event, ui){ 
     if(ui.unselecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.unselecting, selected) > -1){ 
      selected.splice($.inArray(ui.unselecting, selected), 1); 
      drawSelection(); 
     } 
    } 
}); 

Łączy on w jQuery UI jest do wyboru z doskonałej biblioteki smukły Tim Downa, aby stworzyć coś podobnego do tego, co prosiliśmy. Myślę. To, o co prosiłeś, nie było całkiem jasne.

Kod zachowuje tablicę aktualnie wybranych elementów li. Druga część kodu dodaje odpowiednie procedury obsługi zdarzeń i opcje.Funkcja drawSelection jest wywoływana za każdym razem, gdy element jest zaznaczony lub odznaczony. Funkcja najpierw sortuje wszystkie elementy według ich pozycji w DOM, a następnie kontynuuje rysowanie zaznaczenia od pierwszego wybranego li do ostatniego.

Kod, podobnie jak theazureshadow's, jest tylko dowodem koncepcji, ponieważ wyodrębniam to, co naprawdę powinno być prostym zadaniem polegającym na wybraniu li s do dość ciężkiej biblioteki Rangy. Nie działa też zbyt dobrze i może zrobić z pewnym refaktoryzacją.