Jak zapobiec szybkiemu ruchowi myszy przed przerwaniem linii w mojej aplikacji do rysowania?

pracuję nad scenariuszem, który pozwala użytkownikowi rysować za pomocą myszy: http://jsfiddle.net/ujMGu/Jak zapobiec szybkiemu ruchowi myszy przed przerwaniem linii w mojej aplikacji do rysowania?

Problem: Jeśli przesuniesz myszkę bardzo szybko to szarpie i pomija kilka miejsc. Czy istnieje sposób na uchwycenie wszystkich punktów bez pomijania czarnych pól pomiędzy linią rysunku?

CSS

#myid{background: none repeat scroll 0 0 #000000; 
    color: #FFFFFF; 
    display: block; 
    height: 1000px; 
    margin: 3%; 
    position: relative; 
    text-indent: -1100px;}

JS/JQ

$('#myid') 
.css('position','relative') 
.unbind().die() 
.bind('mousemove mouseover',function (e){ 
var top = parseInt(e.pageY)-$(this).offset().top; 
var left= parseInt(e.pageX)-$(this).offset().left; 
var pixel= $('<div></div>') 
    .css({ 
     width:10,height:10, 
     background: '#fff', 
     position:'absolute', 
     top: top, left: left, 
     'border-radius': 2 
    }); 
    $(this).append(pixel); 
});

HTML

<div id="myid"></div>

Źródło

2012-03-06 Val

Prawdopodobnie zły pomysł, aby to zrobić z div; rozważ zamiast tego użycie płótna. Większość przeglądarek będzie działała szybciej na płótnie niż divy, ponieważ div wymagają raczej manipulacji DOM niż zwykłego malowania rastrowego. –

Malowanie w ten sposób (używanie znaczników div jako pikseli) jest dość ograniczone. Jakie są Twoje wymagania i jakie wsparcie dla przeglądarki potrzebujesz? Czy jest jakiś powód, aby użyć tej metody zamiast (powiedzmy) płótna? –

coz im mało znany z płótna, i potrzebuję czegoś prostego, więc mogę wysłać to do innych osób w skomplikowany sposób, jako nakładkę/maskę na coś innego, co jest za nim. – Val

to sprawdzić: http://jsfiddle.net/KodeKreachor/9DbP3/6/

Poniższy obiekt na danym łączu zawiera algorytm:

var drawer = new Drawer();

Daj mi znać, jeśli mam pytania, jak to zrobiłem. Przesłanka opiera się na algorytmie linii Bresenham i powinna być kompatybilna również w starszych przeglądarkach.

Źródło

2012-03-06 16:49:55 KodeKreachor

Niceeeee, cóż, coś takiego jest w porządku :), również mogę zaakceptować wszystkie twoje odpowiedzi lol, nie wiem, który wybrać :) jako właściwą odpowiedź wszyscy masz właściwą odpowiedź w różne sposoby :) – Val

Cieszę się, że to zadziałało. Canvas to świetny sposób na zrobienie i na pewno polecany. Chciałem po prostu czegoś, co działałoby w starszych przeglądarkach, dlatego też zaimplementowałem ten przykład używając prostych elementów div. – KodeKreachor

Ty musiałby śledzić poprzedni punkt, a następnie narysuj linię między nowym punktem a poprzednim.

Źródło

2012-03-06 16:41:26

+1 za pomysł, chociaż "rysowanie linii" nie jest proste, gdy twoją metodą malowania jest absolutne ustawienie serii 10x10 div. –

Dlaczego nie używać płótna? Posiada szereg narzędzi wiersza rysunek:

http://www.w3schools.com/html5/html5_ref_canvas.asp

Źródło

2012-03-06 16:46:08 kand

coz Eksperymentuję, z tym, pomyślałem, że będzie fajnie, a także na płótnie, nie zadziałałoby by to, co miałem na myśli :) chyba naprawdę zacznę spędzać aloooong czas na tym co nie mam :) myślałem, że to by miało było o wiele szybciej :) – Val

Jak już wspomniano, płótno jest naprawdę najlepszym narzędziem do rysowania.

Jeśli musisz użyć swojej metody div, lub jeśli jest to po prostu dla zabawy, możesz rozszerzyć swoje podejście, zapisując poprzednią pozycję myszy, a następnie narysować pośrednie "piksele" potrzebne do uzupełnienia linii przy użyciu, na przykład, Bresenham's line algorithm .

Źródło

2012-03-06 16:53:04

Jak zapobiec szybkiemu ruchowi myszy przed przerwaniem linii w mojej aplikacji do rysowania?

Odpowiedz

Powiązane problemy