Gambar objek grafis

Telusuri sampel

Grafik .NET Multi-platform App UI (.NET MAUI), di Microsoft.Maui.Graphics namespace, memungkinkan Anda menggambar objek grafis pada kanvas yang didefinisikan sebagai ICanvas objek.

Kontrol MAUI GraphicsView .NET menyediakan akses ke ICanvas objek, di mana properti dapat diatur dan metode yang dipanggil untuk menggambar objek grafis. Untuk informasi selengkapnya tentang GraphicsView, lihat GraphicsView.

Catatan

Banyak objek grafis memiliki Draw metode dan Fill , misalnya DrawRectangle dan FillRectangle. Metode Draw menggambar kerangka bentuk, yang tidak terisi. Metode Fill menggambar kerangka bentuk dan juga mengisinya.

Objek grafis digambar menggunakan ICanvas unit independen perangkat yang dikenali oleh setiap platform. Ini memastikan bahwa objek grafis diskalakan dengan tepat ke kepadatan piksel platform yang mendasar.

Gambar garis

Garis dapat digambar pada ICanvas menggunakan DrawLine metode , yang memerlukan empat float argumen yang mewakili titik awal dan akhir baris.

Contoh berikut menunjukkan cara menggambar garis:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 6;
canvas.DrawLine(10, 10, 90, 100);

Dalam contoh ini, garis diagonal merah digambar dari (10.10) hingga (90.100):

Catatan

Ada juga DrawLine kelebihan beban yang mengambil dua PointF argumen.

Contoh berikut menunjukkan cara menggambar garis putus-putus:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 2, 2 };
canvas.DrawLine(10, 10, 90, 100);

Dalam contoh ini, garis diagonal putus-putus merah digambar dari (10.10) hingga (90.100):

Untuk informasi selengkapnya tentang garis putus-putus, lihat Menggambar objek putus-putus.

Gambar elips

Elipsis dan lingkaran dapat digambar pada ICanvas menggunakan metode , yang memerlukan xargumen , , ywidth, dan height , dari jenis floatDrawEllipse .

Contoh berikut menunjukkan cara menggambar elips:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.DrawEllipse(10, 10, 100, 50);

Dalam contoh ini, elips merah dengan dimensi 100x50 digambar pada (10,10):

Untuk menggambar lingkaran, buat width argumen dan height ke metode yang DrawEllipse sama:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.DrawEllipse(10, 10, 100, 100);

Dalam contoh ini, lingkaran merah dengan dimensi 100x100 digambar pada (10.10):

Catatan

Lingkaran juga dapat digambar dengan DrawCircle metode .

Untuk informasi tentang menggambar elips putus-putus, lihat Menggambar objek putus-putus.

Elips yang diisi dapat digambar dengan FillEllipse metode , yang juga memerlukan xargumen , , ywidth, dan height , dari jenis float:

canvas.FillColor = Colors.Red;
canvas.FillEllipse(10, 10, 150, 50);

Dalam contoh ini, elips yang diisi merah dengan dimensi 150x50 digambar pada (10,10):

Properti FillColorICanvas objek harus diatur ke Color sebelum memanggil FillEllipse metode .

Lingkaran yang diisi juga dapat digambar dengan FillCircle metode .

Catatan

Ada DrawEllipse dan FillEllipse kelebihan beban yang mengambil Rect dan RectF argumen. Selain itu, ada juga DrawCircle dan FillCircle kelebihan beban.

Gambar persegi panjang

Persegi panjang dan kuadrat dapat digambar pada ICanvas menggunakan metode , yang memerlukan xargumen , , ywidth, dan height , dari jenis floatDrawRectangle .

Contoh berikut menunjukkan cara menggambar persegi:

canvas.StrokeColor = Colors.DarkBlue;
canvas.StrokeSize = 4;
canvas.DrawRectangle(10, 10, 100, 50);

Dalam contoh ini, persegi panjang biru tua dengan dimensi 100x50 digambar pada (10,10):

Untuk menggambar persegi, buat width argumen dan height ke metode yang DrawRectangle sama:

canvas.StrokeColor = Colors.DarkBlue;
canvas.StrokeSize = 4;
canvas.DrawRectangle(10, 10, 100, 100);

Dalam contoh ini, persegi biru tua dengan dimensi 100x100 digambar pada (10,10):

Untuk informasi tentang menggambar persegi panjang putus-putus, lihat Menggambar objek putus-putus.

Persegi panjang yang diisi dapat digambar dengan FillRectangle metode , yang juga memerlukan xargumen , , ywidth, dan height , dari jenis float:

canvas.FillColor = Colors.DarkBlue;
canvas.FillRectangle(10, 10, 100, 50);

Dalam contoh ini, persegi panjang berwarna biru tua dengan dimensi 100x50 digambar pada (10,10):

Properti FillColorICanvas objek harus diatur ke Color sebelum memanggil FillRectangle metode .

Catatan

Ada DrawRectangle dan FillRectangle kelebihan beban yang mengambil Rect dan RectF argumen.

Gambar persegi panjang bulat

Persegi panjang dan kuadrat bulat dapat digambar pada ICanvas menggunakan metode , yang memerlukan xargumen , , ywidth, height, dan cornerRadius , dan , dari jenis floatDrawRoundedRectangle . Argumen cornerRadius menentukan radius yang digunakan untuk membulatkan sudut persegi panjang.

Contoh berikut menunjukkan cara menggambar persegi panjang bulat:

canvas.StrokeColor = Colors.Green;
canvas.StrokeSize = 4;
canvas.DrawRoundedRectangle(10, 10, 100, 50, 12);

Dalam contoh ini, persegi panjang hijau dengan sudut dan dimensi bulat 100x50 digambar pada (10,10):

Untuk informasi tentang menggambar persegi panjang bulat putus-putus, lihat Menggambar objek putus-putus.

Persegi panjang bulat yang diisi dapat digambar dengan FillRoundedRectangle metode , yang juga memerlukan xargumen , , ywidth, height, dan cornerRadius , dari jenis float:

canvas.FillColor = Colors.Green;
canvas.FillRoundedRectangle(10, 10, 100, 50, 12);

Dalam contoh ini, persegi panjang yang diisi hijau dengan sudut bulat dan dimensi 100x50 digambar pada (10,10):

Properti FillColorICanvas objek harus diatur ke Color sebelum memanggil FillRoundedRectangle metode .

Catatan

Ada DrawRoundedRectangle dan FillRoundedRectangle kelebihan beban yang mengambil Rect dan RectF argumen, dan kelebihan beban yang memungkinkan radius setiap sudut ditentukan secara terpisah.

Menggambar busur

Busur dapat digambar pada ICanvas menggunakan DrawArc metode , yang memerlukan x, , widthy, height, startAngle, dan endAngle argumen jenis float, dan clockwise argumen closed jenis bool. Argumen startAngle menentukan sudut dari sumbu x ke titik awal busur. Argumen endAngle menentukan sudut dari sumbu x ke titik akhir busur. Argumen clockwise menentukan arah di mana busur digambar, dan closed argumen menentukan apakah titik akhir busur akan disambungkan ke titik awal.

Contoh berikut menunjukkan cara menggambar busur:

canvas.StrokeColor = Colors.Teal;
canvas.StrokeSize = 4;
canvas.DrawArc(10, 10, 100, 100, 0, 180, true, false);

Dalam contoh ini, busur kecil dimensi 100x100 digambar pada (10.10). Busur digambar dalam arah searah jarang dari 0 derajat hingga 180 derajat, dan tidak ditutup:

Untuk informasi tentang menggambar busur putus-putus, lihat Menggambar objek putus-putus.

Busur yang diisi dapat digambar dengan FillArc metode , yang memerlukan x, , widthy, height, startAngle, dan endAngle argumen jenis float, dan clockwise argumen jenis bool:

canvas.FillColor = Colors.Teal;
canvas.FillArc(10, 10, 100, 100, 0, 180, true);

Dalam contoh ini, busur teal berisi dimensi 100x100 digambar pada (10,10). Busur digambar dalam arah searah jarang dari 0 derajat hingga 180 derajat, dan ditutup secara otomatis:

Properti FillColorICanvas objek harus diatur ke Color sebelum memanggil FillArc metode .

Catatan

Ada DrawArc dan FillArc kelebihan beban yang mengambil Rect dan RectF argumen.

Menggambar jalur

Jalur adalah kumpulan satu atau beberapa kontur. Setiap kontur adalah kumpulan garis lurus dan kurva yang terhubung . Kontur tidak terhubung satu sama lain tetapi mungkin tumpang tindih secara visual. Terkadang satu kontur dapat tumpang tindih sendiri.

Jalur digunakan untuk menggambar kurva dan bentuk kompleks dan dapat digambar pada ICanvas menggunakan DrawPath metode , yang memerlukan PathF argumen.

Kontur umumnya dimulai dengan panggilan ke PathF.MoveTo metode , yang dapat Anda ekspreskan baik sebagai PointF nilai atau sebagai terpisah x dan y koordinat. Panggilan MoveTo menetapkan titik di awal kontur dan titik awal saat ini. Anda kemudian dapat memanggil metode berikut untuk melanjutkan kontur dengan garis atau kurva dari titik saat ini ke titik yang ditentukan dalam metode , yang kemudian menjadi titik baru saat ini:

• LineTo untuk menambahkan garis lurus ke jalur.
• AddArc untuk menambahkan busur, yang merupakan garis pada lingkar lingkaran atau elips.
• CurveTo untuk menambahkan spline Bezier kubik.
• QuadTo untuk menambahkan spline Bezier kuadrat.

Tidak satu pun dari metode ini berisi semua data yang diperlukan untuk menjelaskan garis atau kurva. Sebaliknya, setiap metode bekerja dengan titik saat ini yang ditetapkan oleh panggilan metode segera mendahuluinya. Misalnya, LineTo metode menambahkan garis lurus ke kontur berdasarkan titik saat ini.

Kontur berakhir dengan panggilan lain ke MoveTo, yang memulai kontur baru, atau panggilan ke Close, yang menutup kontur. Metode ini Close secara otomatis menambahkan garis lurus dari titik saat ini ke titik pertama kontur, dan menandai jalur sebagai tertutup.

Kelas ini PathF juga mendefinisikan metode dan properti lainnya. Metode berikut menambahkan seluruh kontur ke jalur:

• AppendEllipse menambahkan kontur elips tertutup ke jalur.
• AppendCircle menambahkan kontur lingkaran tertutup ke jalur.
• AppendRectangle menambahkan kontur persegi panjang tertutup ke jalur.
• AppendRoundedRectangle menambahkan persegi panjang tertutup dengan sudut bulat ke jalur.

Contoh berikut menunjukkan cara menggambar jalur:

PathF path = new PathF();
path.MoveTo(40, 10);
path.LineTo(70, 80);
path.LineTo(10, 50);
path.Close();
canvas.StrokeColor = Colors.Green;
canvas.StrokeSize = 6;
canvas.DrawPath(path);

Dalam contoh ini, segitiga hijau tertutup digambar:

Jalur yang diisi dapat digambar dengan FillPath, yang juga memerlukan PathF argumen:

PathF path = new PathF();
path.MoveTo(40, 10);
path.LineTo(70, 80);
path.LineTo(10, 50);
canvas.FillColor = Colors.SlateBlue;
canvas.FillPath(path);

Dalam contoh ini, segitiga biru slate yang diisi digambar:

Properti FillColorICanvas objek harus diatur ke Color sebelum memanggil FillPath metode .

Penting

Metode FillPath ini memiliki kelebihan beban yang memungkinkan WindingMode untuk ditentukan, yang mengatur algoritma isian yang digunakan. Untuk informasi selengkapnya, lihat Mode berliku.

Menggambar gambar

Gambar dapat digambar pada ICanvas menggunakan metode , yang memerlukan IImage argumen, dan xargumen , , ywidth, dan , dan height , dari jenis floatDrawImage .

Contoh berikut menunjukkan cara memuat gambar dan menggambarnya ke kanvas:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

Dalam contoh ini, gambar diambil dari rakitan dan dimuat sebagai aliran. Kemudian digambar pada ukuran aktual pada (10,10):

Penting

Memuat gambar yang disematkan dalam rakitan mengharuskan gambar untuk mengatur tindakan build-nya ke Sumber Daya Tersemat daripada MauiImage.

Menggambar string

String dapat digambar menggunakan ICanvas salah DrawString satu kelebihan beban. Tampilan setiap string dapat didefinisikan dengan mengatur Fontproperti , FontColor, dan FontSize . Perataan string dapat ditentukan oleh opsi perataan horizontal dan vertikal yang melakukan perataan dalam kotak pembatas string.

Catatan

Kotak pembatas untuk string ditentukan oleh xargumen , , ywidth, dan height .

Contoh berikut menunjukkan cara menggambar string:

canvas.FontColor = Colors.Blue;
canvas.FontSize = 18;

canvas.Font = Font.Default;
canvas.DrawString("Text is left aligned.", 20, 20, 380, 100, HorizontalAlignment.Left, VerticalAlignment.Top);
canvas.DrawString("Text is centered.", 20, 60, 380, 100, HorizontalAlignment.Center, VerticalAlignment.Top);
canvas.DrawString("Text is right aligned.", 20, 100, 380, 100, HorizontalAlignment.Right, VerticalAlignment.Top);

canvas.Font = Font.DefaultBold;
canvas.DrawString("This text is displayed using the bold system font.", 20, 140, 350, 100, HorizontalAlignment.Left, VerticalAlignment.Top);

canvas.Font = new Font("Arial");
canvas.FontColor = Colors.Black;
canvas.SetShadow(new SizeF(6, 6), 4, Colors.Gray);
canvas.DrawString("This text has a shadow.", 20, 200, 300, 100, HorizontalAlignment.Left, VerticalAlignment.Top);

Dalam contoh ini, string dengan opsi tampilan dan perataan yang berbeda ditampilkan:

Catatan

Kelebihan DrawString beban juga memungkinkan pemotongan dan penspasian baris untuk ditentukan.

Untuk informasi tentang menggambar bayangan, lihat Menggambar bayangan.

Gambar teks yang diatribusikan

Teks yang dikaitkan dapat digambar pada ICanvas menggunakan metode , yang memerlukan IAttributedText argumen, dan xargumen , , widthy, dan , dan height , dari jenis floatDrawText . Teks yang dikaitkan adalah string dengan atribut terkait untuk bagian teksnya, yang biasanya mewakili data gaya.

Contoh berikut menunjukkan cara menggambar teks yang dikaitkan:

using Microsoft.Maui.Graphics.Text;
...

canvas.Font = new Font("Arial");
canvas.FontSize = 18;
canvas.FontColor = Colors.Blue;

string markdownText = @"This is *italic text*, **bold text**, __underline text__, and ***bold italic text***.";
IAttributedText attributedText = MarkdownAttributedTextReader.Read(markdownText); // Requires the Microsoft.Maui.Graphics.Text.Markdig package
canvas.DrawText(attributedText, 10, 10, 400, 400);

Dalam contoh ini, markdown dikonversi ke teks atribut dan ditampilkan dengan gaya yang benar:

Penting

Menggambar teks yang diatribusikan mengharuskan Anda untuk menambahkan Microsoft.Maui.Graphics.Text.Markdig paket NuGet ke proyek Anda.

Gambar dengan isian dan goresan

Objek grafis dengan isian dan goresan dapat digambar ke kanvas dengan memanggil metode gambar setelah metode pengisian. Misalnya, untuk menggambar persegi panjang yang diuraikan, atur FillColor properti dan StrokeColor ke warna, lalu panggil FillRectangle metode diikuti dengan DrawRectangle metode .

Contoh berikut menggambar lingkaran yang diisi, dengan kerangka goresan, sebagai jalur:

float radius = Math.Min(dirtyRect.Width, dirtyRect.Height) / 4;

PathF path = new PathF();
path.AppendCircle(dirtyRect.Center.X, dirtyRect.Center.Y, radius);

canvas.StrokeColor = Colors.Blue;
canvas.StrokeSize = 10;
canvas.FillColor = Colors.Red;

canvas.FillPath(path);
canvas.DrawPath(path);

Dalam contoh ini, warna goresan dan isi untuk PathF objek ditentukan. Lingkaran yang diisi digambar, lalu goresan kerangka lingkaran:

Peringatan

Memanggil metode gambar sebelum metode pengisian akan mengakibatkan z-order yang salah. Isi akan ditarik di atas goresan, dan goresan tidak akan terlihat.

Gambar bayangan

Objek grafis yang digambar pada ICanvas bisa memiliki bayangan yang diterapkan menggunakan SetShadow metode , yang mengambil argumen berikut:

• offset, dari jenis SizeF, menentukan offset untuk bayangan, yang mewakili posisi sumber cahaya yang membuat bayangan.
• blur, dari jenis float, mewakili jumlah kabur untuk diterapkan ke bayangan.
• color, dari jenis Color, mendefinisikan warna bayangan.

Contoh berikut menunjukkan cara menambahkan bayangan ke objek yang diisi:

canvas.FillColor = Colors.Red;
canvas.SetShadow(new SizeF(10, 10), 4, Colors.Grey);
canvas.FillRectangle(10, 10, 90, 100);

canvas.FillColor = Colors.Green;
canvas.SetShadow(new SizeF(10, -10), 4, Colors.Grey);
canvas.FillEllipse(110, 10, 90, 100);

canvas.FillColor = Colors.Blue;
canvas.SetShadow(new SizeF(-10, 10), 4, Colors.Grey);
canvas.FillRoundedRectangle(210, 10, 90, 100, 25);

Dalam contoh ini, bayangan yang sumber cahayanya berada dalam posisi yang berbeda ditambahkan ke objek yang diisi, dengan jumlah kabur yang identik:

Gambar objek putus-putus

ICanvas objek memiliki StrokeDashPattern properti, berjenis float[]. Properti ini adalah array float nilai yang menunjukkan pola tanda hubung dan celah yang akan digunakan saat menggambar goresan untuk objek. Masing-masing float dalam array menentukan panjang tanda hubung atau celah. Item pertama dalam array menentukan panjang tanda hubung, sedangkan item kedua dalam array menentukan panjang celah. Oleh karena itu, float nilai dengan nilai indeks genap menentukan tanda hubung, sementara float nilai dengan nilai indeks ganjil menentukan celah.

Contoh berikut menunjukkan cara menggambar persegi putus-putus, menggunakan garis putus-putus biasa:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 2, 2 };
canvas.DrawRectangle(10, 10, 90, 100);

Dalam contoh ini, persegi dengan goresan putus-putus biasa digambar:

Contoh berikut menunjukkan cara menggambar persegi putus-putus, menggunakan garis putus-putus yang tidak teratur:

canvas.StrokeColor = Colors.Red;
canvas.StrokeSize = 4;
canvas.StrokeDashPattern = new float[] { 4, 4, 1, 4 };
canvas.DrawRectangle(10, 10, 90, 100);

Dalam contoh ini, persegi dengan goresan putus-putus tidak teratur digambar:

Garis kontrol berakhir

Garis memiliki tiga bagian: tutup awal, isi garis, dan tutup akhir. Batas awal dan akhir menjelaskan awal dan akhir baris.

ICanvas objek memiliki StrokeLineCap properti, jenis LineCap, yang menjelaskan awal dan akhir baris. Enumerasi LineCap menentukan anggota berikut:

• Butt, yang mewakili garis dengan ujung persegi, digambar untuk meluas ke titik akhir garis yang tepat. Ini adalah nilai StrokeLineCap default properti.
• Round, yang mewakili garis dengan ujung bulat.
• Square, yang mewakili garis dengan ujung persegi, digambar untuk meluas di luar titik akhir ke jarak yang sama dengan setengah lebar garis.

Contoh berikut menunjukkan cara mengatur StrokeLineCap properti:

canvas.StrokeSize = 10;
canvas.StrokeColor = Colors.Red;
canvas.StrokeLineCap = LineCap.Round;
canvas.DrawLine(10, 10, 110, 110);

Dalam contoh ini, garis merah dibulatkan di awal dan akhir baris:

Gabungan baris kontrol

ICanvas objek memiliki StrokeLineJoin properti, jenis LineJoin, yang menentukan jenis gabungan yang digunakan pada simpul objek. Enumerasi LineJoin menentukan anggota berikut:

• Miter, yang mewakili simpul sudut yang menghasilkan sudut tajam atau terpotong. Ini adalah nilai StrokeLineJoin default properti.
• Round, yang mewakili simpul bulat yang menghasilkan busur melingkar di sudut.
• Bevel, yang mewakili simpul miring yang menghasilkan sudut diagonal.

Catatan

StrokeLineJoin Ketika properti diatur ke Miter, MiterLimit properti dapat diatur ke float untuk membatasi panjang miter gabungan garis dalam objek.

Contoh berikut menunjukkan cara mengatur StrokeLineJoin properti:

PathF path = new PathF();
path.MoveTo(10, 10);
path.LineTo(110, 50);
path.LineTo(10, 110);

canvas.StrokeSize = 20;
canvas.StrokeColor = Colors.Blue;
canvas.StrokeLineJoin = LineJoin.Round;
canvas.DrawPath(path);

Dalam contoh ini, objek biru PathF telah membulatkan gabungan pada puncaknya:

Objek klip

Objek grafis yang digambar ke ICanvas dapat dipotong sebelum menggambar, dengan metode berikut:

• ClipPath mengklip objek sehingga hanya area yang berada di dalam wilayah objek yang PathF akan terlihat.
• ClipRectangle klip objek sehingga hanya area yang berada dalam wilayah persegi panjang yang akan terlihat. Persegi panjang dapat ditentukan menggunakan float argumen, atau oleh Rect argumen atau RectF .
• SubtractFromClip klip objek sehingga hanya area yang berada di luar wilayah persegi panjang yang akan terlihat. Persegi panjang dapat ditentukan menggunakan float argumen, atau oleh Rect argumen atau RectF .

Contoh berikut menunjukkan cara menggunakan ClipPath metode untuk mengklip gambar:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    PathF path = new PathF();
    path.AppendCircle(100, 90, 80);
    canvas.ClipPath(path);  // Must be called before DrawImage
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

Dalam contoh ini, gambar diklip menggunakan PathF objek yang menentukan lingkaran yang berpusat pada (100.90) dengan radius 80. Hasilnya adalah bahwa hanya bagian gambar dalam lingkaran yang terlihat:

Penting

Metode ClipPath ini memiliki kelebihan beban yang memungkinkan WindingMode untuk ditentukan, yang mengatur algoritma isian yang digunakan saat mengklip. Untuk informasi selengkapnya, lihat Mode berliku.

Contoh berikut menunjukkan cara menggunakan SubtractFromClip metode untuk mengklip gambar:

using System.Reflection;
using IImage = Microsoft.Maui.Graphics.IImage;
using Microsoft.Maui.Graphics.Platform;

IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("GraphicsViewDemos.Resources.Images.dotnet_bot.png"))
{
    image = PlatformImage.FromStream(stream);
}

if (image != null)
{
    canvas.SubtractFromClip(60, 60, 90, 90);
    canvas.DrawImage(image, 10, 10, image.Width, image.Height);
}

Dalam contoh ini, area yang ditentukan oleh persegi panjang yang ditentukan oleh argumen yang disediakan ke SubtractFromClip metode diklip dari gambar. Hasilnya adalah bahwa hanya bagian gambar di luar persegi panjang yang terlihat: