GoldenLine
Zaloguj się
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: canvas lineTi i zmiana koloru

Hej,

Za pomocą jquery odpalam canvasa i tu działa, pytanie może nie z jquery ale może ktoś wiec Walczę z tym już bardzo długo... :(

mam taki kod.



  function TrackGraphic(model, canvas) 

       {

               //TrackModel

               this._model = model;

               this.draw = function (context)

               {

                       var dx = Math.cos(this._model.startAngle + Math.PI/2);

                       var dy = Math.sin(this._model.startAngle + Math.PI / 2);                                

                                        

                       context.beginPath(); 

                       context.lineWidth = 10;

                       context.moveTo(this._model.offsetX, this._model.offsetY);

                       //CurvePoint

                       var p;

                       for (var d = 0; d < this._model.length; d+=1) 

                       {

						   if (d>100  )

						   {

							console.log('2F2F2F');

	                       context.strokeStyle = "#2F2F2F" //"rgb(255,165,0)"; //0x2F2F2F;

					   }else{

	                       context.strokeStyle = "#fff" //"rgb(255,165,0)"; //0x2F2F2F;

							console.log('FFFFFF');

					   }

                               p = this._model.getTrackPoint(d);

                               context.lineTo(this._model.offsetX + p.x, this._model.offsetY + p.y)

                       }

                       context.closePath();

                       context.stroke();

                                        

               }



                

       }


generuje on mi na podstawie danych z pętli coś... to coś ma kolor #2F2F2F.. w całości
Ale chcę aby na samym początku było miałe i dodałem tam if ale nie działa. if jest dobrze zrobiony ale vanvas nie zmienia koloru... dla tego czegoś.. :)

wie może ktoś o co chodzi..
Link do wypowiedziLink

konto usunięte

Temat: canvas lineTi i zmiana koloru

W momencie pierwszego odpalenia stroke() wartosc ctx.strokeStyle jest rowna ostatnio ustawionej, czyli #2F2F2F.
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: canvas lineTi i zmiana koloru

właśnie wiem, ale jak ma wyglądać ten kod by było dobrze.
Link do wypowiedziLink

konto usunięte

Temat: canvas lineTi i zmiana koloru

kolor -> stroke() -> kolor -> stroke()
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: canvas lineTi i zmiana koloru

wywaliłem na końcu:



context.closePath();

context.stroke();


i zmieniłem IF



 if (d>100  )

   {

	context.strokeStyle = "#2F2F2F" //"rgb(255,165,0)"; //0x2F2F2F;

        context.stroke();

  }else{

	 context.strokeStyle = "#fff" //"rgb(255,165,0)"; //0x2F2F2F;

        context.stroke();

   }


i nie działa. Efektem jest to, że wszystko jest pogrubione na czarna ale hm (podwójnie albo i potrójnie) i wszystko jest cały czas czarne
Link do wypowiedziLink

konto usunięte

Temat: canvas lineTi i zmiana koloru

Twoim błędem jest to że ciągle rysujesz tylko jedną linie. Żeby narysować kilka linii różnego koloru musisz narysować kilka RÓŻNYCH LINII zaczynając od beginPath() z tego co pamiętam.

Co za tym idzie:



 var context = document.getElementById("canvas").getContext('2d');

  context.lineWidth='8';



  context.beginPath();

  context.strokeStyle='green';

  context.moveTo(20,20);

  context.lineTo(200,20);

  context.stroke();



  context.beginPath();

  context.strokeStyle='#800';

  context.moveTo(20,50);

  context.lineTo(200,50);

  context.stroke();



  context.strokeStyle='rgb(128,0,0)';

  context.beginPath();

  context.moveTo(20,80);

  context.lineTo(200,80);

  context.stroke();


Mam nadzieje że na tym przykładzie zrozumieszDariusz Półtorak edytował(a) ten post dnia 14.05.12 o godzinie 08:08
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: canvas lineTi i zmiana koloru

w pętli może być nawet 30 tys rekordów nie będzie miało to wpływu na szybkość wykonania
Link do wypowiedziLink

konto usunięte

Temat: canvas lineTi i zmiana koloru

Piotr Stanek:
w pętli może być nawet 30 tys rekordów nie będzie miało to wpływu na szybkość wykonania

Co to ma do rzeczy ? Masz narysować RÓŻNE linie więc tak to robisz. Ja nie wiem czemu ludzie uważają że JavaScript to jedyny język na świecie którego nie trzeba się uczyć by z niego korzystać :|

Poza tym 30 tysięcy operacji zawsze będzie trwać dłużej niż np pięć. Jak całość będzie zbyt ciężka to zawsze możesz pomyśleć o optymalizacji poprzez kafelkowanie, selektywne odświeżanie, pre-render itp.Dariusz Półtorak edytował(a) ten post dnia 14.05.12 o godzinie 08:57
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: canvas lineTi i zmiana koloru

problem w tym, że nie do końa wiem jak wyliczać parametry dla context.moveTo(20,80);
Link do wypowiedziLink

konto usunięte

Temat: canvas lineTi i zmiana koloru

Piotr Stanek:
problem w tym, że nie do końa wiem jak wyliczać parametry dla context.moveTo(20,80);

Zrób jakiś kurs canvas. Np ten:
https://developer.mozilla.org/en/Canvas_tutorial

zaczynasz rysować od punktu 0.0 na układzie współrzędnym rozpoczynając ścieżkę za pomocą beginPath(). Poprzez moveTo przesuwasz układ współrzędnych tak by zacząć rysować w innym punkcie. Następnie poprzez lineTo rysujesz linię do punktów które podajesz.

Ostatnia rzecz to stroke() które obrysowuje linię danym kolorem i kończysz ścieżkę za pomocą closePath jeżeli zachodzi taka potrzeba (w skrypcie który podałem wielokrotnie używa się beginPath z uwagi na to że instrukcja ta kończy otwartą ścieżkę a dopiero ostatnią instrukcją jest closePath).

Żeby to zrozumieć, po prostu weź sobie układ współrzędnych i narysuj punkty z parametrów od 0 do 200 i nanieś punkty które mam podane w moveTo oraz lineTo a później zobacz co ten skrypt rysuje to powinieneś zrozumieć jak to działa.

Zresztą w tutorialu który podlinkowałem dobrze to tłumaczą pod warunkiem że znasz angielski.
Link do wypowiedziLink
Piotr Stanek

Piotr Stanek Programista PHP /
JS developer

Temat: canvas lineTi i zmiana koloru

nie no mam już obiekt który jest rysowany canvasem to tor z zakrętami itp... dane do generowania są w bazie tor jest podzielony na kilka partów. itp. (w każdym parcie może być inna liczba zakrętów)

Każdy następny part ma wyznaczaną pozycję na podstawie ostatniego parta... (nie jest to pozycja x,y a w metrach) Więc sprawa ciut bardziej zakręcona. a Do tego dochodzi możliwość scalowania całego obiektu. np scaluje o 2.01 wszystko jest większe o o tyle i obliczenia mają być przemnożone ... żeby wszystko pasowało..

Więc to co napisałeś może i zadziała ale trzeba by na nowo to robić. :(

Zrobiłem to inaczej. celuję teraz na innym canvas który ma index 1 i działa super. Czyli mamy 3 canwasy index=0 index=1 index=2

na index=0 rysuję tor
na index=1 rysuję poruszający się po nim obiket
na index=2 rysuję 3 dodatkowe linie . na torze..
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

zmiana koloru tekstu dla di...




Wyślij zaproszenie do
Anuluj