PDA

View Full Version : [Help]Kỹ thuật vẽ đường Line đỏ trên các trang bản đồ.



Sunset_wind
24-03-2010, 00:30
Cho mình hỏi : khi thực hiện chức năng tìm kiếm trên trang diadiem.com chẳn hạn.
Thì kết quả trên Web là 2 địa điểm A và B và một đường Line màu đỏ nối từ A-B.
Hình minh họa :


http://i880.photobucket.com/albums/ac5/Gio_chieu/Draw_2.jpg
Khi chưa có đường Line màu đỏ vẫn Save hình lại được


http://i880.photobucket.com/albums/ac5/Gio_chieu/Draw_1.jpg
Khi Search thì Line màu đỏ nối 2 đầu A-B lại,và Menu Save Image không còn nữa


Xin cho mình hỏi kỹ thuật vẽ như thế là dùng công cụ gì để vẽ và phải viết ứng dụng với Công nghệ(Ngôn ngữ) nào ?
Mong được sự chia sẽ của các bạn.

ndp1007
26-03-2010, 08:38
HÌnh như họ dùng Javascript để vẽ.
Còn tại sao khi chưa có vẽ đường line đỏ như bạn nói,thì vẫn Save Image As được và khi vẽ đường màu đỏ thì Save Image As không còn thì cái đó thuộc về kỹ thuật của họ,mình cũng không rành lắm.
Nhưng mình nghĩ thế này. Họ có một tấm hình bản đồ rồi đặt trên đó một tấm kính trong suốt rồi chỉ vẽ đường đỏ trên tấm kính đó,chứ không phải vẽ trên bản đồ.
Một vài ý kiến xin được chia sẽ.
Có ai biết rõ về vấn đề này xin được chỉ dẫn thêm :)

FTP
05-04-2010, 21:32
HÌnh như họ dùng Javascript để vẽ.
Còn tại sao khi chưa có vẽ đường line đỏ như bạn nói,thì vẫn Save Image As được và khi vẽ đường màu đỏ thì Save Image As không còn thì cái đó thuộc về kỹ thuật của họ,mình cũng không rành lắm.
Nhưng mình nghĩ thế này. Họ có một tấm hình bản đồ rồi đặt trên đó một tấm kính trong suốt rồi chỉ vẽ đường đỏ trên tấm kính đó,chứ không phải vẽ trên bản đồ.
Một vài ý kiến xin được chia sẽ.
Có ai biết rõ về vấn đề này xin được chỉ dẫn thêm :)

Bác biết không đó ,biết thì nói,nói cao siêu quá chẳng ai hiểu gì hết.
Nếu biết thì bác thử demo một VD cho mọi người thấy chứ,nói miệng thao thao bất tuyệt với cái lý thuyết rỗng toét.
Dân IT cần cái thực tế hơn nhé bác.

sacroyant
17-04-2010, 19:57
Người ta có thể vẽ các đường nối trước, rồi ẩn đi ở trạng thái mặc định. Muốn hiện đoạn nào thì cho hiện đoạn đó. Cách làm này đơn giản và nhanh nhất.

Còn việc vẽ bằng JavaScript thì không khó, nhưng lúc ấy mới tính toán quỹ tích điểm để vẽ thì rõ là mua thêm việc lol

ndp1007
19-04-2010, 13:16
Bác biết không đó ,biết thì nói,nói cao siêu quá chẳng ai hiểu gì hết.
Nếu biết thì bác thử demo một VD cho mọi người thấy chứ,nói miệng thao thao bất tuyệt với cái lý thuyết rỗng toét.
Dân IT cần cái thực tế hơn nhé bác.

OK . Dẫn chứng dàng hoàng :
Họ đã dùng 1 tag Div đặt thuộc tính CSSS cho nó trong suốt và có vị trí như hình mình Post sau :

http://i581.photobucket.com/albums/ss259/ndp1007/IT/Javascript_Line.jpg

rõ ràng rồi nhé !


Người ta có thể vẽ các đường nối trước, rồi ẩn đi ở trạng thái mặc định. Muốn hiện đoạn nào thì cho hiện đoạn đó. Cách làm này đơn giản và nhanh nhất.

Còn việc vẽ bằng JavaScript thì không khó, nhưng lúc ấy mới tính toán quỹ tích điểm để vẽ thì rõ là mua thêm việc lol

Và họ đã làm như thế dùng Javascript và tính quỹ tích điểm trên đó.
Và tại sao họ không dùng như bạn nói ý trên nhỉ.Chắc chạy chậm hơn cách này :D

Only_Wind
19-04-2010, 13:27
Đúng là chậm hơn.Có ai điên mới chọn cách đó làm trên thực tế bao giờ( Cách cho mặc định) - chỉ có sinh viên làm đồ án mới làm kiểu đó.
Trang diadiem.com do IDG Quỹ dự liệu quốc tế tài trợ - đổ 2 Triệu USD vào mà
Một thoáng giớ thiệu sever của họ :16 server trong đó có 2 server DB chạy MSSQL replicate và 3 server web chạy IIS, còn lại là server images và 1 load balance device.

Làm cách mặc định có riết mà lếch lếch và lếch .

Sunset_wind
19-04-2010, 13:33
Làm được như thế mình phải làm thế nào:Có ai DEMO 1 bài VD nhỏ cho mình được không: Một trang Web có hình load lên có một tấm hình màu trắng có 1 đường Line màu đỏ bằng Javascript.


Người ta có thể vẽ các đường nối trước, rồi ẩn đi ở trạng thái mặc định. Muốn hiện đoạn nào thì cho hiện đoạn đó. Cách làm này đơn giản và nhanh nhất.

Còn việc vẽ bằng JavaScript thì không khó, nhưng lúc ấy mới tính toán quỹ tích điểm để vẽ thì rõ là mua thêm việc lol
tính toán quỹ tích điểm để vẽ là như thế nào bạn có thể giải thích một chút được không> :)

Ý Nhi
19-04-2010, 21:46
Chào các bạn,mình học cao đẳng ngành CNTT,năm nay là năm cuối.Nhóm mình gồm 5 người 3 nam 2 nữ.Hiện tại nhóm mình làm đề tài tốt nghiệp cũng tương tự như trang diadiem.com (http://diadiem.com)
Phạm vi chỉ làm trên một quận thôi
Các công việc được chia hết rồi.Nhóm con trai thì lo phần cơ sở dữ liệu và thuật toán.
Còn con gái tụi mình lo phần tìm hiểu,phân tích ,thiết kế Website (Giao diện,các kỹ thuật ứng dụng trên web).
Mình cũng tìm hiểu qua nhiều trang web khác nhau,có rất nhiều kiến thức mới,lạ mình không hiểu lắm mong các bạn chia sẽ.
-----------------------------------------------------------------------------------------------------
Cách vẽ đường màu đỏ ở trên cũng nằm trong bản kế hoạch mà bọn con trai giao cho tụi mình
Các bạn và các anh,chị có ai biết chia sẽ cho bạn chủ thread và mình với,thấy mọi người toàn bàn luận không hà( Nói mà hỏng có làm ) :)

sacroyant
20-04-2010, 04:03
Làm được như thế mình phải làm thế nào:Có ai DEMO 1 bài VD nhỏ cho mình được không: Một trang Web có hình load lên có một tấm hình màu trắng có 1 đường Line màu đỏ bằng Javascript.

tính toán quỹ tích điểm để vẽ là như thế nào bạn có thể giải thích một chút được không> :)

Đọc tin nhắn của bạn mới nhớ cái topic này :D

"Tính toán quỹ tích điểm" tức là tìm tập hợp các điểm nối giữa A và B để vẽ ra hình. Muốn dùng javascript vẽ hình trên 1 ảnh như kiểu bản đồ trên, có ít nhất 2 cách :

1. Dùng <canvas> tag, nhúng hình ảnh bản đồ vào thẻ canvas, bạn có thể vẽ hình lên đó bằng những method mà đối tượng canvas hỗ trợ. Trong IE không có canvas object, nhưng vẫn có cách làm cho canvas chạy được với trình duyệt này. Tham khảo thêm về canvas tag ở đây : https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas.

2. Nhúng hình ảnh bản đồ trên trang web, rồi đặt lên trên đó 1 phần tử DIV trong suốt bao lấy 2 điểm A và B, vẽ đường đi trong thẻ DIV này sao cho khớp với hình ảnh thể hiện trên bản đồ. Thư viện Walterzorn (http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm) khá hữu ích, cách đây 2 năm tôi đã dùng nó để viết 1 chương trình vẽ tranh trên web. Bạn có thể tham khảo ở trang chủ của tôi.


http://i.imagehost.org/0019/snlabs.png

Trong cả 2 cách, bạn đều phải tìm tập hợp điểm để vẽ ra một hình. Trang diadiem.com hình như không làm vậy mà họ tìm tập hợp điểm và "vẽ" từ trên máy chủ rồi ném hình ảnh xuống máy khách.

Trên đây chỉ là cái ngọn của vấn đề, tức là khâu xuất hình ảnh đường nối giữa 2 điểm lên màn hình. Còn nếu ý bạn hỏi người ta làm như thế nào để tìm ra đường đi ngắn nhất thì đó là vấn đề giải thuật.

Với bài toán có dạng tìm đường đi ngắn nhất trong một đồ thị, người ta có thể sử dụng thuật toán Dijkstra (http://vi.wikipedia.org/wiki/Thu%E1%BA%ADt_to%C3%A1n_Dijkstra) để giải quyết. Bạn hãy xem những giao lộ như các nút trong 1 đồ thị. Cái bản đồ chẳng qua là một tập hợp của những nút giao thông. Mỗi nút có những nút lân cận và có thể áp dụng thuật toán "láng giềng gần nhất" (http://vi.wikipedia.org/wiki/Thu%E1%BA%ADt_to%C3%A1n_l%C3%A1ng_gi%E1%BB%81ng_g% E1%BA%A7n_nh%E1%BA%A5t) khi khảo sát. Nếu bạn gán cho mỗi nút một thuộc tính tọa độ (x,y) trên mặt phẳng 2 chiều, bạn còn giới hạn được vùng khảo sát. Chẳng hạn trường hợp tìm đường đi giữa 2 điểm A - B, vùng khảo sát được giới hạn trong phạm vi hình chữ nhật mờ như 1 hình ảnh mà ndp1007 đã post.

Ý Nhi
20-04-2010, 15:45
thấy mọi người toàn bàn luận không hà( Nói mà hỏng có làm ) :)
Sorry bạn sacroyant :)
-----------------------------
Bạn viết bài tỷ mỹ thật,mình đọc và tìm một số đề tài như thế này ,mà chưa thấy một bài tổng quát như bạn,thật tỷ mỷ ,chi tiết nằm trong sự tổng quát.
Mình có cái để báo cáo với lại nhóm trưởng rồi! hihi và biết hướng tìm công nghệ luôn rồi.
cảm ơn bạn chủ theard đã có một câu hỏi rất hay và người trả lời cũng như thế :)
Cảm ơn bạn sacroyant rất nhiều,một bài viết thật bổ ích,chắc là anh :D

Sunset_wind
20-04-2010, 17:13
@Ý Nhi : hi,chúc bạn may mắn,ddth.com thật bổ ích phải không và các memmber nhiệt tình giống sacroyant lại càng tuyệt vời hơn !

@sacroyant : Cảm ơn bạn đã nhiệt tình giúp đỡ.
để mình tìm hiểu những công nghệ mà bạn giới thiệu xem có ứng dụng vào bài tập của mình được không !



Trong cả 2 cách, bạn đều phải tìm tập hợp điểm để vẽ ra một hình. Trang diadiem.com hình như không làm vậy mà họ tìm tập hợp điểm và "vẽ" từ trên máy chủ rồi ném hình ảnh xuống máy khách.

Chắc bạn Only_Wind nói đúng:


Trang diadiem.com do IDG Quỹ dự liệu quốc tế tài trợ - đổ 2 Triệu USD vào mà
Một thoáng giớ thiệu sever của họ :16 server trong đó có 2 server DB chạy MSSQL replicate và 3 server web chạy IIS, còn lại là server images và 1 load balance device.

với hệ thống datbase như thế chắc triển khai phía server là chủ yếu.Mà không biết thông tin có chính xác không nữa.:)



Trên đây chỉ là cái ngọn của vấn đề, tức là khâu xuất hình ảnh đường nối giữa 2 điểm lên màn hình. Còn nếu ý bạn hỏi người ta làm như thế nào để tìm ra đường đi ngắn nhất thì đó là vấn đề giải thuật.

Với bài toán có dạng tìm đường đi ngắn nhất trong một đồ thị, người ta có thể sử dụng thuật toán Dijkstra (http://vi.wikipedia.org/wiki/Thu%E1%BA%ADt_to%C3%A1n_Dijkstra) để giải quyết. Bạn hãy xem những giao lộ như các nút trong 1 đồ thị. Cái bản đồ chẳng qua là một tập hợp của những nút giao thông. Mỗi nút có những nút lân cận và có thể áp dụng thuật toán "láng giềng gần nhất" (http://vi.wikipedia.org/wiki/Thu%E1%BA%ADt_to%C3%A1n_l%C3%A1ng_gi%E1%BB%81ng_g% E1%BA%A7n_nh%E1%BA%A5t) khi khảo sát. Nếu bạn gán cho mỗi nút một thuộc tính tọa độ (x,y) trên mặt phẳng 2 chiều, bạn còn giới hạn được vùng khảo sát. Chẳng hạn trường hợp tìm đường đi giữa 2 điểm A - B, vùng khảo sát được giới hạn trong phạm vi hình chữ nhật mờ như 1 hình ảnh mà ndp1007 đã post.

Chắc bạn cũng biết về thuật toán ,giải thuật về tìm đường lắm nhỉ ?
Nhưng bài tập mình làm không có chuyên sâu về giải thuật.Vấn đề giải thuật sẽ được đề cập đấn một câu chuyện khác.
Vậy cho mình hỏi thêm vấn đề về bài tập của mình :
gồm 2 phần
Phần 1 : vẽ đường line màu đỏ- đã được bạn gợi ý ở trên.
Phần 2 : Khi lên lên trang web giao diện như thế này :
http://i880.photobucket.com/albums/ac5/Gio_chieu/CNTT/ToadoAB.jpg
Khi nhập vào tọa độ điểm A,B vào ô Textbox 1,thì chúng sẽ hiện 2 cái Images nhỏ [A] & [B] đúng với tọa độ giống trang điaiem.com chẳng hạn,và ngược lại(khi click vào tag DIV giữa(tag DIV chứa bản đồ như trang diadiem.com ),thì nói sẽ hiện lên tag DIV đó 2 images nhỏ [A] [B] và hiện toạ độ lên Textbox tương ứng)
Mong được bạn chia sẽ,hay chỉ dẫn hướng thực hiện. :)

sacroyant
21-04-2010, 00:45
@ Ý Nhi, Sunset_wind : tôi không phải dân IT chuyên nghiệp, chỉ có thể góp ý với các bạn từ một góc nhìn hạn chế.

Về thắc mắc của Sunset, tôi vừa thử làm 1 web mẫu đơn giản, nhìn như thế này :


http://i.imagehost.org/0420/maptest.png (http://snlib.uni.cc/Examples/MAP/1/)

Bạn có thể xem tại địa chỉ : http://snlib.uni.cc/Examples/MAP/1/ (http://snlib.uni.cc/Examples/MAP/1/)

Khi mở lên, sẽ thấy 1 bản đồ trống. Bạn nhập tọa độ vào 2 ô textbox phía trên theo dạng (X, Y) để cho chương trình biết vị trí các điểm A và B. Hoặc nhấp chuột lên bất kỳ vị trí nào trong bản đồ để lần lượt set tọa độ cho A và B. Sau đó nhấn nút "Test", 2 biểu tượng http://i.imagehost.org/0750/A_4.png và http://i.imagehost.org/0293/B_5.png sẽ hiển thị trên bản đồ.

Việc click lên bản đồ cho phép bạn lấy tọa độ của vị trí clicked và gán vào textbox theo nguyên tắc :

- Textbox nào rỗng thì điền tọa độ vào textbox đó.
- Nếu cả 2 textbox đều rỗng thì điền tọa độ cho A trước, cho B sau.

Để xóa các giá trị trong textbox, nhấn nút Clear.

Nút Reset cũng có tác dụng tương tự nút Clear nhưng đồng thời làm biến mất các biểu tượng http://i.imagehost.org/0750/A_4.png và http://i.imagehost.org/0293/B_5.png nếu chúng đang hiển thị trên bản đồ.

Ở đây, tôi giả định rằng lưới tọa độ của map có kích thước mỗi ô là 1x1 pixel.

Trang phác thảo này còn ở dạng thô sơ, nhưng hy vọng nó đem lại một vài gợi ý nào đó cho bạn. Có gì thắc mắc, bạn cứ nêu ra, biết đâu tôi sẽ giúp được lol

Ý Nhi
21-04-2010, 13:33
tôi không phải dân IT chuyên nghiệp,

anh khiêm tốn rồi đó.
em thấy web ứng dụng javascript nhiều thật,nói tới web luôn luôn có chúng.
Hôm học môn TT Hồ Chí Minh xong trưởng nhóm gọi xuống ghế đá họp về dồ án Web và có nói vui một câu thế này:Lấy HTML làm nền tảng,Javascript làm kim chỉ Nam"
Bây giờ mới thấy được sự quan trọng của javascript trên web,hồi đó thầy bảo học mà không chịu học(do chương trình học nhiều lắm ,nên không tập trung vào 1 môn nào được-học 3 năm CNTT - em biết tất cả 10 ngôn ngữ + script - mà hông chuyên ngôn ngữ nào hết).

Bài của anh rất phù hợp cho đồ án của em,nhưng em không đủ khác năng hiểu những thuật toán - khoảng này con gái kém lắm :).Nếu đem về sử dụng thì em biết sửa lại cho phù hợp với website.Thầy cô mà hỏi sâu vào code thì em chắc không tự tin --> như vậy liệu có vi phạm trong học đường(Copy của người khác) ????

Chắc sẽ đem về cho bạn trong nhóm tìm hiểu + phân tích code .hihi :D - có được một tí trí khôn rồi - đề tài sẽ ,sẽ ,sẽ xong mau thôi. Cố gắn cố gắn !
Cảm ơn anh lần nữa bài viết rất hay !

Only_Wind
21-04-2010, 13:51
anh khiêm tốn rồi đó.
Lấy HTML làm nền tảng,Javascript làm kim chỉ Nam"

Hố hố :banana:giống câu này trong giáo trình thì phải :

Đại hội đại biểu toàn quốc lần thứ VII của Đảng (năm 1991) đã thông qua "Cương lĩnh xây dựng đất nước trong thời kỳ quá độ" trong đó khẳng định
Đảng lấy chủ nghĩa Mác-Lênin, tư tưởng Hồ Chí Minh làm nền tảng tư tưởng, kim chỉ nam cho hành động




Chắc bạn Only_Wind nói đúng
với hệ thống datbase như thế chắc triển khai phía server là chủ yếu.Mà không biết thông tin có chính xác không nữa.:)

Đúng sao không bác.Tui lúc trước có ông anh đảm nhận Server cho diadiem.com mà.
Mà về phần bài tập của bác,và đề tài của cô bé Ý Nhi thì hỏi các người này - họ bro lắm - họ cũng có nick name trên 4rum này:
Admin trang diadiem.com
Admin trang 1650km.com
Admin trang vietbando ( còn gọi là Việt Bán Độ :D)
Email lên hệ,không tiện post trên đây. :D.
Công nghệ này các công ty đang cạnh tranh với nhau,ít ai mà cho kỹ thuật này lắm,bác sacroyant share cho là quá OK rồi.

Sunset_wind
22-04-2010, 07:32
Cảm ơn bạn.Bài viết thật hay.
Vấn đề thêm nữa là : Nếu có thêm một công cụ Zoom(Zoom hình background đó lên) thì liệu A và B sẽ cũng thu nhỏ lại theo đúng tỉ lệ Zoom hay chỉ giữ nguyên.
Hình minh họa :

http://i880.photobucket.com/albums/ac5/Gio_chieu/CNTT/Layout.jpg

Source :http://www.mediafire.com/?yjzyjil23n1(Nhưng bị lỗi)

Còn về tập hợp điểm :
Nếu thay vì đường thẳng thì ta cứ khai báo chỉ 2 tọa độ : A và B và kêu gọi hàm drawLine(các tham số) là được.
Nhưng nếu là đường vẽ dạng "bất biến"(Free hand - được gọi trong các công cụ vẽ) như hình background trên chẵn hạn thì mình tập hợp điểm lại để vẽ như thế nào
VD : từ điểm 1 --> 9 (1 --> 10 --> 9) trên map background demo của bạn.
Mong bạn gợi ý. :)

sacroyant
30-04-2010, 13:09
Xin lỗi bạn vì mấy hôm nay tôi không theo dõi được diễn đàn.

Về chuyện vẽ các đường nối lên map thì khá đơn giản. Chỉ cần bạn nắm bắt được tọa độ của mỗi điểm nút.

Tôi vừa thử làm 1 ví dụ cho bạn tại đây :


http://snlib.uni.cc/Examples/MAP/2/ (http://snlib.uni.cc/Examples/MAP/2/)

Trong ví dụ trên, tôi dùng thư viện Walterzorn để hỗ trợ việc tạo ra các đường line. Bạn thử nhập tên nhiều điểm vào ô trống, mỗi điểm cách nhau bằng dấu phẩy, ví dụ : P1, P3, P5, P8... sau đó nhấn nút Draw, các đường nối sẽ xuất hiện.


http://j.imagehost.org/0759/map.png (http://snlib.uni.cc/Examples/MAP/2/)

Nếu xem xét file javascript func.js, bạn sẽ thấy tôi coi mỗi nút trên Map là 1 đối tượng Point có 2 thuộc tính name và coordinate. Trên map có tổng cộng 12 đối tượng từ P1 đến P12. Chúng được gom vào trong 1 mảng tên là Points để tiện tham chiếu.


function Point(name, coordinate){
this.name=name;
this.coordinate=coordinate.split(',');
}
Points=new Array(
new Point('P1', '183,149'),
new Point('P2', '299,105'),
new Point('P3', '526,85'),
new Point('P4', '395,243'),
new Point('P5', '567,212'),
new Point('P6', '574,290'),
new Point('P7', '668,334'),
new Point('P8', '439,359'),
new Point('P9', '305,271'),
new Point('P10', '179,267'),
new Point('P11', '195,388'),
new Point('P12', '95,244')
);

Khi nút Draw được nhấn, chương trình sẽ phân tích chuỗi nhập vào để từ tên nút tìm ra các đối tượng Point đúng theo thứ tự. Có được danh sách cách đối tượng Point, chương trình lấy tập hợp các giá trị coordinate và cung cấp cho bộ phận vẽ hình ảnh.

Muốn đường màu đỏ vẽ ra trùng khớp với đường đi trên bản đồ, bạn phải xác định tọa độ từng điểm trên tuyến đường đó. Chẳng hạn đoạn P1->P2 gồm những tọa độ nào. Càng chi tiết thì hình vẽ ra càng chuẩn xác.


PS : Vấn đề bạn cần đầu tư thời gian nghiên cứu không phải là vẽ như thế nào, mà là thuật toán tìm ra đường đi ngắn nhất.

Sunset_wind
02-05-2010, 14:08
Xin lỗi bạn vì mấy hôm nay tôi không theo dõi được diễn đàn.

Làm gì xin lỗi,bạn không cho mình là làm phiền bạn là tốt lắm rồi :)
vào 1:30 giữa ngày lễ mà bạn bỏ đi niềm vui riêng(NGỦ hay đi chơi gì đó :D ) đã nhiệt tình post bài!
Cảm ơn sự nhiệt tình của bạn.

Vấn đề bạn cần đầu tư thời gian nghiên cứu không phải là vẽ như thế nào, mà là thuật toán

tìm ra đường đi ngắn nhất
-- > Vấn đề của mình như bạn Ý Nhi nói:


Lấy HTML làm nền tảng,Javascript làm kim chỉ Nam"

Mình bây giờ chắc phải đầu tư sâu về Javascript - vì lúc trước không chú tâm tới nó cho lắm,học trong trường biết cả chục

ngôn ngữ & script nhưng không chuyên về loại nào hết :(

Còn về thuận toán gì đó còn xa lắm :(. Mình chỉ làm về phần đồ họa,vì dữ liệu đã có sẵn,không xử lý qua thuật toán,và

dựa vào dữ liệu đó vẽ sao cho được thôi.

Bài này bạn viết có lẽ đã đi gần hơn vấn đề rồi thì phải :
Như bạn ndp1007 có post hình này ở trang 1 :

OK . Dẫn chứng dàng hoàng :

http://i581.photobucket.com/albums/ss259/ndp1007/IT/Javascript_Line.jpg


rõ ràng rồi nhé !


Cái đoạn code javascript đó hình như là tập hợp các điểm của đường Line đỏ như hình chữ nhật mờ phía trên.

Mình sẽ tập trung nghiền ngẫm các vấn đề bạn đã nêu ra từ đầu tới giờ :)

Ý Nhi
02-05-2010, 14:15
Thời gian vừa qua theard này "móc meo" :) ,nên mình có search trên google các bài liên quan đến vấn đề này ,nào ngờ vào được trang diendantinhoc.org (http://www.diendantinhoc.org/forum) mới biết là anh sacroyant không những là thành viên nhiệt tình,mà còn là moderator của trang đó.

Bài này của anh,mình học được vài thứ rất hay ,xin post lên chia sẽ các bạn và chắc sẽ giúp được Sunset_Wind và những bạn nào muốn tìm hiểu,và hiểu rõ hơn về các đoạn code Javascript mà anh đã viết cho các phần DEMO trên.
Bài : Di chuyển đối tượng trên trang web (DragDrop) (http://www.diendantinhoc.org/forum/topic/49069/JavaScript-Di-chuyen-doi-tuong-tren-trang-web.html?zone=4)

@ anh sacroyant : cho em hỏi anh thêm phần này :


Ở đây, tôi giả định rằng lưới tọa độ của map có kích thước mỗi ô là 1x1 pixel.

câu hỏi của em :

http://i994.photobucket.com/albums/af66/huynhynhi/Encrease_Feild.jpg

Rất mong được anh chia sẽ !

sacroyant
02-05-2010, 16:48
@ Ý Nhi :

Bạn chỉ việc lấy tọa độ mouse chia cho kích thước mắt lưới, rồi lấy phần nguyên để biết tọa độ thực trên map.


http://j.imagehost.org/0622/grid2.gif

Nếu quy ước tọa độ gốc của map là (0,0) nằm ở góc trái trên. Có thể dùng hàm sau để quy đổi đơn vị :


<script type="text/javascript">
var desiredSize=10; // ví kích thước mắt lưới là 10x10 pixel
function render(left, top){
var pos={x:0, y:0}
pos.x=Math.floor(left/desiredSize);
pos.y=Math.floor(top/desiredSize);
return pos;
}

//var test = render(15,26);
//alert('('+test.x+','+test.y+')');
</script>

@ Sunset_wind : tính đến nay đã có 4 sự kiện làm cho vai trò của JavaScript trở nên quan trọng : trình duyệt Firefox ra đời, xuất hiện công nghệ AJAX, ứng dụng O3D, và HML5. Sau khi HTML 5 ra đời, flash và silverlight chắc hẳn không còn đất sống :D

Ý Nhi
03-05-2010, 07:55
à,em đã hiểu được vấn đề.
Cảm ơn anh ...
mong gặp anh trong những khúc mắc phía trước nữa...
Người anh nhiệt tình :)