Hướng dẫn get xy coordinates of image in javascript - lấy tọa độ xy của hình ảnh trong javascript
|
Đây là vấn đề mới nhất của tôi. Show
Tôi đang cố gắng để có được tọa độ X và Y về nơi người dùng nhấp vào bên trong hình ảnh. Bất kể vị trí của nó trong cửa sổ của người dùng, zoom, vị trí cuộn, kích thước của cửa sổ, người dùng có gì cho bữa sáng, v.v., tọa độ x, y chỉ phải tính đến vị trí mà người dùng nhấp vào Hình ảnh nhưng không bao gồm vị trí của hình ảnh trong màn hình, tức là điểm trên bên trái trong hình là 0,0. (Hy vọng tôi đang giải thích rõ ràng điều này.) Lý do tôi nói điều này là bởi vì, trong chức năng JavaScript hiện tại của tôi, tôi đang nhận được tọa độ x, y của một cái gì đó, nhưng tôi không chắc chính xác những gì. Tôi nghĩ rằng đó là vị trí của nơi người dùng nhấp vào cửa sổ tổng thể, nhưng không phải trong hình ảnh. Điều này có nghĩa là tọa độ x, y thay đổi nếu vị trí của hình ảnh khác nhau, nếu người dùng đã cuộn, nếu tôi di chuyển hình ảnh ở một nơi khác trong trang, v.v. Đây là mã HTML hiện tại của tôi: Và đây là chức năng JavaScript của tôi: Một vài dòng mã cuối cùng trong đó lấy cặp phối hợp x, y và thêm nó vào cuối danh sách có trong một thẻ có tên là hotspot_list. Có ai biết nếu tôi đi đúng hướng hay có thể chỉ cho tôi đi đúng hướng, hoặc biết những gì còn thiếu tôi cần để có được điều phối x, y thực sự đó? Cảm ơn! Những gì bạn sẽ học ở đây về việc lấy X và Y của hình ảnh bằng cách sử dụng JavaScript
Ở đây chúng tôi sẽ hiểu cách lấy X và Y của hình ảnh bằng JavaScript. Vui lòng tải xuống mã sau để có được tọa độ X Y của hình ảnh trong JavaScript. Tải xuống mã GET X và Y của hình ảnh (606 Tải xuống) Nhận x y tọa độ hình ảnh trong JavaScriptVui lòng làm theo các bước sau đây để biết để nhận & nbsp; x y tọa độ hình ảnh trong JavaScript 1) Vui lòng tải xuống mã trên 2) Vui lòng mở canvasxy.html với bất kỳ trình chỉnh sửa nào được hiển thị bên dưới 3) Bây giờ, vui lòng nhấp đúp chuột vào tệp canvasxy.html đã tải xuống để chạy mã. 4) Khi bạn chạy, mã sẽ thấy loại đầu ra sau trong trình duyệt 5) Vui lòng nhấp vào bất cứ nơi nào trên hình ảnh để có được tọa độ X và Y được hiển thị bên dưới  Hình ảnh đóng một vai trò rất quan trọng trong khi thiết kế một trang web. Đôi khi chúng tôi thêm một loạt các hình ảnh trên một trang web. Chúng tôi nhúng nhiều hình ảnh vào một hình ảnh duy nhất để lưu thời gian tải của trang web. Tìm tọa độ X và Y chính xác của hình ảnh trong ngăn xếp bằng cách sử dụng nhấp chuột hoặc di chuyển chuột, loại bỏ phỏng đoán. Chúng ta có thể tìm thấy các tọa độ X và Y bằng cách sử dụng các sự kiện JQuery Page và PageY để xác định vị trí chuột trên hình ảnh hoặc bất kỳ phần tử nào chính xác. Chúng ta có thể lấy vị trí của chuột bằng cách di chuột qua hình ảnh hoặc bằng cách nhấp vào hình ảnh.pageX and pageY events to locate the mouse position on the image or any element to be precise. We can get the location of the mouse either by hovering it over the image or by clicking the image. Đánh dấu Chúng tôi sẽ thêm một hình ảnh sprite trong trang web của chúng tôi, có ba hình ảnh nhỏ được nhúng với nhau trong một tệp hình ảnh duy nhất. Chúng tôi cũng sẽ thêm một phần tử div, sẽ cho chúng tôi thấy tọa độ khi chúng tôi di chuyển, di chuột hoặc nhấp vào hình ảnh.
Cách kích thước lại một hình ảnh bằng ASP.NET mà không phá hủy chất lượng của nó-C# và VB.NET Tập lệnh sử dụng nhấp chuột Để có được các tọa độ x chính xác của hình ảnh, chúng tôi sẽ sử dụng phương thức jQuery offset () để loại bỏ khoảng trống giữa cửa sổ và thùng chứa hình ảnh. Div đang hoạt động như một container cho hình ảnh. Bằng cách này ngay cả khi chúng ta thêm một chút đệm vào thùng chứa, tọa độ của hình ảnh là chính xác. Bản demo (nhấp vào hình ảnh bên dưới)
Động thêm hình ảnh vào phần tử div bằng phương thức jQuery .Appendto () Kịch bản sử dụng di chuyển chuột Bản demo (di chuyển chuột qua hình ảnh)
Sự kết luận Chúng ta đã thấy làm thế nào các tọa độ x, y có thể được đặt trong một hình ảnh bên trong một hình ảnh khác, trên thực tế các thuộc tính này không chỉ giới hạn trong hình ảnh, bạn có thể thử với các phần tử HTML khác như Div hoặc P.DIV or P. Hình ảnh Sprite là một tập hợp nhiều hình ảnh được gói cùng nhau trong một hình ảnh duy nhất. Chúng tôi sẽ thảo luận về hình ảnh Sprites, lợi thế của nó và sử dụng với CSS, trong một bài viết khác rất sớm. ← Trước đó →Next → Làm thế nào để tôi tìm thấy tọa độ của hình ảnh XY?Nhận tọa độ từ một hình ảnh.. Mở thanh công cụ hình ảnh. Nhấp vào một hình ảnh để mở thanh công cụ hình ảnh:. Chọn công cụ tọa độ. Chọn công cụ tọa độ trong thanh công cụ:. Nhấp vào điểm hình ảnh. .... Sao chép tọa độ hình ảnh vào bảng tạm. .... Dán tọa độ hình ảnh thành một biểu thức .. Làm cách nào để có được tọa độ của một hình ảnh trong HTML?Các bản đồ hình ảnh vòng tròn khu vực sẽ có tọa độ: tọa độ = X X, y, bán kính trong đó XY là tọa độ của tâm của vòng tròn và bán kính là bán kính của vòng tròn. Bản đồ hình ảnh đa giác sẽ có các tọa độ: tọa độ = Hồi x1, y1, x2, y2, x3, y3. trong đó mỗi cặp XY xác định một góc của hình dạng.coords=”x,y,radius” where xy are the coordinates of the center of the circle and the radius is the radius of the circle. Polygon image maps will have the coordinates: coords=”x1,y1,x2,y2,x3,y3….” where each xy pair defines a corner of the shape.
Làm thế nào để bạn tham khảo một hình ảnh trong JavaScript?Trong JavaScript, hãy lấy tham chiếu đến thẻ hình ảnh bằng phương thức Truy vấnSelector ().Sau đó, gán một URL hình ảnh cho thuộc tính SRC của phần tử hình ảnh.get a reference to the image tag using the querySelector() method. Then, assign an image URL to the src attribute of the image element.
Làm thế nào để bạn viết tọa độ trong JavaScript?Các thuộc tính chính của DOMREC. trái = x .. top = y .. phải = x + chiều rộng .. đáy = y + chiều cao .. |
