Forum PHP.pl > obiekt canvas, lineTo()

Pomoc - Szukaj - Użytkownicy - Kalendarz

El Nino9

9.05.2012, 18:39:40

witam
zacząłem interesować się ostatnio tworzeniem gier w javascript przy użyciu canvas
no i w ramach ćwiczeń postanowiłem stworzyć jakąś tam gierkę, gdzie jakiś obiekt poruszałby działkiem, jak czołg
za pomocą metody lineTo() potrafię narysować linię w zależności od położenia myszki (z pomocą przychodzi jQuery), ale problem leży w tym że wraz z położeniem myszki zmienia się długość działa
po prostu metoda lineTo przyjmuje wartości x,y więc gdy chcę odchylić działo bardziej w którąś stronę po prostu się wydłuża
mam nadzieję ze kazdy zrozumiał o co chodzi
myślałem nad pitagorasem ale chyba nie bardzo, bo będą aż dwie niewiadome (jedynie żądana długość działa będzie znana)
a może rozwiązanie jest jakieś banalne tylko po prostu o czymś zapomniałem albo po prostu jeszcze czegoś nie umiem?
pozdrawiam

!*!

9.05.2012, 19:00:56

Chyba nie ten dział. Po prostu narysuj linię którą ma określoną długość, a później ją obracaj względem położenia kursora na obiekcie. Pokaż kod.

El Nino9

9.05.2012, 23:00:02

no rzeczywiście się pomyliłem
no w każdym razie, zrobiłbym jak piszesz, gdybym tylko wiedział jak
przecież lineTo przyjmuje tylko dwa argumenty, x i y, więc jak określić długość rysowanej linii?

Kod

$(document).ready(function()
{

var canvas = document.getElementById("plotno");
var context = canvas.getContext("2d");
context.strokeStyle = 'black';
context.lineWidth = 5;
context.lineCap = "round";

$("#plotno").mousemove(function(e)
{

context.beginPath();
context.moveTo(300,50);

context.lineTo(e.pageX,20);
context.stroke();

context.clearRect(e.pageX,e.pageY);

});
})

no jest i kod, mam też póki co problem z clearRect, nie wiem jakie wartości podstawiać by po zmianie umiejscowienia kursora stara linia się kasowała, nowa rysowała
bo w tym momencie clearRect w ogóle nie działa i pole canvas po prostu jest zamalowywane liniami
pozdro

Theqos

10.05.2012, 13:24:58

Cytat

problem leży w tym że wraz z położeniem myszki zmienia się długość działa

Rysujesz myszką to działko? Może zrób jakiś rysunek bo nie wiem o co ci chodzi. IMHO dobrze by było jakbyś rozdzielił prezentację działka od jego sterowania.

PS. clearRect ma 4 argumenty, musisz dodać szerokość i wysokość prostokąta.

Crozin

10.05.2012, 14:33:07

1. Ustawiasz się na środku wieżyczki czołgu (moveTo(x, y)).
2. Rysujesz prostą, pionową linię, tak jakbyś wskazywał myszką dokładnie nad czołgiem (lineTo(x, y - 25), jeżeli lufa ma mieć 25 pikseli długości).
3. Obracasz lufę o kąt pomiędzy środkiem wieżyczki, a aktualną pozycją myszki (rotate(a)), względem środka wieżyczki (obracanie względem punktu).

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.