intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

TÌM HIỂU SVG VÀ ỨNG DỤNG - 8

Chia sẻ: Cao Tt | Ngày: | Loại File: PDF | Số trang:20

105
lượt xem
6
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Chương 3. Cấu trúc định dạng tập tin SVG • ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, rất hữu ích trong việc chỉ định các giá trị thuộc tính không phải dạng số cho các thuộc tính, chẳng hạn như thuộc tính ‘visibility’. • ‘animateMotion’: dịch chuyển một thành phần dọc theo một đường. • ‘animateColor’: thay đổi giá trị màu của các thuộc tính đặc biệt theo thời gian. Ngoài ra, SVG bổ sung thêm các mở rộng tương thích với SMIL Animation: • ‘animateTransform’: thay đổi giá trị của một trong các thuộc tính của phép biến...

Chủ đề:
Lưu

Nội dung Text: TÌM HIỂU SVG VÀ ỨNG DỤNG - 8

  1. Chương 3. Cấu trúc định dạng tập tin SVG • ‘set’: hình thức tốc kí thuận tiện cho ‘animate’, rất hữu ích trong việc chỉ định các giá trị thuộc tính không phải dạng số cho các thuộc tính, chẳng hạn như thuộc tính ‘visibility’. • ‘animateMotion’: dịch chuyển một thành phần dọc theo một đường. • ‘animateColor’: thay đổi giá trị màu của các thuộc tính đặc biệt theo thời gian. Ngoài ra, SVG bổ sung thêm các mở rộng tương thích với SMIL Animation: • ‘animateTransform’: thay đổi giá trị của một trong các thuộc tính của phép biến đổi trong SVG theo thời gian, chẳng hạn như thuộc tính ‘transform’. • Thuộc tính ‘path’: SVG cho phép bất kỳ tính năng nào của cú pháp dữ liệu đường của SVG được chỉ định trong thuộc tính ‘path’ của thành phần ‘animateMotion’ (SMIL Animtion chỉ cho phép một tập con cú pháp dữ liệu đường trong thuộc tính ‘path’). • Thành phần ‘mpath’: SVG cho phép một thành phần ‘animateMotion’ chứa một thành phần con ‘mpath’, tham chiếu đến một thành phần ‘path’ để định nghĩa một đường di chuyển. • Thuộc tính ‘keyPoint’: SVG bổ sung thuộc tính ‘keyPoint’ cho thành phần ‘animateMotion’ cung cấp khả năng điều khiển chính xác về tốc độ của ảnh động trên đường di chuyển. • Thuộc tính ‘rotate’: SVG bổ sung thuộc tính ‘rotate’ cho thành phần ‘animateMotion’ để điều khiển một đối tượng tự động quay sao cho trục x (x-axis) cùng hướng (hoặc ngược hướng) với vec-tơ tiếp tuyến của đường di chuyển. 140
  2. Chương 3. Cấu trúc định dạng tập tin SVG Để tương thích với các khía cạnh khác của ngôn ngữ, SVG dùng tham chiếu URI thông qua thuộc tính ‘xlink:href’ để xác định các thành phần là đích của hoạt ảnh. SMIL Animation yêu cầu “ngôn ngữ chủ” phải định nghĩa đầy đủ ý nghĩa cho “thời điểm bắt đầu tài liệu” (document start) và “thời điểm kết thúc tài liệu” (document end). Bởi vì một thành phần ‘svg’ đôi khi là gốc của cây tài liệu XML và đôi khi cũng là một thành phần của văn phạm XML, nên “thời điểm bắt đầu tài liệu” của một phân đoạn tài liệu SVG cho trước sẽ được định nghĩa là thời gian ngay lúc sự kiện ‘SVGLoad’ của thành phần ‘svg’ được kích hoạt. “Thời điểm kết thúc tài liệu” của phân đoạn tài liệu SVG là thời điểm mà phân đoạn tài liệu giải phóng và không còn được xử lý bởi tác nhân người dùng. Tuy nhiên, các thành phần ‘svg’ được lồng trong một tài liệu SVG sẽ không tạo thành phân đoạn tài liệu trong ngữ cảnh này, không định nghĩa một “thời điểm bắt đầu tài liệu” riêng. Tất cả các giá trị thời gian trong phân đoạn tài liệu SVG lồng được tính toán một cách tương đối với thời gian tài liệu của thành phần ‘svg’ gốc. Trong SVG, thuật ngữ thời gian trình diễn (presentation time) chỉ định một vị trí trên thước đo thời gian tương đối so với “thời điểm bắt đầu tài liệu” của phân đoạn tài liệu được cho. 3.18.3 Ví dụ ảnh động: Ví dụ minh họa một tam giác di chuyển dọc theo một đường di chuyển (motion path). Example animMotion01 - demonstrate motion animation computations
  3. Chương 3. Cấu trúc định dạng tập tin SVG with three small circles at the start, middle and end. --> Kết quả trên trình duyệt tại thời điểm 0s, 3s, 6s: Hình 3.37. Minh họa thành phần ảnh động animateMotion 3.19 Viết script (kịch bản) 3.19.1 Chỉ định ngôn ngữ viết script 3.19.1.1 Chỉ định ngôn ngữ viết script mặc định Thuộc tính ‘contentScriptType’ trên thành phần ‘svg’ chỉ định ngôn ngữ viết script mặc định cho phân đoạn tài liệu cho trước. • contentScriptType = “content-type” 142
  4. Chương 3. Cấu trúc định dạng tập tin SVG Xác định kiểu ngôn ngữ viết script mặc định cho tài liệu cho trước. Thuộc tính này thiết lập ngôn ngữ viết script được dùng để xử lý các “chuỗi giá trị trong thuộc tính sự kiện (event attributes)”. Giá trị content-type chỉ định một kiểu phương tiện (media type). Giá trị mặc định là “text/ecmascript” (tại thời điểm công bố, “text/ecmascript” chưa được đăng kí là một loại phương tiện cho ECMAScript ). Giá trị này sẽ là giá trị mặc định cho tới khi có một giá trị thay thế khác được đăng kí. 3.19.1.2 Khai báo cục bộ ngôn ngữ viết script Chúng ta có thể chỉ định ngôn ngữ đặc tả cho mỗi thành phần ‘script’ riêng biệt bằng thuộc tính ‘type’ trên thành phần ‘script’. 3.19.2 Thành phần ‘script’ Thành phần ‘script’ tương đương với thành phần ‘script’ trong ngôn ngữ đánh dấu siêu văn bản HTML. Đây là nơi viết script (bằng ngôn ngữ ECMAScript). Bất kỳ hàm nào được định nghĩa trong thành phần ‘script’ đều có phạm vi toàn cục cho toàn bộ tài liệu hiện tại. Bằng cách kết hợp ngôn ngữ ECMAScript và SVG DOM, chúng ta có thể truy cập đến tất cả các thành phần SVG trong tài liệu, như thêm, xóa các thành phần trong cây tài liệu, chỉnh sửa thuộc tính… để làm cho tài liệu SVG có thể tương tác với người dùng. Ví dụ 1: Ví dụ sau định nghĩa một hàm circle_click được triệu gọi bởi thuộc tính sự kiện ‘onclick’ trên thành phần ‘circle’. Khi nhấp chuột lên hình tròn, hình tròn thay đổi bán kính. Hình bên trái dưới đây là hình ảnh ban đầu. Hình bên phải minh họa kết quả sau khi nhấp chuột lên hình tròn.
  5. Chương 3. Cấu trúc định dạng tập tin SVG xmlns="http://www.w3.org/2000/svg" version="1.1"> Example script01 - invoke an ECMAScript function from an onclick event Click on circle to change its size Kết quả trước và sau khi nhấp chuột lên hình tròn trên trình duyệt: Hình 3.38. Minh họa chức năng bắt sự kiện chuột Một số thuộc tính của thành phần ‘script’: • type= “content-type” 144
  6. Chương 3. Cấu trúc định dạng tập tin SVG Chỉ định ngôn ngữ viết script cho thành phần ‘script’ được cho. Giá trị content-type chỉ định một loại phương tiện. Script có thể được nhúng vào tài liệu SVG trong thành phần ‘script’ như ví dụ trên, hoặc cũng có thể nằm trong một tập tin script (*.js) được liên kết vào trong tài liệu như sau: Tập tin “createnode.js” chứa đoạn script sau: function pinta() { var circleNode = svgDocument.createElement("circle"); circleNode.setAttribute("cx", 300*Math.random()); circleNode.setAttribute("cy", 300*Math.random()); circleNode.setAttribute("r", 30); circleNode.setAttribute("style", "stroke: none; " + "opacity: 0.3; " + "fill: rgb(" + 255*Math.random() + "," + 255*Math.random() + "," + 255*Math.random() + ");"); setTimeout("window.pinta()", 300);/*sau 0.3s gọi pinta() này một lần*/ document.getElementById("dr").appendChild(circleNode); } Nội dung SVG tham chiếu tới tập tin SVG trên thông qua thuộc tính ‘xlink:href’ : 145
  7. Chương 3. Cấu trúc định dạng tập tin SVG Kết quả trên trình duyệt sau một thời gian: Hình 3.39. Minh họa bộ timer và thuộc tính mờ ‘opaque’ 3.19.3 Quản lý sự kiện Các sự kiện chính là nguyên nhân kích hoạt script. • Các thuộc tính sự kiện (event attribute) như “onclick” hay “onload” được gắn vào một thành phần SVG cụ thể, các thuộc tính này chứa phần script sẽ được thực thi khi các sự kiện xảy ra. • Bộ lắng nghe sự kiện (event listener), được mô tả trong “Document Object Events” (sự kiện mô hình đối tượng tài liệu – DOM2-EVENTS), được định nghĩa sẽ được triệu gọi khi một sự kiện (tương ứng với sự kiện được cho) xảy ra trên đối tượng được cho. 3.19.4 Thuộc tính sự kiện Các thuộc tính sự kiện có sẵn trên nhiều thành phần SVG. Sau đây là danh sách các thuộc tính sự kiện trên các thành phần đồ họa và vật chứa của ngôn ngữ SVG : • onfocusin 146
  8. Chương 3. Cấu trúc định dạng tập tin SVG • onfocusout • onactivate • onclick • onmousedown • onmouseup • onmouseover • onmousemove • onmouseout • onload Các thuộc tính sự kiện cấp tài liệu: • onunload • onabort • onerror • onresize • onscroll • onzoom Các thuộc tính sự kiện ảnh động : • onbegin • onend • onrepeat • onload 147
  9. Chương 3. Cấu trúc định dạng tập tin SVG 3.19.5 ECMAScript và DOM Phần này mô tả một số thao tác cơ bản trên cây tài liệu SVG độc lập kết hợp ECMAScript và DOM. 3.19.5.1 Lấy đối tượng tài liệu function init(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; } 3.19.5.2 Lấy thành phần gốc svgRoot = svgDocument.documentElement; 3.19.5.3 Tạo một node trong cây tài liệu Hàm sau dùng để tạo một thành phần ‘circle’ var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var shape = svgDocument.createElementNS(svgns, "circle"); shape.setAttributeNS(null, "cx", 25); shape.setAttributeNS(null, "cy", 25); shape.setAttributeNS(null, "r", 20); shape.setAttributeNS(null, "fill", "green"); svgDocument.documentElement.appendChild(shape); } 148
  10. Chương 3. Cấu trúc định dạng tập tin SVG 3.19.5.4 Xóa một thành phần ra khỏi thành phần cha của nó function RemoveTaget(parentElement,targetElement) { parentElement.removeChild(targetElement); }; 3.19.5.5 Thiết lập thuộc tính sự kiện function changeColor(evt) { var target = evt.target; target.setAttributeNS(null, "fill", "purple"); } 3.19.5.6 Thiết lập bộ lắng nghe sự kiện var svgns = "http://www.w3.org/2000/svg"; function makeShape(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; var rect = svgDocument.createElementNS(svgns, "rect"); rect.setAttributeNS(null, "x", 5); rect.setAttributeNS(null, "y", 5); rect.setAttributeNS(null, "width", 40); rect.setAttributeNS(null, "height", 40); rect.setAttributeNS(null, "fill", "green"); rect.addEventListener("click", changeColor, 149
  11. Chương 3. Cấu trúc định dạng tập tin SVG false); svgDocument.documentElement.appendChild(rect); } 150
  12. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG Chương 4 Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 4.1 Các kĩ thuật và công nghệ 4.2 WMS Theo đặc tả của tổ chức OGC (Open Geospatial Consortium), WMS (Web Map Service) là một dịch vụ bản đồ Web . Nó phải có các khả năng sau: 1. Tạo bản đồ (là một ảnh , một chuỗi các thành phần ảnh, hay một tập gói dữ liệu tính năng địa lý) 2. Đáp ứng được các yêu cầu căn bản đối với nội dung của bản đồ, 3. Có khả năng cung cấp thông tin cho các chương trình khác biết về các loại bản đồ nó có thể tạo được và loại nào trong số đó có thể được truy vấn sâu hơn. Một WMS client là một ứng dụng hay một trình duyệt có thể gửi yêu cầu một WMS server như sau: 1. Để tạo bản đồ, các tham số URL cần chỉ định trong câu truy vấn : khu vực cần vẽ, hệ trục tọa độ được dùng, loại thông tin hiển thị, định dạng trả về, kích thước trả về, kiểu hiển thị, và các tham số khác. 2. Để yêu cầu nội dung bản đồ, các tham số URL cần chỉ rõ bản đồ được yêu cầu và vị trí được quan tâm trên bản đồ. 3. Đề yêu cầu về khả năng của WMS server, các tham số cần chỉ rõ phải chứa loại yêu cầu “capabilities”. Theo đặc tả WMS, một dịch vụ bản đồ web phải cài đặt các tác vụ sau: 151
  13. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 1. GetCapabilities (bắt buộc phải có): cung cấp thông tin về khả năng của WMS cho client. 2. GetMap (yêu cầu): cung cấp bản đồ địa lý phát sinh từ dữ liệu địa lý theo yêu cầu của client. 3. GetFeatureInfo (tùy chọn): cung cấp thông tin một vị trí địa lý trên bản đồ mà client yêu cầu. 4.3 WFS Theo đặc tả của OGC, WMS cho phép một client có thể nạp đè hình ảnh từ nhiều WMS trên Internet để hiển thị. Trong khi đó, WFS là một dịch vụ tính năng web cho phép một client có thể truy xuất và cập nhật dữ liệu địa lý được mã hoá bằng ngôn ngữ đánh dấu thông tin địa lý GML từ nhiều dịch vụ tính năng web WFS. Để biết thêm về GML xin tham khảo đặc tả GML tại: http://www.opengis.org/legal/ipr_faq.htm. Hình 4.1. Mô hình kiến trúc giao tiếp giữa client và WFS. Một WFS phải cài đặt các chức năng sau: 1. GetCapabilities : Mỗi WFS phải có khả năng mô tả các khả năng của mình. Cụ thể, một WFS phải chỉ rõ được loại tính năng nó có thể cung cấp và các tác vụ được hỗ trợ trên mỗi loại tính năng này. 152
  14. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 2. DescribleFeatureType: Mỗi WFS phải có khả năng mô tả cấu trúc của mỗi loại tính năng mà nó có thể cung cấp. 3. GetFeature: Mỗi WFS phải có khả năng xử lý các yêu cầu truy xuất các tính năng có thể kèm theo các ràng buộc được chỉ định trong câu truy vấn từ phía client. 4. GetGmlObject (tùy chọn): Mỗi WFS có thể xử lý các yêu cầu truy xuất các thành phần bằng cách lần theo các liên kết (Xlinks) tham chiếu tới XML IDS của thành phần đó. Một client có thể chỉ định có các XLinks được nhúng lồng trong dữ liệu thành phần nhận được từ WFS hay không. 5. Transaction: Mỗi WFS có thể xử lý các yêu cầu tác vụ giao dịch. Một yêu cầu giao dịch có thể có nhiều tác vụ, như các tác vụ tạo, cập nhật, và xóa trên các tính năng địa lý. 6. LockFeature: Mỗi WFS có thể xử lý các yêu cầu khoá một hay nhiều thể hiện của mỗi loại tính năng trong suốt quá trình giao dịch. Điều này đảm bảo các giao dịch được thực hiện theo trình tự không gây xung đột, sai lệch dữ liệu. Dựa trên các khả năng một WFS có thể cung cấp, ba loại WFS được định nghĩa như sau: 1. WFS căn bản (Basic WFS) : WFS này là một dịch vụ tính năng chỉ đọc, được cài đặt các khả năng GetCapabilities, DescribeFeatureType và GetFeature. 2. XLinkWFS : Ngoài các khả năng của WFS căn bản, loại WFS này còn hỗ trợ khả năng GetGmlObject. 3. WFS giao dịch (Transaction WFS) : Ngoài khả năng của một WFS cơ bản, nó phải cài đặt các tác vụ giao dịch và có thể có khả năng GetGmlObject và LockFeature. 153
  15. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 4.4 GEOSERVER Geoserver là một dịch vụ web viết bằng Java được xây dựng dựa trên đặc tả WFS và WMS do OGC đưa ra. Geoserver là một chương trình mã nguồn mở dưới giấy phép của GPL 2.0. Nó là sản phẩm được tạo bởi một đội ngũ toàn cầu các tổ chức và nhà phát triển tự do. Geoserver là một WFS giao dịch. Nó có tất cả các khả năng GetCapabilities, DescribeFeatures, GetFeatures, Transaction. Hiện tại đã có Geoserver-1.3. Mỗi phiên bản của Geoserver có hai bộ để cài đặt, một là tập tin .WAR và một là tập tin .EXE. Để có thể chạy được Geoserver cần phải cài bộ JDK1.4 (java virtualmachine) . Trong phạm vi chương trình ứng chúng em sử dụng Geosever-1.3.exe. Có một đặc điểm mới của Geoserver là phát sinh bản đồ SVG nhưng chưa có định kiểu. Dữ liệu thông tin địa lý được sử dụng cho Geoserver lấy từ ShapeFile, Oracle Spatial, ArcSDE. Geoserver được xây dựng trên thiết kế phân tầng như sau sơ đồ sau: 154
  16. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG Hình 4.2. Sơ đồ phân tầng của GeoServer 4.5 Kiến trúc ứng dụng Chương trình bản đồ điện tử thành phố và hỗ trợ tìm đường đi được xây dựng theo kiến trúc client-server. Cho phép người dùng xem bản đồ một cách mềm dẻo và tiện lợi, cho phép người có thể phóng to thu nhỏ bản đồ, cho phép người dùng tìm đường đi ngắn nhất và tra cứu thông tin đường đi. 155
  17. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG Hình 4.3. Sơ đồ kiến trúc ứng dụng 4.6 Client-side Client là nơi dùng để hiển thị, giao tiếp, và tương tác với người dùng. Bằng các đoạn script, client có thể nhận và xử lý một số tương tác ngay tại client như thao tác chọn vùng bản đồ quan tâm, chọn điểm đầu, điểm cuối khi tìm đường đi được tính toán và kiểm tra giá trị trước khi yêu cầu server xử lý sẽ làm thiểu bớt những xử lý không cần thiết phải làm phiền đến server. Client là nơi hiển thị bản đồ, bản đồ là một nội dung SVG nên cần phải có chương trình plug-in để hiển thị, đó là SVGViewer. 4.7 Server- side Server là nơi nhận và xử lý các yêu cầu của client. Các yêu cầu đó là : getMap (lấy bản đồ) theo một số ràng buộc về vùng bản đồ cần lấy, số tính năng cần lấy…, và getBestPath (tìm đường đi ngắn nhất)….Server sử dụng dịch vụ của GeoServer để tạo bản đồ và tra cứu thông tin của đối tượng địa lý. Server không dùng bản đồ SVG của GeoServer phát sinh vì nội dung SVG được phát sinh còn nghèo nàn về cách trình diễn và tương tác với người dùng, Server sẽ nhận dữ liệu GML trả về của Geoserver để tạo bản đồ SVG trả về cho Client. Để tìm đường đi ngắn nhất server sử dụng dịch vụ tìm đường đi ngắn nhất để phận chia công việc với server tạo bản 156
  18. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG đồ. Điều này sẽ làm cho công việc được sang sẻ và xử lý song song làm giảm được thời gian đợi cho client. Dịch vụ tìm đường đi dùng dữ liệu topo để tìm đường đi ngắn nhất vừa nhanh vừa dễ xây dựng. Môi trường cài đặt server là Visual Studio.Net ngôn ngữ sử dụng là C#. Server Reques t Client Service tìm đường Map, Path Bản đồ ASPX Requesst GML Geoserver Hình 4.4. Kiến trúc client-server được cài đặt 157
  19. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG 4.8 Sơ đồ tương tác chi tiết giữa client và server SQL SERVER Yêu cầu tìm đường đi Server Kết quả tìm đường Client Service tìm đường Tập tin SVG trả về Bản đồ ASPX Nhúng vào Requesst GML Yêu cầu một tập tin .svg Geoserver 1.3 Adobe SVG Viewer plugin *.shp *.dbf MySQL Server 4.1 Tập tin hình học (shape file) *.frm *.myd, *.myi Tập tin MySQL Hình 4.5. Kiến trúc chi tiết client-server được cài đặt 158
  20. Chương 4. Giải pháp cho vấn đề phát triển ứng dụng bản đồ dựa trên đồ họa véc-tơ SVG Phần sau đây sẽ mô tả chi tiết kiến trúc trong hình trên. 4.8.1 Mô tả chi tiết client 4.8.1.1 Vấn đề hiển thị nội dung SVG ở phía client Client được cài đặt trong đề tài này là một trình duyệt. Trình duyệt Web này được viết bằng trang ngôn ngữ HTML kết hợp với Javascript. Khi mở trang web của ứng dụng lần đầu tiên trong một phiên làm việc trên máy tính, client sẽ gửi một yêu cầu đến server để lấy bản đồ .svg. Khi đã nhận được tập tin .svg này từ server, trang Web ở phía client sẽ tự động cập nhật nội dung tập tin .svg này vào trong cửa sổ trình duyệt. Bộ hiển thị SVG (SVG Viewer) sẽ tự động xây dựng lại phần khung trong chứa thẻ ‘svg’ cửa sổ trình duyệt. Câu lệnh yêu cầu tập tin .svg Client http://169.254.131.98:port/GetSVG Server Tập tin .svg Hình 4.6 Minh họa yêu cầu hiển thị nội dung ở phía client 4.8.1.2 Vấn đề tương tác với nội dung SVG ở phía client SVG có một đặc tính là định dạng véc-tơ được thiết kế sao cho các thành phần bên trong nội dung có thể tương tác trực tiếp với người sử dụng thông qua cây phân cấp DOM (Document Object Model) (Mô hình đối tượng tài liệu). Phía client sẽ tận dụng đặc tính này của SVG để đơn giản hóa việc xử lý thao tác. Mỗi thành phần sẽ giao tiếp với người sử dụng. Khi người sử dụng nhấn chuột lên một thành phần (chẳng hạn như một con đường) thì thành phần đó sẽ tự động phát sinh một sự kiện và gửi lên nút trên cùng trong cây phân cấp DOM 159
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2