Cách viết chính xác biểu đồ động trong php. Chúng tôi làm việc với sơ đồ. Sơ đồ kết nối là gì

Mọi lập trình viên web đều phải làm việc với hình ảnh - có rất ít trang web hoàn toàn dựa trên văn bản trên Internet. Cách dễ nhất để đặt hình ảnh trên một trang là lưu nó vào một tệp và đặt thẻ thích hợp vào tệp HTML. Một trong những nhược điểm rõ ràng của phương pháp này là hình ảnh trong tệp không thay đổi theo bất kỳ cách nào, để người dùng xem hình ảnh khác, quản trị trang web cần mở biên tập đồ họa, thực hiện các thay đổi và lưu chúng. Trong bài viết này tôi sẽ nói về việc tạo hình ảnh động bằng ngôn ngữ lập trình web PHP.

Đầu tiên là vài lời dành cho những ai chưa biết về PHP. Đó là ngôn ngữ kịch bản chạy ở phía máy chủ để tạo các trang web động. Một chương trình PHP, giống như văn bản trong JavaScript, VBScript hoặc ASP, được chèn vào tệp HTML hoặc được lưu trong một tệp riêng biệt có phần mở rộng thích hợp. Phần đầu và phần cuối của chương trình được đánh dấu bằng các thẻ đặc biệt. Văn bản bên ngoài những điều này Dấu ngoặc PHP không diễn giải, nó sẽ được chuyển tới trình duyệt web “nguyên trạng”. Cú pháp PHP Nó được mô tả chi tiết trong sách hướng dẫn đi kèm trong gói (bạn cũng có thể tải xuống từ trang web http://www.php.net).
Nguyên tắc làm việc với hình ảnh là thế này: một chương trình PHP (hay đúng hơn là trình thông dịch PHP chạy ở phía máy chủ) tạo ra một hình ảnh một cách nhanh chóng và chuyển nó sang trình duyệt ở định dạng đồ họa được yêu cầu.
Để tận dụng khả năng làm việc với hình ảnh của PHP, bạn cần cài đặt thư viện GD trên hệ thống. Nếu bạn làm việc với Linux thì thư viện này đã được cài đặt sẵn. Nếu không, nó có thể được tìm thấy tại http://www.boutell.com/gd. Nếu bạn đang dùng Windows, cách tốt nhất là truy cập http://php.weblogs.com/easywindows. Tại đây bạn có thể tải xuống thư viện php_gd, thư viện này sẽ cho phép bạn tận hưởng tất cả những điều thú vị khi làm việc với đồ họa trong PHP. Nếu bạn định sử dụng phông chữ TrueType trong hình ảnh của mình, bạn sẽ cần thư viện FreeType (http://www.freetype.org).
Đôi lời về thư viện GD được hỗ trợ định dạng đồ họa. Các phiên bản cũ hơn 1.6 hỗ trợ định dạng GIF và JPEG. Các phiên bản mới hơn cho phép bạn làm việc với JPEG và PNG. Bắt đầu từ phiên bản 1.6, định dạng GIF không được hỗ trợ trong GD. Điều này là do Unisys sở hữu mọi quyền đối với thuật toán nén LZW được sử dụng ở định dạng này.

Vì vậy, hệ thống đã được cấu hình, tất cả các thư viện cần thiết đã được cài đặt. Đầu tiên, hãy tạo một số hình ảnh đơn giản:

Lưu văn bản dưới dạng tệp có phần mở rộng .php và xem nó bằng trình duyệt. Nếu bạn đã làm mọi thứ một cách chính xác, bạn sẽ thấy những gì được hiển thị trong Hình 1.

bức tranh 1

Hãy xem xét mã của tập lệnh của chúng tôi chi tiết hơn. Ở dòng đầu tiên, tập lệnh cho trình duyệt biết thông tin về loại dữ liệu được truyền bằng tiêu đề HTTP. Trong ví dụ của chúng tôi, loại “hình ảnh/gif” được xác định trước được sử dụng, có nghĩa là hình ảnh trong định dạng GIF. Bạn phải luôn chuyển tiêu đề thích hợp tới trình duyệt. Vì định dạng JPEG và PNG dòng đầu tiên trông khác:

Header(“Content-Type: image/jpeg”);
Header(“Content-Type: image/png”);

Lưu ý rằng tiêu đề “Loại nội dung” chỉ được truyền một lần cho mỗi trang, vì vậy mã PHP để tạo hình ảnh phải được đặt trong tập tin riêng biệt. Nhân tiện, việc đặt đồ họa động cùng với mã HTML chỉ có thể thực hiện được khi sử dụng cơ chế SSI (Bao gồm phía máy chủ), cơ chế mà chúng ta sẽ nói đến sau.
Tạo đồ họa trong PHP bao gồm bốn bước:

tạo một bộ mô tả hình ảnh;

đăng ký màu sắc được sử dụng;

vẽ bằng các hàm được xác định trước;

Và Giai đoạn cuối cùng– tạo một hình ảnh và gửi nó đến trình duyệt.

Trong ví dụ của chúng tôi, giai đoạn đầu tiên trông như thế này:

$image = ImageCreate(500, 75);

Ở đây, hàm ImageCreate() tạo một image handler và gán nó cho biến $image. Hàm này được gọi với hai tham số – chiều cao và chiều rộng của hình ảnh. Theo mặc định, hình ảnh được tô màu đen. Giai đoạn tiếp theo là màu sắc:

Tất cả các màu được sử dụng trong hình ảnh phải được đăng ký. Để thực hiện việc này, hãy sử dụng hàm ImageColorAllocate(); các tham số của nó là bộ mô tả hình ảnh và mã hóa màu RGB. Mỗi màu được gán cho một biến, sau đó được chuyển đến các hàm vẽ.
Hầu như không đáng để liệt kê tất cả các chức năng của bản vẽ. Hãy để tôi chỉ nói rằng có khá nhiều trong số chúng: bạn có thể tô màu vào hình ảnh, vẽ số liệu khác nhau, làm cho bản vẽ trở nên trong suốt, v.v. Hãy xem xét một số trong số chúng trong thực tế và bạn có thể tìm hiểu về phần còn lại từ tài liệu.
Trong ví dụ đầu tiên, chúng ta "tô" màu xanh lam vào hình ảnh bằng cách sử dụng hàm

Điền hình ảnh:
ImageFill($image, 1, 1, $blue);

Tham số thứ hai và thứ ba là tọa độ của điểm bắt đầu điền. Gốc tọa độ nằm ở bên trái góc trên cùng Hình ảnh. Do đó, tọa độ (500, 75) xác định góc dưới bên phải của hình ảnh từ ví dụ đầu tiên.
Bây giờ bạn cần chuyển bản vẽ đã hoàn thành sang trình duyệt. Hàm ImageGIF() thực hiện việc này; tham số duy nhất của nó là phần xử lý hình ảnh. Đối với các định dạng JPEG và PNG, hãy sử dụng các hàm ImageJPEG() và ImagePNG() tương ứng. Để giải phóng bộ nhớ được cấp phát cho hình ảnh, ở cuối tập lệnh bạn cần gọi hàm ImageDestroy().

Hãy xem xét một khả năng khác: hãy thử viết điều gì đó lên bản vẽ. tôi sẽ mang theo ví dụ nhỏ, sau đó tôi sẽ giải thích cơ chế làm việc với văn bản:

Kết quả chạy script được thể hiện trong Hình 2.

Hình 2

Hàm itrings() thực sự xuất ra văn bản. Các tham số của nó là bộ mô tả hình ảnh, số phông chữ, tọa độ điểm đầu ra của hình ảnh, dòng văn bản và màu sắc. Bạn có thể sử dụng một trong năm phông chữ có kích thước cố định được xác định trước. Chúng được đánh số từ 1 (nhỏ nhất) đến 5 (lớn nhất).
Ví dụ sau đây là nơi cuộc vui bắt đầu: hình ảnh được tạo động dựa trên thông tin đầu vào của người dùng. Hãy tạo một tệp HTML đơn giản có biểu mẫu (Hình 3).

hình 3

Đây là mã của anh ấy:

Nhập tên của bạn:

Bây giờ hãy tạo tệp example3.php sau:

Hình ảnh sẽ chứa văn bản đã nhập (Hình 4).

hinh 4

Tôi sẽ nói đôi lời về các chức năng khác từ thư viện GD được thiết kế để làm việc với văn bản. itringUp() hiển thị văn bản theo chiều dọc; ImageChar() và ImageCharUp() xuất ra một ký tự đơn; ImageFontHeight() và ImageFontWidth() trả về chiều cao và chiều rộng của phông chữ. Hai hàm cuối cùng được sử dụng trong ví dụ sau, trong đó một dòng văn bản được gạch chân bằng một dòng (hàm ImageLine vẽ các đường tại tọa độ đã cho):

Kết quả của tập lệnh được hiển thị trong Hình 5.

Hình 5

Đương nhiên, ngoài đường nét, bạn có thể vẽ các hình dạng khác bằng GD. Trong ví dụ sau, chúng ta sẽ sử dụng hàm ImageFilledRectangle() để hiển thị cờ Pháp trong cửa sổ trình duyệt. Chức năng này được thiết kế để vẽ đầy một màu nhất định hình chữ nhật. Đầu tiên, hãy tô toàn bộ bản vẽ bằng màu trắng, sau đó vẽ các hình chữ nhật màu đỏ và xanh lam:

Trong Hình 6 bạn có thể thấy kết quả công việc của chúng tôi.

Hình 6

PHP cho phép bạn vẽ các loại đa giác khác. Có một hàm gọi là ImagePolygon() cho mục đích này. Ví dụ sau hiển thị một hình ngũ giác. Là tham số (ngoại trừ bộ mô tả hình ảnh và màu đường), hàm này được truyền các thông tin sau: số đỉnh (trong trường hợp của chúng tôi là năm) và một mảng tọa độ của các điểm là đỉnh. Kết quả của tập lệnh được hiển thị trong Hình 7.

hình 7

Tập lệnh tương tự sử dụng một chức năng khác chưa được đề cập trước đó - ImageFillToBorder(). Nó được sử dụng để lấp đầy một khu vực được giới hạn bởi một màu cụ thể (trong trường hợp của chúng tôi là đường màu xanh lam của đa giác).
Hàm ImageArc() có thể vẽ vòng cung và vòng tròn. Hãy để tôi cho bạn một ví dụ nhỏ (xem Hình 8):

hình 8

Bằng cách thay đổi giá trị của biến $width và $height, bạn có thể vẽ hình bầu dục và bằng cách thay đổi các góc, bạn có thể hiển thị nhiều loại cung khác nhau.

Thư viện GD cho phép bạn không chỉ vẽ tranh mà còn sử dụng những bức tranh làm sẵn. Hãy xem xét một tình huống rất thực tế: nhà thiết kế nội bộ của công ty bạn đã phát triển vẻ bề ngoài các nút cho một trang web nhất định và bạn cần đặt trên trang một số nút có cùng thiết kế và chú thích cho chúng.
Thư viện GD bao gồm các hàm như ImageCreateFromGIF(), ImageCreateFromJPEG() và ImageCreateFromPNG(). Chúng sẽ giúp ích trong trường hợp bạn cần tạo hình ảnh mới dựa trên hình ảnh hiện có. Chúng ta hãy có một tập tin Button.gif (Hình 9), trong đó có một thiết kế nút khéo léo cho trang web. Dưới đây là mã PHP tạo các nút tạo sẵn dựa trên tệp này. Lưu ý cách sử dụng kích thước của nút, phông chữ và dòng văn bản để tính tọa độ vị trí của các tiêu đề. Ở đây, giá trị của biến $caption được lấy làm chú thích cho nút, được truyền tới tập lệnh từ bên ngoài:

hình 9

Hàm iX() và iY() lần lượt trả về chiều rộng và chiều cao của hình ảnh. Ngoài ra còn có hàm Getiize() có thể được sử dụng để xác định kích thước và loại hình ảnh.
Bản thân đoạn script trên không có nhiều giá trị thực tế nhưng nó có thể được sử dụng trong bất kỳ trang HTML nào thông qua SSI hoặc như được mô tả trong đoạn mã sau:

Chúng tôi đã xem xét lựa chọn đơn giản nhất để xây dựng biểu đồ. Tôi đã biết trước số ngày và số lượng người dùng tối đa. Đó là lý do tại sao tôi đã tự mình chọn tỷ lệ của biểu đồ. Nhưng thông thường dữ liệu này có thể khác nhau và cần phải tính toán thang đo. Và bản thân biểu đồ trông hơi khác một chút. Chúng ta đã quen với việc các trục tọa độ bắt đầu từ số 0. Nhưng để dễ hiển thị, quy tắc này đôi khi không được tuân thủ. Trục x không bắt đầu từ 0 mà từ 1, do đó không có bên trái của đường thẳng khoảng trống. Và trục y được hiển thị sao cho tất cả các giá trị đều khớp trên biểu đồ. Ví dụ: nếu giá trị tối thiểu là 60 và giá trị tối đa là 70 thì trục y chứa phạm vi đó. Hãy xem xét việc tạo một biểu đồ như vậy.

Trong ví dụ, trục x dài 570 pixel. Nó cần được chia thành các phần bằng nhau cho mỗi ngày. Trục x không bắt đầu từ 0 mà bắt đầu từ 1. Do đó, sẽ không có đoạn nào nằm giữa 0 và 1 và số đoạn sẽ ít đi 1. Nếu có 5 ngày thì bạn nhận được 4 phân đoạn. Công thức tính độ dài của một đoạn là:

chiều dài = chiều dài trục / (số ngày - 1)

Số có thể là phân số nên kết quả phải được làm tròn xuống.

570 - 50 là độ dài trục x. Nó phụ thuộc vào kích thước của hình ảnh.

Chúng tôi tạo trục y sao cho tất cả các giá trị đều phù hợp. Bạn cần lấy giá trị tối thiểu và tối đa. Chúng sẽ chiếm toàn bộ chiều cao của biểu đồ. Biết được phạm vi, chúng ta có thể tính toán số lượng pixel tương ứng với một người dùng trên biểu đồ.

phạm vi = tối đa - tối thiểu

chiều dài = chiều dài trục/phạm vi

Số kết quả cũng cần được làm tròn.